WordPressのブロックエディタをカスタマイズする方法と高度なテクニック3選

2023.04.28
2023.04.28

みなさんこんにちは!エンジニアの高澤です!
今回はWordPressの投稿機能であるブロックエディタのカスタマイズ方法について解説したいと思います。

当記事ではブロックエディタの詳細と合わせて、カスタマイズについて下記の内容を詳しく解説していきたいと思います。

  • ブロックエディタのスペーサーに独自のスタイルを追加できる
  • ブロックエディタのカスタマイズ時の汎用的なノウハウが身に付く
  • ブロックエディタを自由にチューニングできる

専門用語やWordPressのフックなど難しそうな部分もでてきますが、難なく理解できるように補足を入れながら解説いたしますのでご安心ください!それでは、解説していきます。

ブロックエディタをカスタマイズする前の基礎知識

ブロックエディタとは

そもそもブロックエディタとは、WordPressのバージョン5.0から標準搭載されたエディタのことをいいます。別名グーテンベルグとも呼ばれています。
かなり直感的で、リッチな操作感のあるビジュアルエディタとなっています。

ブロックエディタでは独自の概念をもち、テキストや画像、動画、HTMLなどを「ブロック」と呼ばれる単位に分割して扱うのが特徴です。
すでにお伝えしましたが、かなり直感的な操作を提供してくれて、プログラムの知識がない方でもほぼほぼ自由に本文のコンテンツをレイアウトできます。

当記事では、このブロックエディタのカスタマイズ方法について解説していきたいと思います。

ブロックエディタをカスタマイズするメリット

ブロックエディタをカスタマイズすることで下記のようなメリットがあります。

  • 執筆・投稿作業の効率化
  • お客様への提案や要望に応えられる範囲が増える
  • エディタ機能の拡張性、自由度が上がる

ブロックエディタをカスタマイズしてみよう

それではここからカスタマイズの方法を解説いたします。

何をカスタマイズするのか?

まずは改めて当記事で学べることを事前にご説明させていただきます。
当記事では下記のことが学べるような構成になっております。

  • ブロックエディタのスペーサーに独自のスタイルを追加できる
  • ブロックエディタのカスタマイズ時の汎用的なノウハウが身に付く
  • ブロックエディタを自由にチューニングできる

カスタマイズの内容としては、上記にある「ブロックエディタのスペーサーに独自のスタイルを追加できる」の部分になってくるのですが、具体的にはどのような内容かというと、ブロックエディタ上で設定した文章テキストや見出しテキストのレイアウトやデザインを、事前にスタイル機能としてテンプレートを作っておき、それを管理画面右サイドバーのスペーサーからいつでもクリックするだけで使い回しすることができる、という内容です。

上記のように、画面右のスペーサーに「スタイル」という項目が追加され、新規追加されたボタンをクリックすればご自身のCSSで記述した独自のスタイルを反映させることができます。この例では、反応がわかりやすいようにCSSで段落や見出しの背景色や文字色をCSSで記述しておき、反映させた状態です。

それでは、カスタマイズ方法を解説していきます。

ここからはファイルを作成したり編集したりするため、FTPを利用します。
もしFTPがわからない方は下記の記事でFTPの使い方を説明しているため、事前にご確認下さい。

ブロックエディタカスタマイズ用のフォルダを作成

まず初めにテーマファイルの任意の場所にブロックエディタのカスタマイズ用のフォルダを作成します。
当記事ではテーマファイルのルートディレクトリに配置しておきたいと思います。

今回は「block_editor_assets」というフォルダ名にします。

今回のポイント

テーマファイルとは?

テーマファイルと聞いてピンと来ない方がいらっしゃるかもしれません。
そのためここでご説明いたします。

テーマファイルとは、サイト上の見た目や機能を提供してくれるPHPファイルやJavaScript、CSS、画像等が1つのファイル(テーマファイル)にまとまったファイルのことをいいます。

FTPかもしくは「File Manager」プラグイン等のFTP機能が管理画面から利用できるプラグインなどを利用してテーマファイルやCSSファイルなどを作成できますので、ご確認いただけましたら幸いです。

テーマファイルのとはテーマファイルの場所

FTPでサイトのWordPress本体ファイルをご確認していただき、下記の順でたどっていただけますとテーマファイルにたどり着きます。

/WP本体ファイル/wp-content/themes/テーマファイル名/

※サーバーによって多少構造に違いがあるため、ご参考までにご確認ください。

CSSとJavaScriptファイルを作成

作成したblock_editor_assetsフォルダの中に、CSSファイルとJavaScriptファイルを作成し配置します。
この後、このCSSファイルとJavaScriptファイルにブロックエディタ管理画面用のコードを記述し、スペーサーに独自スタイルを追加する実装を行います。

