全百科精品资源分享
免费优质资源下载平台

WordPressDUX主题添加首页滚动公告栏并带后台开关 纯代码实现

全百科网免费发布推广信息

今天全百科网给大家分享的是DUX主题添加首页滚动公告栏,并带有增加后台开关功能哦, 这个仿begin的滚动公告,就是还差点,没有加超链接,有能力的自己加一下吧。

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

1. 添加公告文章类型

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

<?php
// 作者:全百科网
// 网站:www.quanbaike.com
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 图标,效果如下图。如果去掉这行的话,图标默认和文章的图标一样。

2. 添加 css 代码

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

/* 首页滚动公告栏 
// 作者:全百科网
// 网站:www.quanbaike.com
*/
#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文件夹中新建quanbaike_diy_gonggao.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' => _hui('bulletin_n') ) );
          while ( $loop->have_posts() ) : $loop->the_post();
          echo '<li><a target="_blank" href="'.get_permalink().'">'.get_the_title().get_the_subtitle().'</a></li>';
      endwhile; wp_reset_query(); ?>
      </ul>
 </div>
</div>

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

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

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

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

代码添加最佳位置:WordPressDUX主题添加首页滚动公告栏并带后台开关 纯代码实现

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'
	);

5.添加滚动公告js代码

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

添加位置:主题目录header.php  修改后index.php文件(仅在首页加载JS)。(当然去掉<script type=”text/javascript”></script> 然后将代码丢到 js/main.js去应该也是可以的。)

<!-- 滚动公告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>

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

资源下载价格0.01立即支付
如有疑问请联系全百科网在线客服QQ或者邮箱。
Download WordPress Themes
Download Premium WordPress Themes Free
Download WordPress Themes Free
Download Nulled WordPress Themes
lynda course free download
download intex firmware
Download WordPress Themes
udemy paid course free download

搜一下 获取更多

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
全百科网 » WordPressDUX主题添加首页滚动公告栏并带后台开关 纯代码实现
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com

评论 抢沙发

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