Gutenbergで見出しレベル(H5・H6)を非表示にする方法【見出しブロック】
※本ブログの目的は個人の備忘録であり、コードは参考用として掲載しています。
実際に使用される際は、ご自身の環境で十分に動作確認を行ってください。
コードの利用によって生じたいかなる問題についても責任を負いかねますので、あらかじめご了承ください。
グーテンベルク(WordPress標準のエディター)で記事を書いていると、見出しブロックにはH1〜H6まで6段階のレベルが表示されます。
しかし実際の運用では、H5やH6まで使うことはほとんどありません。むしろ選択肢が多すぎると、編集者が誤って使ってしまうことがあります。
この記事では、H5とH6をエディター上から非表示にする方法を解説します。
Gutenbergの見出しレベルは、functions.phpにコードを追加するだけで簡単に制限できます。
なぜ見出しレベルを制限するのか
たとえば、こんな場面で役立ちます。
- 複数人でサイトを更新している場合に、表示ルールを統一したい
- H4までしか使わないデザインなのに、H5・H6が選べてしまう
- 記事の構成をシンプルに保ちたい
とにかく余計な選択肢を編集者に与えたくないときがありますよね。そういったときに便利です。
コードを追加する
非表示にするコードはこちらです。
functions.php に以下のコードを追加してください。
add_filter('register_block_type_args', function($args, $block_type) {
if ('core/heading' !== $block_type) {
return $args;
}
// H2, H3, H4 のみ表示(H1, H5, H6 を除外)
$args['attributes']['levelOptions']['default'] = [2, 3, 4];
return $args;
}, 10, 2);許可する見出しレベルを設定する
ここが今回の処理の核心です。
levelOptions という設定に、表示したい見出しレベルの数値を配列で指定しています。
[2, 3, 4] // H2・H3・H4だけを表示するちなみにH1を除いているのは、H1はページタイトルに使うものであり、記事本文では使わないのが一般的だからです。
JavaScriptファイルの用意も不要で、PHPだけで完結します。WordPress公式ドキュメントにも掲載されている方法なので、安心して使えます。
複数人でサイトを運営している方や、編集ルールを統一したい方はぜひ試してみてください。