今回はCSSファイルを「block-editor-style.css」、JavaScriptファイルは「block-editor-style.js」というファイル名で作成します。

作成したCSSとJavaScriptを読み込むための実装(functions.php)

ここではCSSファイルとJavaScriptファイルを読み込むためのコードをfunctions.phpに記述します。

enqueue_block_editor_assetsフックで読み込み用のコードを反映させる

まずは下記のコードをfunctions.phpの任意の場所にコピー&ペーストして下さい。

functions.phpの場所はテーマファイルのルートディレクトリを想定しております。
テーマによってfunctions.phpが無い場合もあるため、もしなければ新規で「functions.php」というPHPファイルで作成して下さい。

enqueue_block_editor_assetsとは

add_action()関数に引数としてenqueue_block_editor_assetsがフックされておりますが、enqueue_block_editor_assetsとは、ブロックエディタの管理画面に独自のCSSやJavaScriptを反映させるためのアクションフックです。

このフックを利用することで、ブロックエディタ内で動作する独自のブロック機能やプラグインの機能を追加することができます。

今回の例では、wp_enqueue_style()関数wp_enqueue_script()関数を利用して「block-editor-style」というCSSファイルと「block-editor-script」というJavaScriptファイルを登録しています。この登録したファイルはブロックエディタ内で使用されます。

CSSとJavaScriptファイルにスタイル追加のためのコードを記述

ここからは先ほど作成した「block-editor-style.css」と「block-editor-style.js」に独自スタイルの実装のためのコードを追記していきたいと思います。

作成したJSファイル「block-editor-style.js」に追加するコードの内容

まずは「block-editor-style.js」に独自スタイルの実装のためのJavaScriptコードを追記して下さい。

wp.blocks.registerBlockStyle()関数wp.domReady()関数を使用します。

上記のJavaScriptコードは、「見出しタイトル」と「段落」の独自スタイルを新規追加しています。
JavaScriptのwp.blocks.registerBlockStyle()関数の第1引数には「ブロック名」を指定し、第2引数にはオブジェクトを指定しています。

今回のポイント

wp.blocks.registerBlockStyle()関数の「name」の値とCSSとの関係

wp.blocks.registerBlockStyle()関数の「name」の値の半角英数字にプラスして、その先頭に「is-style-」が付いたものブロックエディタ管理画面とサイト上のクラス名として自動設定されます。

例えば、上記関数でnameの値が「sample-heading」だった場合、「is-style-sample-heading」というクラス名が設定されます。

CSSファイルではこれをセレクタとして利用して、スタイルを反映させています。

作成したCSSファイル「block-editor-style.css」に追加するコードの内容

次に「block-editor-style.css」に下記のCSSを追記して下さい。

ブロック名とは

ブロック名とは、ブロックエディタ内にある各種のブロックを識別するための名前です。
またブロックとは、見出しテキスト、文章テキスト、画像、リスト、動画、カスタムHTMLなど、WordPressで利用可能な様々なコンテンツのことをいいます。

これらのブロックは、例えば見出しテキストは「core/heading」、文章テキストは「core/paragraph」、画像は「core/image」となります。

このブロック名を指定することで、特定のブロックをカスタマイズできます。

全てのブロック名の確認方法

作業している中で、全てのブロック名を把握したい場合があります。
確認する方法はChromeのブラウザのデベロッパーツールを使用します。

まずブラウザ右上にある「設定アイコン」をクリックします。

「その他のツール」の「デベロッパーツール」を選択します。

デベロッパーツールを開いたら、下記画像の「>>」をクリックし、「Console」を選択します。

選択後、右下にコンソールエディタが開きますので、「wp.blocks.getBlockTypes()」と入力します。

すると、配列の中身が表示され、「{name: ‘core/paragraph’, icon:…}」が確認できるかと思います。この「’core/paragraph’」の部分がブロック名となり、下につづけてずらっと表示されているかと思いますので、それがブロック名一覧になります。

以上がブロック名を確認する方法です。

ブロックエディタの実装状態を確認

ここまでで、ブロックエディタのスペーサーから簡単に独自のスタイルを選択できるようになっているかと思います。
試しに、段落か見出しテキストをエディタに入力し、クリックした上で右サイドバーのスペーサーを確認してみてください。
「スタイル」項目が追加され、ボタンをクリックすると見た目が変わる挙動が確認できるかと思います。

サイトのページ上(フロントエンド)に同じスタイルを反映させる方法

最後に、サイトのページにエディタで編集した内容を反映させて表示させる方法を解説します。

