大前端dux主题如何在首页添加滚动公告

dux主题很多伙伴们都知道，但也有相当一部分同学不会用代码去更改它的样式，例如在首页添加滚动公告，实现让用户第一时间知道相关动态，当然网上也有很多相关的代码可以去实现，今天老牛小站就分享一下我自己用的方法，因为本站主题用的dux主题，所以喜欢dux主题的朋友可以安此方法．

在修改之前记得注意备份自己的数据，以免造成不必要的麻烦，我们主要修改以下几个文件，index.php；main.css ；options.php 如果你是新手可以了解在wordpress当中这几个文件的属性，详细的解说也不多说了，今天只讲滚动公告的实现．

前端需要添加的代码如下：

找到主题的index.php文件，然后在找到<div class=”content”> 这段代码，把下方的代码添加在后面即可，当然也可以根据自己的方位在放置你需要的位置．

<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>

在后台添加选项，方便于设置公告：

添加后台选项，顾名思义能更好的便于操作，之前有一个站点直接在首页加入简单代码，这也是可行的，只不过不便于操作并且没有样式来衬托，不是很美观．别的不多说，将下面代码放置在options.php中，如下：

$options[] = array(
		'name' => '网站滚动公告',
		'desc' => '每行一条，回车换行即可。不明白？<a href="https://www.jzb85.com/">点击这里</a> 进行留言。',
		'id' => 'qgg_announcement',
		'std' => '<a href="https://www.jzb85.com">老牛小站 | 一个伪程序员的IT随笔</a>',
		'type' => 'textarea');

添加一段JavaScript脚本代码，实现滚动效果如下：

如果不知道此代码放置何处，我们可以直接在dux主题的自定义代码中即可．也可以放在main.js 文件中去．

<script type="text/javascript">

function qgg_marquee(){ 
var t; 
var p=false; 
var o=document.getElementById("qgg_scroll_list");
if (o = ""){return;} 
o.innerHTML+=o.innerHTML; 
o.onmouseover=function(){p=true} 
o.onmouseout=function(){p=false} 
o.scrollTop = 0; 
function start(){ 
t=setInterval(scrolling,30); 
if(!p){ o.scrollTop += 1;} 
} 
function scrolling(){ 
if(o.scrollTop%20!=0){ 
o.scrollTop += 1; 
if(o.scrollTop>=o.scrollHeight/2)
o.scrollTop = 0; 
}else{ 
clearInterval(t); 
setTimeout(start,3000);//设置滚动时间 
} 
} 
setTimeout(start,3000); //设置滚动时间
}
$(document).ready(qgg_marquee);

</script>

其次是添加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;}
}

当然，你也可以放置在主题设置中的那个自定义css样式，方法是通变的，如果你有更好的样式也可以根据自己的方式去修改，在次说下在修改之前需要备份，已免造成不必要的麻烦.

打赏赞