多年手赚资深者
免费分享各种手赚软件与线报

dux主题如何增加网站首页公告内容?完整版攻略来了

dux主题如何增加网站首页公告内容?dux主题是WordPress程序中一个比较知名的主题,功能较多用户体验也好,我发现网上很多朋友都在使用这个主题,说明这款主题比较欢迎,不过根据每个人网站内容的不同,很多人不满足于dux现有的功能,所以很多人都在dux的基础上增加了一些功能模块。

比如像手赚线报网,因为是分享手赚项目的网站,所以就在首页增加了首页推荐活动模块、底部三栏式推广区、专题模板等等,还对网站进行了一些小改造,使之更符合我的审美。好了话不多说,这次给大家带来的是增加网站首页公告模块。网站首页滚动公告图如下所示:

由于目前我所使用的是WordPress下的DUX 主题,一切修改以dux主题为准,WordPress的修改大同小异,其他程序的修改大家见机行事,因为我也是个代码小白,网上关于WordPress滚动公告的实现方式有很多相关代码,简单看了一下,基本大同小异。下面我们就来看下dux主题的具体实现方式。

此次对主题的修改操作主要涉及 options.php、index.php以及css文件夹中的main.css,并且我们需要新建一个名为 qgg_announcement.php 的php文件填写相关代码丢到主题的modules文件加下,在主题修改之前还是提醒大家备份一下相关文件以防误操作引起的网站崩溃。

添加后台设置选项

由于滚动公告显示的内容一般也就1篇文章,这里为了方便管理我们可以在主题的后台设置选项下看到一个名为“首页公告”的选项卡。实现的代码与我之前的文章 dux主题应该怎么样添加热门推荐文章排行榜实现方式一样,这里只需要将下面这段代码添加到主题 options.php 文件的末尾 return $options; 之前即可,代码如下:

$options[] = array(
'name' => __('首页公告', 'haoui'),
'type' => 'heading' );

$options[] = array(
'name' => __('网站首页公告', 'haoui'),
'id' => 'qgg_announcement_open',
'std' => true,
'desc' => __('开启', 'haoui'),
'type' => 'checkbox');

$options[] = array(
'name' => '网站首页公告',
'desc' => '只能记录一条公告,切勿使用回车换行。不明白?<a href="https://www.wszqz.com/3726.html">点击这里</a> 进行留言。',
'id' => 'qgg_announcement',
'std' => '<a href="https://www.wszqz.com/">手赚线报网 | 免费分享手机赚钱软件与手机赚钱线报的平台</a>',
'type' => 'textarea');

添加完上述代码后,后台会显示成这样,这样能让大家随时修改广告内容,或者不用的时候直接不开启即可,非常方便:

创建 qgg_announcement.php 文件

上面的操作只是在主题的后台添加了一个设置界面,勾选这些按钮并不能使得前端显示公告栏,下面这段代码是核心代码,我们只需要新建一个名为 qgg_announcement.php文件丢在主题的 modules 文件夹下即可,因为主题在 functions-theme.php 文件夹中添加了一个 _moloader 的函数用于调取模板,这里为了方便我们直接使用该函数调取模板即可。

<section class="qgg_scroll">
<div id="qgg_scroll_list">
<div style="list-style: none;">
<?php $sitemsg = explode(PHP_EOL,_hui('qgg_announcement'));
foreach ($sitemsg as $value) {
echo '<li><i class="fa fa-volume-up fa-lg" aria-hidden="true" style="color:#ff6666"></i>&nbsp&nbsp'.stripslashes($value).'</li>';
} 
?>
</div>
</div>
</section>

添加前端显示代码

上面我们自建了一个名为 qgg_announcement.php 的模板文件,下面我们需要在主题的首页调用它,添加下面的代码至你想要显示的位置也就是主题的 index.php 文件中合适的位置处即可,我这里添加到了<div class=”content”>之后了,具体位置大家依据自己喜欢而定。

<?php 
    if( _hui('qgg_announcement_open') ){
        _moloader('qgg_announcement');
    }
?>

代码的主要作用通过后台是否开启热门文章选项判断是否加载上面的 qgg_announcement.php 模板文件。

添加CSS样式

最后我们只需要添加如下样式至 main.css 文件中即可:

/*首页滚动公告*/
#qgg_scroll_list{
    height:20px;
    overflow:hidden;
    line-height:20px;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}
#qgg_scroll_list li{
    overflow:hidden;
    text-overflow: ellipsis;
	word-break: break-all;
    white-space: nowrap;
}
 
#qgg_scroll_list a{
    color:rgba(36, 160, 240, 1);
    padding: 0 5px;
}
.qgg_scroll_zone{
    float:left;
    line-height:20px;
    margin:0 20px 0 0;
    padding: 0;
    color: #fff;
    font-size: 20px;
}
.qgg_scroll {
    width: 100%;
    margin: 0 5px;
    position: relative;
    padding: 0px 0px 13px 3px;
    border-radius: 3px;
}
@media (max-width: 560px) {
.qgg_scroll {padding:3px;}
}

以上代码是我从网上的几个代码修改大佬那里整理得来的,害怕代码过时了,也以自己的网站测试了一下,觉得没问题了才发布出来的,虽然现在我在后台关闭了这个公告,但只要我想用的时候随时可以调用出来,只需要在后台更换公告的内容就行了,这么简单的操作,简直是美滋滋!

不过这个公告只能有一条,多条公告的话也只是显示第一条,不过对于一般人来说应该就足够了,如果有哪儿不懂的可以下面留言,仅限于dux主题的博客,其他主题的我也不懂!见谅见谅,毕竟不是专业的!

赞(1) 打赏
未经允许不得转载:手赚线报网 » dux主题如何增加网站首页公告内容?完整版攻略来了
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用支付宝就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