[mcj]Dux大前端主题增加网站顶端公告模块-马春杰杰

1 后台添加公告按钮

首先需要在后台添加公告按钮，如图：

在functions.php同级目录下新建mcj_gonggao.php文件，代码如下：

<?php
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 );

<?php

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文件，引用刚刚建立的文件：

include ("mcj_gonggao.php");

1	include ("mcj_gonggao.php");

这时如果我们登陆后台，就会发现在文章下方多了一个公告按钮。

2 添加位置

把下面代码放到index.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>

<?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 class="content">下面。

3 添加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}}

/* 首页滚动公告栏 */

#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}}

4 增加开关按钮

我们找到主题目录下options.php文件，找到return $options; 在这之前添加：

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