WordPress#DUX主题# 添加首页滚动公告栏 增加后台开关

初缘Cvps小站

更新修复一个小Bug和......
更新修复一点小bug，以及加个超链接。公告显示更改为公告标题，不显示公告文章内容。
修改js存放位置，改为存放在index.php，放在首头，每个页面都加载js 会出现错误。
唯一小遗憾，就是点击公告后，顶部栏，没显示当前位置。就是点击谋篇文章后，会显示 当前位置-文章分类-文章标题  这样子。

cvps_diy_gonggao.php 内容更新为

1. <div id="site-gonggao">
   
2. <div class="site-gonggao-div"><i class="fa fa-volume-up"></i> </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' => _hui('bulletin_n') ) );
   
6.           while ( $loop->have_posts() ) : $loop->the_post();
   
7.           echo '<li><a target="_blank" href="'.get_permalink().'">'.get_the_title().get_the_subtitle().'</a></li>';
   
8.       endwhile; wp_reset_query(); ?>
   
9.       </ul>
   
10. </div>
    
11. </div>

复制代码

前言
最近都在折腾DUX主题的，然后搜了下滚动公告这方面的资料，最后还是喜欢文字咖大佬的这个，这两天我稍微改了一点。我这个魔改仿begin的滚动公告，就是还差点，没有加超链接。


1.
在主题modules文件夹中新建一个gonggao.php

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

复制代码

2.
在 functions.php 的底部加上如下代码：

1. /*后台滚动公告*/
   
2. include get_stylesheet_directory() . '/modules/gonggao.php';

复制代码

3.
主题文件夹css/main.css 文件当中即可：

1. /* 首页滚动公告栏 */
   
2. #site-gonggao {
   
3.     margin-top: -15px;
   
4.     padding: 5px 5px 5px 15px;       
   
5.     font-size: 15px;
   
6. }
   
7. #site-gonggao .list {
   
8.     padding-left: 5px;
   
9. }
   
10. .site-gonggao-div {
    
11.     float: left;
    
12.         font-size: 1.5em;
    
13. }
    
14. .fa-volume-up:before {
    
15.     color: #ff6666;
    
16. }
    
17. #site-gonggao a {
    
18.     color:rgb(133, 135, 136);
    
19. }
    
20. #site-gonggao-div2 {
    
21.     overflow: hidden;
    
22.     height: 30px;
    
23. }
    
24. #site-gonggao-div2 .list li {
    
25.     height: 30px;
    
26.     line-height: 30px;
    
27.     overflow: hidden;
    
28. }
    
29. #site-gonggao-div2 .list li p {
    
30.     display: inline;
    
31.     overflow: hidden;
    
32.     white-space: nowrap;
    
33.     text-overflow: ellipsis;
    
34. }
    
35. @media (max-width: 767px){#site-gonggao{display:none}}

复制代码

4.
在主题目录中modules文件夹中新建 cvps_diy_gonggao.php 添加以下内容。

1. <div id="site-gonggao">
   
2. <div class="site-gonggao-div"><i class="fa fa-volume-up"></i> </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' => _hui('bulletin_n') ) );
   
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>

复制代码

5.
主题目录中的 index.php 自己想要显示的位置：

1. <!--首页滚动公告-->  
   
2. <?php
   
3.         if (_hui('bulletin_s')) {
   
4.         require get_stylesheet_directory() . '/modules/cvps_diy_gonggao.php';}
   
5. ?>

复制代码

6.
位置在主题目录中的options.php ，请在return $options; 以前添加在代码

1.   $options[] = array(
   
2.                 'name' => __('首页滚动公告', 'haoui'),
   
3.                 'type' => 'heading' );
   
4. 
   
5. $options[] = array(
   
6.           'name' => __('首页滚动公告', 'haoui'),
   
7.                 'id' => 'bulletin_s',
   
8.                 'std' => false,
   
9.                 'desc' => __('开启', 'haoui'),
   
10.                 'type' => 'checkbox');       
    
11. 
    
12.   $options[] = array(
    
13.           'name' => __('是否显示后台公告功能', 'haoui'),
    
14.                 'id' => 'no_bulletin',
    
15.                 'std' => true,
    
16.                 'desc' => __('开启', 'haoui'),
    
17.                 'type' => 'checkbox');
    
18. 
    
19.         $options[] = array(
    
20.                 'name' => __('公告滚动篇数', 'haoui'),
    
21.                 'desc' => __('开启，纯数字。', 'haoui'),
    
22.                 'id' => 'bulletin_n',
    
23.                 'std' => '3',
    
24.                 'type' => 'text'
    
25.         );

复制代码

7.
主题目录header.php 最底下即可。（当然去掉<script type="text/javascript"> 和</script> 然后将代码丢到 js/main.js去应该也是可以的。）

1. <!-- 滚动公告js -->
   
2. <script type="text/javascript">
   
3. function autoScroll(obj){  
   
4. var aa=document.getElementById("siteul").getElementsByTagName("li").length;
   
5. if(aa!==1){
   
6.     jQuery(obj).find(".list").animate({  
   
7.           marginTop : "-30px"  
   
8.       },500,function(){  
   
9.       jQuery(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
   
10.       })  
    
11.       };
    
12.       }
    
13.    $(function(){   
    
14.        setInterval('autoScroll(".sitediv")',3000)  
    
15.      })  ;
    
16. </script>

复制代码

当然也可以看我博客的原文：https://cvps.top/9244.html

相关图片：

fatal

帮大佬顶。。。感觉wp好复杂

张小龙

支持一下大佬1

PT80

我准备攒钱去买个正版.....

hxyz

我 wp 建起来两个月没写东西了

初缘Cvps小站

PT80 发表于 2019-5-5 23:43
我准备攒钱去买个正版.....

5.2开心版也是可以的。哈

aixuan99

初缘Cvps小站 发表于 2019-5-6 00:14
5.2开心版也是可以的。哈

不上5.3嘛

宁静致远

大佬以后可以提供一个现成的文件，方便直接上传省一发。

qqab

太棒了 给力支持一个哈