关注主机资讯
一直在努力转载

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

效果大致如此

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

前言

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

以下代码适合DUX主题,如果要适用于其他主题,需要自己修改一下,对小白的提醒就是,请删除一些if (_hui(‘XXX’)) {}  这段代码,这个只是判断,加后台开关。以及文件位置,自己对应主题,自己修改一下。

1. 添加公告文章类型

在主题modules文件夹中新建一个gonggao.php,将下面代码粘贴进去,请勿使用wins自带文本编辑器!

代码已经折叠,点击展开

<?php if (_hui('no_bulletin')) {  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 get_stylesheet_directory() . '/modules/gonggao.php'; 

之后,再登录到 wordpress 网站的后台,就可以看到在文章的下面多了一个公告标签。
上述代码中的

'menu_icon' => 'dashicons-megaphone',

就是我们设定的 Dashicons 图标,效果如下图。如果去掉这行的话,图标默认和文章的图标一样。

 

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

图片引用来自文字咖

想获取其他的 Dashicons 图标?点击前往 Dashicons 主页,选取自己喜欢的图标!

2. 添加 css 代码

将下面代码复制到 主题文件夹css/main.css 文件当中即可:

代码已经折叠,点击展开

/* 首页滚动公告栏 */ #site-gonggao {     margin-top: -15px;     padding: 5px 5px 5px 15px;      font-size: 15px; } #site-gonggao .list {     padding-left: 5px; } .site-gonggao-div {     float: left;  font-size: 1.5em; } .fa-volume-up:before {     color: #ff6666; } #site-gonggao a {     color:rgb(133, 135, 136); } #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; } @media (max-width: 767px){#site-gonggao{display:none}}

当然这个样式不是很好看,可以通过自己设置!

3. 添加公告样式

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

代码已经折叠,点击展开

<!--解释下 _hui('bulletin_n') 这个,这个就是公告滚动篇数  0-N 当然不推荐那么很多,获取后台相应数字--> <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' => _hui('bulletin_n') ) );           while ( $loop->have_posts() ) : $loop->the_post();      ?>       <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>       <?php endwhile; wp_reset_query(); ?>       </ul>  </div> </div> 

70 则表示每个公告显示 70 个字符。这个可以根据你自己的情况设置。

最后如何引用并加后台开关:

将下面的公告内容代码放在 主题目录中的 index.php 自己想要显示的位置:

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

我觉的最佳位置为:

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

4.添加后台主题设置开关

位置在主题目录中的options.php ,请在return $options; 以前添加在代码,当然你可以找自己喜欢的位置。如果你要加入到首页这个大区内,请删除,前面1-3行代码!

代码已经折叠,点击展开

  $options[] = array(   'name' => __('首页滚动公告', 'haoui'),   'type' => 'heading' );   $options[] = array(    'name' => __('首页滚动公告', 'haoui'),    'id' => 'bulletin_s',    'std' => false,   'desc' => __('开启', 'haoui'),   'type' => 'checkbox');     $options[] = array(    'name' => __('是否显示后台公告功能', 'haoui'),    'id' => 'no_bulletin',    'std' => true,   'desc' => __('开启', 'haoui'),   'type' => 'checkbox');   $options[] = array(   'name' => __('公告滚动篇数', 'haoui'),   'desc' => __('开启,纯数字。', 'haoui'),   'id' => 'bulletin_n',   'std' => '3',   'type' => 'text'  );

效果演示

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

5.添加滚动公告 js 代码

如果你没添加js代码,那么恭喜你,你的公告并不会滚动,嘿嘿!

添加位置:主题目录header.php 最底下即可。(当然去掉<script type=”text/javascript”> 和</script> 然后将代码丢到 js/main.js去应该也是可以的。)

代码已经折叠,点击展开

  下面代码中3000为滚动时间,单位应该是毫秒

<!-- 滚动公告js --> <script type="text/javascript"> 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")',3000)        })  ; </script>

#DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

 

 

历史上的今天
五月
5
    哇哦~~~,历史上的今天没发表过文章哦
赞(0)
未经允许不得转载:楚媛Blog » #DUX#WordPress添加首页滚动公告栏 增加后台开关 代码版

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)