歡迎訪問成都SEO專家的博客,專注成都百度優化,成都搜索引擎優化,成都網站優化、值得信賴成都SEM專家!

給WordPress網站添加滾動公告的方法

wordpress 譚波 79℃

1、添加公告文章類型

首先,注冊一個公告的文章類型,包括公告的新建,添加,編輯與刪除。在functions.php的同級目錄下新建一個 gonggao.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中引用該公告的gonggao.php文件,在functions.php的底部加上如下代碼:

include (“gonggao.php”);

之后,再登錄到wordpress網站的后臺,就可以看到在文章的下面多了一個公告標簽。

上述代碼中的

‘menu_icon’ => ‘dashicons-megaphone’,

就是我們設定的 Dashicons 圖標,效果如下圖。如果去掉這行的話,圖標默認和文章的圖標一樣。

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’ => 3 ) );

while ( $loop->have_posts() ) : $loop-&gt;the_post();

?>;

<li><?php mb_strimwidth(the_content(), 0, 70, ‘…’); ?></li>

<?php endwhile; wp_reset_query(); ?>

</ul>

</di></di>

其中 3 代表有 3 條公告, 70 則表示每個公告顯示 70 個字符。這個可以根據你自己的情況設置。

3. 添加 css 代碼

將下面代碼復制到 main.css 文件當中即可:

div#site-gonggao {

line-height: 25px;

height: 30px;

background-color: #FFF;

padding-left: 10px;

color: #666;

-webkit-box-shadow: 0 5px 5px #D3D3D3;

box-shadow: 0 5px 5px #D3D3D3;}

#site-gonggao .list {

padding-left: 5px;}

.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;}

#site-gonggao-div2 .list li p {

display: inline;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;}

4. 添加滾動公告 js 代碼

添加公告的滾動代碼,需要 jQuery 庫,當然 DUX 主題是已經加載了的,直接將下面代碼復制到 header.php 中即可

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” 是調用代碼中,ul 標簽的 class 樣式;第 12 行的 “.sitediv” 是包裹 ul 的 div 標簽的 class 樣式。

轉載請注明:成都SEO-成都網站建設-成都網站優化 » 給WordPress網站添加滾動公告的方法

喜歡 (0)
十大棋牌游戏排行榜 高频彩票分析技巧论坛 七星彩预测推荐 福彩福彩3d图谜图库 广东快乐十分20分钟一期了 广西快三时间 江苏11选五乐五玩法 十一选五三胆技巧 股票分析软件手机版 北京快乐8恢复 山东11选五预测计划