その方法はシンプルにテーマのレイアウトで使用しているCSSファイルに下記のCSSを記述するだけです。

お気付きかもしれませんが、先ほど「block-editor-style.css」ファイルにコピー&ペーストしたCSSの記述と全く同じです。
下記が反映結果となります。

以上がブロックエディタをカスタマイズして、サイト上に反映させるまでの内容になります。
ここまでお疲れ様でした。もしうまくいかなかった方は最初からまた読み直してみて下さい。

PHPからサイト上とブロックエディタ管理画面の両方にスタイルを反映させる方法

先ほどの解説では、ブロックエディタ用のCSSファイルとサイト表示用のCSSファイルに2つに分離して実装しておりました。ですが、ここで解説する方法では分離していたCSSファイルを1つにすることができます。

結論enqueue_block_assetsフックを利用して、CSSファイルJavaScriptファイルの両方を処理させます。

PHPのみでスペーサーをカスタマイズする方法

ここではこれまで解説してきたCSSファイルとJavaScriptファイルを作成してカスタマイズする方法を解説しましたが、PHPからスペーサーをカスタマイズする方法を解説いたします。

結論、PHPのregister_block_style()関数を利用します。

まずは下記のコードをfunctions.phpにコピー&ペーストして下さい。

ペーストした後、ブロックエディタ管理画面の右のスペーサーをご確認いただきますと、「スタイル」部分に新たなスタイル変更ボタンが追加されているのが確認できるかと思います。

段落のテキストを選択した上でボタンをクリックしたときに青色の背景に切り替わります。

CSSとJavaScriptで実装する方法と、PHPで実装する方法のどちらの方法で実装するかは状況によって変わってくるかと思いますので、ベストな方を採用していただければと思います。

ブロックエディタをチューニングするテクニック

最後にブロックエディタをより使いやすくするためのテクニックをご紹介します。

特定の投稿タイプのブロックエディタをキャンセルする方法

特定の投稿タイプのブロックエディタをキャンセルし、クラシックエディタにしてくれる記述が下記になります。下記コードをfunctions.phpにコピー&ペーストして下さい。

use_block_editor_for_post_typeフックを利用し、if文で「’post’ === $post_type」と指定することで「投稿」投稿タイプ(「post」)のエディタをデフォルトのブロックエディタからクラシックエディタに変更しております。

もし他の投稿タイプ(固定ページやカスタム投稿タイプ)のエディタをクラシックエディタにしたければ、if文の「’post’ === $post_type」の「’post’」の部分を、固定ページなら「page」、カスタム投稿タイプならそのカスタム投稿タイプ名を指定して記述してください。

ちなみに補足ですが、WordPressには現在ブロックエディタとクラシックエディタの両方が実装されておりまして、ただ単純にブロックエディタをOFFにしているだけですので、難しい処理はしておりません。

また、こちらのコードを利用すれば「Classic Editor」プラグインは必要ありません

特定のブロックのみを表示させる方法

ブロックエディタの選択項目として多くのブロックがあるかと思います。
ただ、たくさんありすぎても選択したいブロックを探すのが大変で時間がかかったりして使いずらい場合が考えられます。そんなときに使えるのが下記のコードです。

具体的には、allowed_block_typesフックを利用して、配列の中のブロック名を指定したものだけが選択肢として表示されるように実装できます。

このように、必要なブロックのみ表示させることができます。

ここまでのテクニックが使いこなせるとよりブロックエディタを自由に使いこなせるのではないかと思います。参考になりましたら幸いです。

まとめ

以上がWordPressのブロックエディタを高度にカスタマイズする方法の解説になります。
カスタマイズだけではなく、カスタマイズに必要なノウハウや基礎知識も合わせて解説させていただきました。
ここまで読んでいただいたあなたは、もうブロックエディタをカスタマイズできるようになっているはずです。

今回の技術を学んでいただければ仕事でお客さんから要望があった時や、ご自身が記事の執筆の際にレイアウトを効率化することができ、良いことがたくさんあります。
なので、ぜひ当記事を繰り返しご活用していただきお役に立てていただけましたら嬉しいです!

2023.04.28
WordPress開発・運用チーム

WordPressを使ったWebサイト制作を得意とする株式会社セルリアのWeb制作チーム。ご要望に合わせ、長く利用頂きやすいホームページをご一緒に制作いたします。集客、Webマーケティングについても貴社のご要望に合わせた形でご提案いたします。また、高度なカスタマイズ、プラグイン開発にも対応可能です。お問い合わせフォームよりお気軽にご相談ください。

こちらの記事を読んだ方におすすめ