WordPress滾動公告怎么做

WordPress滾動公告怎么做

1、添加公告文章類型

首先,注冊一個公告的文章類型,包括公告的新建,添加,編輯與刪除。在functions.php的同級目錄下新建一個 gonggao.php ,代碼如下:

<?php function post_type_bulletin() {  register_post_type(  &#39;bulletin&#39;,  array( &#39;public&#39; =>?true, ????????'publicly_queryable'?=&gt;?true, ????????'hierarchical'?=&gt;?false, ????????'labels'=&gt;array( ????????'name'?=&gt;?_x('公告',?'post?type?general?name'), ????????'singular_name'?=&gt;?_x('公告',?'post?type?singular?name'), ????????'add_new'?=&gt;?_x('添加新公告',?'公告'), ????????'add_new_item'?=&gt;?__('添加新公告'), ????????'edit_item'?=&gt;?__('編輯公告'), ????????'new_item'?=&gt;?__('新的公告'), ????????'view_item'?=&gt;?__('預覽公告'), ????????'search_items'?=&gt;?__('搜索公告'), ????????'not_found'?=&gt;??__('您還沒有發布公告'), ????????'not_found_in_trash'?=&gt;?__('回收站中沒有公告'), ????????'parent_item_colon'?=&gt;?'' ????????), ????????'show_ui'?=&gt;?true, ????????'menu_position'=&gt;5, ????????'supports'?=&gt;?array( ????????'title', ????????'author', ????????'excerpt', ????????'thumbnail', ????????'trackbacks', ????????'editor', ????????'comments', ????????'custom-fields', ????????'revisions'?)?, ????????'show_in_nav_menus'?=&gt;?true?, ????????'menu_icon'?=&gt;?'dashicons-megaphone', ????????'taxonomies'?=&gt;?array( ????????'menutype', ????????'post_tag') ?) ?);}add_action('init',?'post_type_bulletin'); ?function?create_genre_taxonomy()?{ ?$labels?=?array( ?'name'?=&gt;?_x(?'公告分類',?'taxonomy?general?name'?), ?'singular_name'?=&gt;?_x(?'genre',?'taxonomy?singular?name'?), ?'search_items'?=&gt;??__(?'搜索分類'?), ?'all_items'?=&gt;?__(?'全部分類'?), ?'parent_item'?=&gt;?__(?'父級分類目錄'?), ?'parent_item_colon'?=&gt;?__(?'父級分類目錄:'?), ?'edit_item'?=&gt;?__(?'編輯公告分類'?), ?'update_item'?=&gt;?__(?'更新'?), ?'add_new_item'?=&gt;?__(?'添加新公告分類'?), ?'new_item_name'?=&gt;?__(?'New?Genre?Name'?), ?); ?register_taxonomy('genre',array('bulletin'),?array( ?'hierarchical'?=&gt;?true, ?'labels'?=&gt;?$labels, ?'show_ui'?=&gt;?true, ?'query_var'?=&gt;?true, ?'rewrite'?=&gt;?array(?'slug'?=&gt;?'genre'?), ?));}add_action(?'init',?'create_genre_taxonomy',?0?);

在functions.php中引用該公告的gonggao.php文件,在functions.php的底部加上如下代碼:

include?("gonggao.php");

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

'menu_icon'?=&gt;?'dashicons-megaphone',

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

2. 添加公告樣式

將下面的公告內容代碼放在 index.php 自己想要顯示的位置:

<div> <div> <i></i>?</div> ?<div> ????<ul> ????<?php  $loop = new WP_Query( array( &#39;post_type&#39; =>?'bulletin',?'posts_per_page'?=&gt;?3?)?); ??????????while?(?$loop-&gt;have_posts()?)?:?$loop-&gt;the_post(); ??????&gt; ??????<li><?php  mb_strimwidth(the_content(), 0, 70, &#39;…&#39;); ?></li> ??????<?php  endwhile; wp_reset_query(); ?> ??????</ul> ?</div> </div>

其中 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 樣式。

更多wordpress相關技術文章,請訪問wordpress教程欄目進行學習!

? 版權聲明
THE END
喜歡就支持一下吧
點贊9 分享