How to make rolling announcements in WordPress

1. Add announcement article type

First, register an announcement article type, including creating, adding, editing and deleting announcements. Create a new gonggao.php in the same directory as functions.php. The code is as follows:

<?php
function post_type_bulletin() {
 register_post_type(
 &#39;bulletin&#39;,
 array( &#39;public&#39; => true,
        &#39;publicly_queryable&#39; => true,
        &#39;hierarchical&#39; => false,
        &#39;labels&#39;=>array(
        &#39;name&#39; => _x(&#39;公告&#39;, &#39;post type general name&#39;),
        &#39;singular_name&#39; => _x(&#39;公告&#39;, &#39;post type singular name&#39;),
        &#39;add_new&#39; => _x(&#39;添加新公告&#39;, &#39;公告&#39;),
        &#39;add_new_item&#39; => __(&#39;添加新公告&#39;),
        &#39;edit_item&#39; => __(&#39;编辑公告&#39;),
        &#39;new_item&#39; => __(&#39;新的公告&#39;),
        &#39;view_item&#39; => __(&#39;预览公告&#39;),
        &#39;search_items&#39; => __(&#39;搜索公告&#39;),
        &#39;not_found&#39; =>  __(&#39;您还没有发布公告&#39;),
        &#39;not_found_in_trash&#39; => __(&#39;回收站中没有公告&#39;),
        &#39;parent_item_colon&#39; => &#39;&#39;
        ),
        &#39;show_ui&#39; => true,
        &#39;menu_position&#39;=>5,
        &#39;supports&#39; => array(
        &#39;title&#39;,
        &#39;author&#39;,
        &#39;excerpt&#39;,
        &#39;thumbnail&#39;,
        &#39;trackbacks&#39;,
        &#39;editor&#39;,
        &#39;comments&#39;,
        &#39;custom-fields&#39;,
        &#39;revisions&#39; ) ,
        &#39;show_in_nav_menus&#39; => true ,
        &#39;menu_icon&#39; => &#39;dashicons-megaphone&#39;,
        &#39;taxonomies&#39; => array(
        &#39;menutype&#39;,
        &#39;post_tag&#39;)
 )
 );}add_action(&#39;init&#39;, &#39;post_type_bulletin&#39;);
 function create_genre_taxonomy() {
 $labels = array(
 &#39;name&#39; => _x( &#39;公告分类&#39;, &#39;taxonomy general name&#39; ),
 &#39;singular_name&#39; => _x( &#39;genre&#39;, &#39;taxonomy singular name&#39; ),
 &#39;search_items&#39; =>  __( &#39;搜索分类&#39; ),
 &#39;all_items&#39; => __( &#39;全部分类&#39; ),
 &#39;parent_item&#39; => __( &#39;父级分类目录&#39; ),
 &#39;parent_item_colon&#39; => __( &#39;父级分类目录:&#39; ),
 &#39;edit_item&#39; => __( &#39;编辑公告分类&#39; ),
 &#39;update_item&#39; => __( &#39;更新&#39; ),
 &#39;add_new_item&#39; => __( &#39;添加新公告分类&#39; ),
 &#39;new_item_name&#39; => __( &#39;New Genre Name&#39; ),
 );
 register_taxonomy(&#39;genre&#39;,array(&#39;bulletin&#39;), array(
 &#39;hierarchical&#39; => true,
 &#39;labels&#39; => $labels,
 &#39;show_ui&#39; => true,
 &#39;query_var&#39; => true,
 &#39;rewrite&#39; => array( &#39;slug&#39; => &#39;genre&#39; ),
 ));}add_action( &#39;init&#39;, &#39;create_genre_taxonomy&#39;, 0 );

Reference the gonggao.php file of the announcement in functions.php and add the following code at the bottom of functions.php:

include ("gonggao.php");

After that, log in to the backend of the WordPress website, and you will see an announcement tag under the article.

'menu_icon' => 'dashicons-megaphone',

in the above code is the Dashicons icon we set, and the effect is as shown below. If you remove this line, the icon will be the same as the article icon by default.

2. Add announcement style

Place the following announcement content code in index.php where you want it to be displayed:

<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( &#39;post_type&#39; => &#39;bulletin&#39;, &#39;posts_per_page&#39; => 3 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, &#39;…&#39;); ?></li>
      <?php endwhile; wp_reset_query(); ?>
      </ul>
 </div></div>

3 of them It means there are 3 announcements, and 70 means each announcement displays 70 characters. This can be set according to your own situation.

3. Add css code

Copy the following code to the main.css file:

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. Add rolling announcement js code

To add the scrolling code of the announcement, you need the jQuery library. Of course, the DUX theme is already loaded. Just copy the following code to 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)  
     })  ;

Among them, line 4 “.list” is the class style of the ul tag in the calling code; “.sitediv” on line 12 is the class style of the div tag that wraps the ul.

For more wordpress related technical articles, please visit the wordpress tutorial column to learn!

The above is the detailed content of How to make rolling announcements in WordPress. For more information, please follow other related articles on the PHP Chinese website!