「WordPressのブロックエディタ（Gutenberg）で投稿編集画面をカスタマイズしたい」と考える開発者は多いでしょう。
特に「特定のカテゴリー・タクソノミー・タグなどを投稿画面から非表示にしたい」というニーズは、カスタム投稿タイプや業務要件に合わせたサイト制作ではレアケースですがあります。
本記事では、「投稿編集画面から特定のカテゴリー・タクソノミー・タグパネルを非表示にする方法」をGutenberg対応で解説します。
よくある課題：「meta_box_cb」が効かない？
WordPressの register_taxonomy() 関数では、以下のように meta_box_cb を false に設定することで、メタボックスの表示を抑制できるはず…なのですが：
'meta_box_cb' => falseこれはClassic Editor（旧エディタ）では有効ですが、Gutenberg（ブロックエディタ）ではほとんど効果がないようです。
なぜGutenbergでは効かないのか？
Gutenbergでは、投稿編集画面の各セクションがJavaScriptベースで非同期に描画されるため、
meta_box_cb や remove_meta_box() では、描画後のUIを制御できないことがあるのです。
そのため、力技にはなりますが、
Gutenbergでの確実な非表示は、JavaScriptでDOM操作するのが最も実用的な方法です。
解決策：JavaScriptのMutationObserverを使って非表示にする
以下のようなコードを functions.php または独自プラグインに追加することで、
Gutenbergの投稿編集画面で「タクソノミ2」というタクソノミーのパネルを確実に非表示にできます。
（下のコードの「タクソノミ2」という文字を任意の文字に変更してお使いください。）
//WordPressブロックエディタ（Gutenberg）の右側サイドバー内で、.components-panel__body-title 要素に「タクソノミ2」というテキストが含まれている場合に、その親要素 .components-panel__body を非表示にします。
add_action('admin_enqueue_scripts', function ($hook) {
if ($hook === 'post.php' || $hook === 'post-new.php') {
add_action('admin_footer', function () {
echo <<<EOD
<script>
(function(){
const observer = new MutationObserver(() => {
document.querySelectorAll('.components-panel__body-title').forEach(title => {
if (title.textContent.includes('タクソノミ2')) {
const panel = title.closest('.components-panel__body');
if (panel && !panel.dataset.hidden) {
panel.style.display = 'none';
panel.dataset.hidden = 'true';
}
}
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
</script>
EOD;
});
}
});ポイント
- GutenbergのUIは動的に構築されるので、初期描画ではDOMに存在しない可能性がある
- MutationObserver を使うことで、後から表示された要素にも対応可能
.components-panel__body-titleに「タクソノミ2」という文字列が含まれるパネルを検出して非表示にしている
⸻
このスクリプトは title.textContent.includes('任意の文字列') を条件にしているため、
「タグ」「カスタムフィールド」など、表示させたくないGutenbergパネルにも応用できます。
⸻
以上、Gutenberg投稿編集画面の特定パネルを非表示にする方法でした。
開発業務でカスタマイズが必要な際は、ぜひ活用してみてください！
