ブロックエディター(Gutenberg)で特定のメタボックスや要素を非表示にする方法

WordPress関連記事

WordPressのユーザーエクスペリエンスをカスタマイズする際によく使われるのは、管理画面のメニューやメタボックスを非表示にする方法です。
こういったカスタマイズのアプローチには、大きく分けて以下の2つの方法が存在します。

  1. functions.php へのフィルターフックの追加
  2. プラグインの利用(例:「Adminimize」や「Admin Menu Editor」)

しかしながら、WordPressの新しいブロックエディター、通称「Gutenberg」では、上記の方法が常に期待通りに機能するわけではありません。
クラシックエディターには問題なく適用できるこれらの手法が、ブロックエディターでの利用においては、一部制限される場合が多々あります…

そこで、特にGutenbergでのカスタマイズに焦点を当てた、効果的な方法を紹介します!
それは、functions.php にカスタムCSSを追加し、特定のメタボックスや要素を非表示にする方法です。

以下は、この方法を使って、YARPPのメタボックスを非表示にする具体的な手順です。

目次

1. 開発ツールで非表示にしたい要素のCSSクラスやID名を調査する

Chromeなどの開発ツールで調べます。

Chromeの開発ツールで非表示にしたい要素のCSSクラスやID名を調査する

2. functions.phpにカスタムCSSを追加する

/**
 * ブロックエディター(Gutenberg)で特定のメタボックスや要素を非表示にする
 * (今回はYARPPのメタボックスを削除) 
 */
function custom_admin_styles() {
    echo '<style>
        /* 以下に非表示にしたい要素のCSSクラスやIDを指定 */
        #yarpp_relatedposts {
            display: none !important;
        }
    </style>';
}
add_action('admin_head', 'custom_admin_styles');

このコードをfunctions.phpに追加するだけで、YARPPのメタボックスはブロックエディター上から姿を消します。

最後に…
過度にカスタマイズしすぎると、メンテナンスの障壁となることがあります。
なので、常にそのバランスを意識するよう心掛けてくださいね!

WordPress関連記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次