1、新增公告文章類型
首先，註冊一個公告的文章類型，包括公告的新建，添加，編輯與刪除。在functions.php的同級目錄下新建一個gonggao.php ，程式碼如下：
<?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>
</div></div>其中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滾動公告怎麼做的詳細內容。更多資訊請關注PHP中文網其他相關文章！
