1、添加公告文章類型
首先,注冊一個公告的文章類型,包括公告的新建,添加,編輯與刪除。在functions.php的同級目錄下新建一個 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?);
在functions.php中引用該公告的gonggao.php文件,在functions.php的底部加上如下代碼:
include?("gonggao.php");
之后,再登錄到WordPress網站的后臺,就可以看到在文章的下面多了一個公告標簽。
上述代碼中的
'menu_icon'?=>?'dashicons-megaphone',
就是我們設定的 Dashicons 圖標,效果如下圖。如果去掉這行的話,圖標默認和文章的圖標一樣。
2. 添加公告樣式
將下面的公告內容代碼放在 index.php 自己想要顯示的位置:
<div> <div> <i></i>?</div> ?<div> ????<ul> ????<?php $loop = new WP_Query( array( 'post_type' =>?'bulletin',?'posts_per_page'?=>?3?)?); ??????????while?(?$loop->have_posts()?)?:?$loop->the_post(); ??????> ??????<li><?php mb_strimwidth(the_content(), 0, 70, '…'); ?></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