Gutenbergの投稿画面をカスタマイズするまとめ
Gutenbergエディターを無効にする設定や、Gutenbergをより便利に使うプラグインやカスタマイズの覚書です。
ワードプレスのエディターが「wysiwygエディター」から「Gutenberg（グーテンベルグ）」となりました。
ブロックエディターと呼ばれるタイプで、MovableTypeで一足先に導入されていたエディターになります。
従来のwysiwygエディターはWordに近いテキスト重視のエディターでしたが、ブロックエディターはレイアウトやデザイン機能が豊富になっているのが特徴です。
ウェブサイト全体をデザインできる「フルサイト編集（Full Site Editing）」を目的としたエディターになります。
Gutenbergに関する最新の情報は「Gutenberg News」でチェックできます。
wysiwygエディター同様に、Gutenbergも投稿画面をカスタマイズすることが可能です。
それではクライアントが使いやすいようにカスタマイズしていきましょう。
GutenbergをOFFにする
GutenbergをOFFにすることで、従来のwysiwygエディターにすることができます。
functions.php
add_filter( 'block_editor_for_post', '__return_false' );Gutenbergのスタイルシートも不要のため、スタイルシートの読み込みを削除します。
functions.php
function remove_gutenberg_style() {wp_dequeue_style( 'wp-block-library' );}add_action( 'wp_enqueue_scripts', 'remove_gutenberg_style' );ブログ記事が文字と画像が殆どの場合はGutenbergは機能が多すぎるため、従来のwysiwygエディターにするのもアリだと思います。
固定ページ以外のGutenbergを無効にする
ブロックエディターをOFFにする関数「disable block editor」を使って、固定ページ以外をOFFにします。
- 投稿、カスタム投稿など、固定ページ以外はGutenbergがOFF
- 固定ページはGutenbergがON
functions.php
function disable_block_editor( $use_block_editor, $post_type ) {if ( $post_type !== 'page' ) return false;return $use_block_editor;}add_filter( 'use_block_editor_for_post_type', 'disable_block_editor', 10, 2 );「$post_type !== 'page'」の箇所を「$post_type === 'page'」にすることで、「固定ページ」のみGutenbergをOFFにします。
投稿とカスタム投稿タイプのエディターでGutenbergをOFFにする
カスタム投稿タイプが「book」の場合、投稿とカスタム投稿タイプでGutenbergをOFFにするには下記になります。
functions.php
function disable_block_editor( $use_block_editor, $post_type ) {if ($post_type == 'post' && $post_type == 'book') return false;return $use_block_editor;}add_filter( 'use_block_editor_for_post_type', 'disable_block_editor', 10, 2 );カスタムタクソノミーが表示されるようにする
Gutenbergにすると、エディターからカスタムタクソノミーが表示されない場合があります。エディターのメニューにカスタムタクソノミーを表示させます。
カスタムタクソノミーのデータをREST APIから取得すると表示されます。
「'show_in_rest' => true,」をカスタムタクソノミーの設定に追記します。
functions.php
register_taxonomy( ’tax_name’, 'post',array ( 中略 'show_in_rest' => true, ));下記の方法でもOKです。
functions.php
function tax_api() { $mytax = get_taxonomy( 'タクソノミー名' ); $mytax->show_in_rest = true; }add_action( 'init', 'tax_api', 30 );以上でGutenbergを利用する下準備が整いましたので、次はGutenbergのカスタマイズに進みます。
Gutenbergをカスタマイズする方法
カスタマイズのゴールとして、不要な機能を削除して、オリジナルのパターンを作成します。
また、Gutenbergのカスタマイズには「theme.json」と「functions.php」を利用します。
theme.jsonとは？
テーマやブロックエディターの機能をtheme.jsonファイルで管理、カスタマイズすることができるようになります。
Gutenbergのブロックが便利になるプラグイン
Gutenbergの特徴である「ブロック」がより便利に使えるプラグインがリリースされています。
Block Lab
オリジナルのブロックをメニューに追加することができます。
Advanced Gutenberg
アコーディオンや写真付きの引用など、さまざまなブロックが用意されています。
Atomic Blocks
こちらも複数のブロックが用意されています。
拡張性がよさそうなのでGutenbergに慣れるといままでのエディター以上のレイアウトも簡単にできそうですね。
