WordPress純代碼無插件實(shí)現(xiàn)頂部滾動(dòng)+鏈接公告功能

編輯：狂族晨曦 來源：建站分享，WordPress技巧 日期：2015-07-27 閱讀： 17,141 次 30 條評(píng)論 » 百度已收錄

不知道怎么回事，公告欄這個(gè)功能非常有實(shí)用性，搜索引擎里面卻少之又少，所以我將我制作滾動(dòng)公告欄的經(jīng)驗(yàn)與大家分享一下，希望能對(duì)大家有點(diǎn)幫助。

之前為大家分享了單條公告的實(shí)現(xiàn)方法，有需要的童鞋可以看看：

傳送陣：WordPress純代碼無插件實(shí)現(xiàn)頂部單條公告

最終要實(shí)現(xiàn)的效果大家可以參考本站頭部。廢話不多說，開始教程。

一、注冊(cè)公告文章類型

首先，我們要注冊(cè)一個(gè)名為“公告”的文章類型，將以下代碼加入到WordPress主題functions.php最后一個(gè)?>前：

/*
** 成航先森_公告
** //www.cnidcc.cn
*/
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' => __('預(yù)覽公告'),
			'search_items' => __('搜索公告'),
			'not_found' =>  __('您還沒有發(fā)布公告'),
			'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 ,
		'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' => __( '父級(jí)分類目錄' ),
		 'parent_item_colon' => __( '父級(jí)分類目錄:' ),
		 '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 );

為了方便管理代碼也可以把上面的代碼復(fù)制下來然后保存文件為functions-gonggao.php，然后再引入functions.php文件中：

include("functions-gonggao.php");

請(qǐng)注意引入的functions-gonggao.php文件的存放路徑，這里的路徑是在functions.php文件所在目錄的當(dāng)前目錄下。

這時(shí)候，登錄網(wǎng)站后臺(tái)，就可以看到如下效果（點(diǎn)擊放大）：

二、公告內(nèi)容調(diào)用

現(xiàn)在我們要將后臺(tái)設(shè)置的自定義文章類型公告內(nèi)容顯示出來，把下面的代碼放到你想要調(diào)用公告內(nèi)容的頁面即可，本站是放在了頭部模板內(nèi)，所以整站度可以看到：

<div id="site-gonggao">
<div class="site-gonggao-div"><i class="fa fa-volume-up"></i>&nbsp;</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' => 5 ) );
          while ( $loop->have_posts() ) : $loop->the_post();
     ?>
      <li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></li>
      <?php endwhile; wp_reset_query(); ?>
      </ul>
 </div>
</div>

其中的"5"為調(diào)用顯示條數(shù),"70"為調(diào)出內(nèi)容的字符數(shù)，這兩個(gè)參數(shù)可根據(jù)自己的情況設(shè)置。這里的代碼結(jié)構(gòu)因?yàn)槭莵碓从诒菊荆哉?qǐng)另行結(jié)合自己的網(wǎng)站做適當(dāng)?shù)男薷摹?/p>

三、CSS樣式

上面已經(jīng)將設(shè)置的公告顯示出來了，那么接下來就要將其css美化了：

div#site-gonggao{line-height: 25px; height: 30px; background-color: #FFF; width: 990px; margin: 0 auto 10px; padding-left: 10px; color: #666; border-left: 5px solid #3E94D2; border-right: 5px solid #3E94D2; -webkit-box-shadow: 0 5px 5px #D3D3D3; box-shadow: 0 5px 5px #D3D3D3;}
.site-gonggao-div{float:left;}
.fa-volume-up:before{content: "\f028"; color: #428bca;}
#site-gonggao a{color: #1663B7;}
#site-gonggao a:hover{color: #09F;}
#site-gonggao-div2{overflow: hidden;
height:30px;}
#site-gonggao-div2 .list li{height: 30px;line-height: 30px;overflow: hidden;}

此樣式僅做參考，請(qǐng)大家結(jié)合自己的網(wǎng)站自行調(diào)整。

四、滾動(dòng)代碼

首先提醒大家，此JS代碼需要jQuery庫，如果網(wǎng)站沒有加載的還需要添加一個(gè)jQuery庫。

網(wǎng)上給出的滾動(dòng)代碼如下，大家測(cè)試可用的話就可以直接用，不行的話就請(qǐng)繼續(xù)往下看：

function autoScroll(obj){  
    $(obj).find(".list").animate({  
          marginTop : "-30px"  
      },500,function(){  
      $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  
      })  
      };
   $(function(){   
       setInterval('autoScroll(".sitediv")',4000)  
     })  ;

上面的代碼如果無效，就請(qǐng)使用下面的代碼。另外，上面的代碼中會(huì)有一個(gè)BUG，如果只有一條公告的話，也會(huì)滾動(dòng)，因此，我在中間添加了兩行代碼，使其在只有一條公告的情況下，不運(yùn)行滾動(dòng)代碼。代碼如下：

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")',4000)  
     })  ;

注：其中，第4行的".list"是調(diào)用代碼中，ul標(biāo)簽的class樣式；第12行的".sitediv"是包裹ul的div標(biāo)簽的class樣式。

有什么疑問或錯(cuò)誤，歡迎在底部提出。