WordPress 的自定義分類法為我們管理內(nèi)容帶來了很大便利,默認的文章有“分類目錄”和“標簽” 這兩個文章類型,根據(jù)需要,我們可以添加任意多個分類方法到我們的文章類型中。在文章編輯頁面,管理分類方法的地方是右側(cè)的分類法元數(shù)據(jù)盒子,每個分類方法會有自己的一個元數(shù)據(jù)盒子,如果分類方法非常多的話,選擇分類的時候會一直往下拉,非常麻煩,效率也非常低。
如果我們能優(yōu)化一下分類方法的輸入方式,把管理分類方法的界面做成下面的樣式,就解決了這個問題,在下面的截圖中,每個分類方法是一個選項卡,找到對應(yīng)的選項卡只需要點一下即可,原來垂直排列的分類項目頁變成了橫向排列,查找起來也非常方便。今天我們就來看一下具體怎么把分類方法管理界面優(yōu)化成截圖中的樣子的吧。

第一步、添加 Metabox 到對應(yīng)的文章類型
首先,添加元數(shù)據(jù)盒子,下面代碼中的wizhi_tabbed_box是一個回調(diào),函數(shù)在第三步中定義,用來顯示元數(shù)據(jù)盒子。也是我們這篇文章的關(guān)鍵代碼。
add_action( 'add_meta_boxes', 'wizhi_add_import_box' );
function wizhi_add_import_box() {
$screens = ['post', 'page'];
foreach ( $screens as $screen ) {
add_meta_box( 'wizhi_tabbed_box', __( '附加數(shù)據(jù)', ' rhine' ), 'wizhi_tabbed_box', $screen, 'normal', 'high' );
}
}
第二步、添加 jQuery UI Tabs 腳本
WordPress 自帶了 jQuery UI Tabs 腳本,我們只需要在管理界面引入就可以了。
add_action( 'admin_enqueue_scripts', 'wizhi_metab_enqueue_scripts' );
function wizhi_metab_enqueue_scripts( $hook ) {
wp_enqueue_script( "jquery-ui-tabs" );
}
第二步、獲取分類法元數(shù)據(jù)盒子并顯示為選項卡
這一步是最關(guān)鍵的,這一步做的工作就是把我們需要的內(nèi)容顯示在元數(shù)據(jù)盒子中。
function wizhi_tabbed_box( $post ) {
?>
<!-- 添加顯示選項卡所需的 HTML -->
<div id="wizhi-tabs" class="ui-tabs">
<ul id="tabs-title" class="nav-tab-wrapper clearfix"></ul>
<div id="tab-content" class="tab-content"></div>
</div>
<script>
jQuery(document).ready(function ($) {
// 獲取側(cè)邊欄元數(shù)據(jù)盒子,排除發(fā)布和特色圖像
var metaboxes = $('#side-sortables').children('div:visible').not('#submitdiv').not('#postimagediv');
var count = metaboxes.length;
// 循環(huán)添加元數(shù)據(jù)盒子到選項卡中
$.each(metaboxes, function () {
$('#tabs-title').append('<li><a href="#tab-' + $(this).attr("id") + '">' + $(this).find('h2.hndle span').text() + '</a></li>');
$('#tab-content').append('<div id="tab-' + $(this).attr("id") + '" style="display: none">' + $(this).find('.inside').html() + '</div>');
$(this).remove();
});
// 顯示選項卡
$("#wizhi-tabs").tabs();
});
</script>
<?php
}
把上面的代碼復(fù)制到主題的 functions.php 中,或者添加到插件的代碼中,刷新一下后臺文章編輯頁面就能看到效果了。整個操作基本是使用 JavaScript 實現(xiàn)的,基本上不會造成插件沖突和兼容性問題。
除了文中介紹的方法,還有 Piklist 插件的 Workflow 也能實現(xiàn)類似的效果,不過該插件目前還沒有穩(wěn)定版本釋出,使用起來會有這樣那樣的 Bug,不建議在正式站點中使用。



感謝分享