wordpress添加顶部滚动公告

非插件版为wordpress网站添加顶部的滚动公告栏，添加网站公告，效果如本站顶部的公告，公告内容中可以包括超链接。

添加公告文章类型

首先，注册一个公告的文章类型，包括公告的新建，添加，编辑与删除。在functions.php的同级目录下新建一个gonggao.php：

1. <?php
2. /**
3. * Created by PhpStorm.
4. * User: Fly
5. * Date: 2018/3/22
6. * Time: 18:08
7. */
8. function post_type_bulletin() {
9. register_post_type(
10. 'bulletin',
11. array( 'public' => true,
12.        'publicly_queryable' => true,
13.        'hierarchical' => false,
14.        'labels'=>array(
15.        'name' => _x('公告', 'post type general name'),
16.        'singular_name' => _x('公告', 'post type singular name'),
17.        'add_new' => _x('添加新公告', '公告'),
18.        'add_new_item' => __('添加新公告'),
19.        'edit_item' => __('编辑公告'),
20.        'new_item' => __('新的公告'),
21.        'view_item' => __('预览公告'),
22.        'search_items' => __('搜索公告'),
23.        'not_found' =>  __('您还没有发布公告'),
24.        'not_found_in_trash' => __('回收站中没有公告'),
25.        'parent_item_colon' => ''
26.        ),
27.        'show_ui' => true,
28.        'menu_position'=>5,
29.        'supports' => array(
30.        'title',
31.        'author',
32.        'excerpt',
33.        'thumbnail',
34.        'trackbacks',
35.        'editor',
36.        'comments',
37.        'custom-fields',
38.        'revisions' ) ,
39.        'show_in_nav_menus' => true ,
40.        'taxonomies' => array(
41.        'menutype',
42.        'post_tag')
43. )
44. );
45. }
46. add_action('init', 'post_type_bulletin');
48. function create_genre_taxonomy() {
49. $labels = array(
50. 'name' => _x( '公告分类', 'taxonomy general name' ),
51. 'singular_name' => _x( 'genre', 'taxonomy singular name' ),
52. 'search_items' =>  __( '搜索分类' ),
53. 'all_items' => __( '全部分类' ),
54. 'parent_item' => __( '父级分类目录' ),
55. 'parent_item_colon' => __( '父级分类目录:' ),
56. 'edit_item' => __( '编辑公告分类' ),
57. 'update_item' => __( '更新' ),
58. 'add_new_item' => __( '添加新公告分类' ),
59. 'new_item_name' => __( 'New Genre Name' ),
60. );
61. register_taxonomy('genre',array('bulletin'), array(
62. 'hierarchical' => true,
63. 'labels' => $labels,
64. 'show_ui' => true,
65. 'query_var' => true,
66. 'rewrite' => array( 'slug' => 'genre' ),
67. ));
68. }
69. add_action( 'init', 'create_genre_taxonomy', 0 );

在functions.php中引用该公告的php文件，在functions.php的底部加上如下代码：

1. include ("gonggao.php");

之后，再登录到wordpress网站的后台，就可以看到在文章的下面多了一个公告标签：

添加公告与样式

公告内容代码

将公告内容放在页面的某个位置，例如我将公告放在页面的顶部：

1. <div id="site-gonggao">
2. <div class="site-gonggao-div"><i class="fa fa-volume-up"></i>&nbsp;</div>
3. <div id="site-gonggao-div2" class="sitediv">
4.    <ul class="list" id="siteul">
5.    <?php $loop = new WP_Query( array( 'post_type' => 'bulletin', 'posts_per_page' => 3 ) );
6.          while ( $loop->have_posts() ) : $loop->the_post();
7.     ?>
8.      <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>
9.      <?php endwhile; wp_reset_query(); ?>
10.      </ul>
11. </div>
12. </div>

其中3代表有3条公告，70则表示每个公众显示70个字符。这个可以根据你自己的情况设置。

公告CSS样式代码

添加了公告的内容代码后，需要对公告设计相应的样式，依然以本站的样式为例：

1. div#site-gonggao {
2.    line-height: 25px;
3.    height: 30px;
4.    background-color: #FFF;
5.    padding-left: 10px;
6.    color: #666;
7.    border-left: 5px solid #3E94D2;
8.    border-right: 5px solid #3E94D2;
9.    -webkit-box-shadow: 0 5px 5px #D3D3D3;
10.    box-shadow: 0 5px 5px #D3D3D3;
11. }
13. #site-gonggao .list {
14.    padding-left: 5px;
15. }
17. .site-gonggao-div {
18.    float: left;
19. }
21. .fa-volume-up:before {
22.    content: "f028";
23.    color: #428bca;
24. }
26. #site-gonggao a {
27.    color: #1663B7;
28. }
30. #site-gonggao a:hover {
31.    color: #09F;
32. }
34. #site-gonggao-div2 {
35.    overflow: hidden;
36.    height: 30px;
37. }
39. #site-gonggao-div2 .list li {
40.    height: 30px;
41.    line-height: 30px;
42.    overflow: hidden;
43. }
45. #site-gonggao-div2 .list li p {
46.    display: inline;
47.    overflow: hidden;
48.    white-space: nowrap;
49.    text-overflow: ellipsis;
50. }

添加公告滚动效果

在添加了公共的内容以及样式后，就是需要添加公告的滚动代码了，需要jQuery库：

1.    function autoScroll(obj) {
2.        $(obj).find(".list").animate({
3.            marginTop : "-30px"
4.        },500,function(){
5.            $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
6.        })
7.    }
8.    $(function() {
9.        setInterval(function () { autoScroll(".sitediv") },4000);
10.    }

全部弄好之后，以后如果需要添加新的公告，只需要在wordpress后台发布对应的公告内容，修改公告内容代码中的postsperpage对应的值就可以实现顶部滚动公告栏的效果了。