### [WordPress滚动公告怎么做](https://www.prosaas.cn/article/2823)

**Published:** 2019-07-12T03:41:41

**Author:** 5201314

**Excerpt:** 1、添加公告文章类型首先，注册一个公告的文章类型，包括公告的新建，添加，编辑与删除。在functions.ph…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212121228126.jpg)

**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滚动公告怎么做的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** class, css, jquery, JS, php, ul, WordPress

**Categories:** WordPress

---