Wordpress滚动公告怎么做

1、添加公告文章类型

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

其中 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;}

首先，注册一个公告的文章类型，包括公告的新建，添加，编辑与删除。在functions.php的同级目录下新建一个 gonggao.php ，代码如下：
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)  

     })  ;

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
其中，第 4 行的 “.list” 是调用代码中，ul 标签的 class 样式；第 12 行的 “.sitediv” 是包裹 ul 的 div 标签的 class 样式。