如何给WordPress网站添加滚动公告？今天我们一起了解一下。
1、添加公告文章类型
首先，注册一个公告的文章类型，包括公告的新建，添加，编辑与删除。在functions.php的同级目录下新建一个 gonggao.php ，代码如下：
function post_type_bulletin() {
register_post_type(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’bulletin\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
array( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’public\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’publicly_queryable\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’hierarchical\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => false,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’labels\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’=>array(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => _x(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’post type general name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’singular_name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => _x(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’post type singular name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’add_new\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => _x(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’添加新公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’add_new_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’添加新公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’edit_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’编辑公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’new_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’新的公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’view_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’预览公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’search_items\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’搜索公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’not_found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’您还没有发布公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’not_found_in_trash\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’回收站中没有公告\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’parent_item_colon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’
),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’show_ui\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menu_position\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’=>5,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’supports\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => array(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’title\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’author\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’excerpt\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’thumbnail\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’trackbacks\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’editor\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’comments\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’custom-fields\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’revisions\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ) ,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’show_in_nav_menus\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true ,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menu_icon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’dashicons-megaphone\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’taxonomies\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => array(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menutype\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’post_tag\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’)
)
);}add_action(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’post_type_bulletin\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’);
function create_genre_taxonomy() {
$labels = array(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => _x( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’公告分类\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’taxonomy general name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’singular_name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => _x( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’genre\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’taxonomy singular name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’search_items\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’搜索分类\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’all_items\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’全部分类\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’parent_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’父级分类目录\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’parent_item_colon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’父级分类目录:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’edit_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’编辑公告分类\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’update_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’更新\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’add_new_item\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’添加新公告分类\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’new_item_name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => __( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’New Genre Name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
);
register_taxonomy(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’genre\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,array(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’bulletin\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’), array(
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’hierarchical\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’labels\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => $labels,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’show_ui\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’query_var\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => true,
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’rewrite\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => array( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’slug\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’genre\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ ),
));}add_action( \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’create_genre_taxonomy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, 0 );
在functions.php中引用该公告的gonggao.php文件，在functions.php的底部加上如下代码：
include (\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”gonggao.php\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”);
之后，再登录到wordpress网站的后台，就可以看到在文章的下面多了一个公告标签。
上述代码中的
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’menu_icon\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’dashicons-megaphone\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,
就是我们设定的 Dashicons 图标，效果如下图。如果去掉这行的话，图标默认和文章的图标一样。
2. 添加公告样式
将下面的公告内容代码放在 index.php 自己想要显示的位置：
<div id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”site-gonggao\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><div class\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”site-gonggao-div\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”><i class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”fa fa-volume-up\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”</i></div>;
<div id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”site-gonggao-div2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”sitediv\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
< ul class=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\” id=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”siteul\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”>
<?php $loop = new WP_Query( array(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’post_type\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ =>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’bulletin\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’posts_per_page\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’ => 3 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>;
<li><?php mb_strimwidth(the_content(), 0, 70, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’…\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’); ?></li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</di></di>
其中 3 代表有 3 条公告， 70 则表示每个公告显示 70 个字符。这个可以根据你自己的情况设置。
3. 添加 css 代码
将下面代码复制到 main.css 文件当中即可：
div#site-gonggao {
line-height: 25px;
height: 30px;
background-color: #FFF;
padding-left: 10px;
color: #666;
-webkit-box-shadow: 0 5px 5px #D3D3D3;
box-shadow: 0 5px 5px #D3D3D3;}
#site-gonggao .list {
padding-left: 5px;}
.site-gonggao-div {
float: left;}
.fa-volume-up:before {
content: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\f028\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”;
color: #428bca;}
#site-gonggao a {
color: #1663B7;}
#site-gonggao a:hover {
color: #09F;}
#site-gonggao-div2 {
overflow: hidden;
height: 30px;}
#site-gonggao-div2 .list li {
height: 30px;
line-height: 30px;
overflow: hidden;}
#site-gonggao-div2 .list li p {
display: inline;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;}
4. 添加滚动公告 js 代码
添加公告的滚动代码，需要 jQuery 库，当然 DUX 主题是已经加载了的，直接将下面代码复制到 header.php 中即可
function autoScroll(obj){ var aa=document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”siteul\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).getElementsByTagName(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).length;if(aa!==1){
jQuery(obj).find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).animate({
marginTop : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”-30px\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”
},500,function(){
jQuery(this).css({marginTop : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”0px\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”}).find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”li:first\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”).appendTo(this);
})
};
}
$(function(){
setInterval(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’autoScroll(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”.sitediv\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\”)\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\’,4000)
}) ;
其中，第 4 行的 “.list” 是调用代码中，ul 标签的 class 样式；第 12 行的 “.sitediv” 是包裹 ul 的 div 标签的 class 样式。
更多wordpress相关技术文章，请访问wordpress教程栏目进行学习！
以上就是Wordpress滚动公告怎么做的详细内容，更多请关注WordPress主题站。
