WordPress纯代码无插件实现顶部滚动+链接公告功能

我不知道这是怎么回事。公告栏的功能很实用，但是在搜索引擎中很少，所以我将自己制作滚动公告栏的经验分享给大家，希望能对大家有一点帮助。

之前，我给大家分享了单一公告的实现方法。有需要的童鞋可以看看:

传输数组:WordPress无插件纯代码实现顶单公告

最终效果可以参考本网站负责人。废话少说，开始教程。

一、注册公告类文章
首先，我们需要注册一个名为“公告”的文章类型，并在WordPress主题functions.php最后添加以下代码？>之前:

/*
** 公告
** //http://www.zhanceo.com/
*/
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 ,
        '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-gonggao.php，然后将其引入functions.php文件:

include("functions-gonggao.php");

请注意引入的functions-gonggao.php文件的存放路径，这里的路径是在functions.php文件所在目录的当前目录下。

二、公告内容调用
现在，我们要显示在后台设置的自定义文章类型的公告内容，并将以下代码放在您想要调用公告内容的页面上。这个网站放在标题模板中，所以可以看到整个网站:

<div id="site-gonggao">
<div class="site-gonggao-div"><i class="fa fa-volume-up"></i>&nbsp;</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' => 5 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>
      <?php endwhile; wp_reset_query(); ?>
      </ul>
 </div>
</div>

其中，“5”是调用显示的数量，“70”是调用内容的字符数。这两个参数可以根据自己的情况进行设置。这里的代码结构来自于这个网站，所以请结合自己的网站做适当的修改。

第三，CSS风格
上面已经显示了设置的公告，接下来将美化css:

div#site-gonggao{line-height: 25px; height: 30px; background-color: #FFF; width: 990px; margin: 0 auto 10px; padding-left: 10px; color: #666; border-left: 5px solid #3E94D2; border-right: 5px solid #3E94D2; -webkit-box-shadow: 0 5px 5px #D3D3D3; box-shadow: 0 5px 5px #D3D3D3;}
.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;}

此款式仅供参考，请根据自己的网站进行调整。

四.滚动代码
首先提醒大家，这段JS代码需要一个jQuery库，如果网站没有加载，需要添加一个jQuery库。

在线给出的滚动代码如下。如果有测试，可以直接使用。如果没有，请继续往下看:

function autoScroll(obj){  
    $(obj).find(".list").animate({  
          marginTop : "-30px"  
      },500,function(){  
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
      })  
      };
   $(function(){   
       setInterval('autoScroll(".sitediv")',4000)  
     })  ;

如果以上代码无效，请使用以下代码。另外，上面的代码会有一个BUG，如果只有一个公告，也会滚动。因此，我在中间添加了两行代码，使其在只有一个公告时不运行滚动代码。代码如下:

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)  
     })  ;

注:该”。第四行的list”是调用代码中ul标签的类样式；“那个。第12行的sitediv”是包装ul的div标签的类样式。