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，不建議在正式站點中使用。