【徹底解説】WordPress ブロックエディタで独自の表(テーブル)を作る方法

こんにちは、わいつー(@yyblog_asuyaru)です。

実は、ブロックエディタで表を作る場合、簡単な表しか作れません。

なぜなら、ブロックエディタでは表のテンプレートが「デフォルト」と「ストライプ」しかないからです。

そこでこの記事では、以下のことを紹介します。

この記事を読むとこんなメリットがあります。

この記事の結論は以下のとおりです。

この記事で作成する表(テーブル)

この記事では、ブロックエディタで表(テーブル)のスタイルに独自のスタイルを追加し、

こんな表を作れるようにします。

以下の知識があると、この記事をより理解できます。

独自の表(テーブル)を作成する方法

独自の表(テーブル)を作成するには3つのステップがあります。

独自の表(テーブル)を作成する方法を紹介した後は、記述したコードの詳細解説もします。

コードはコピーできるようにしていますので、「コードの意味は知らなくてもいい」という方は、

作成方法だけチェックして、自分の環境でチャレンジしてみてください。

WordPressにPHPのコードを入力する

WordPress管理画面から「外観」→「テーマエディタ」に進みます。

「テーマのための関数(functions.php)」を選択します。

ここのテキストエリアに以下のコードを入力します。

function sample_assets() {
	$script = <<<SCRIPT
wp.blocks.registerBlockStyle('core/table', {
  name: 'sample',
  label: 'サンプルテーブル'
});
SCRIPT;
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'sample_assets' );

「ファイルを更新」ボタンをクリックします。

記事作成画面でテーブルを選択すると、スタイルに「サンプルテーブル」が追加されています。

「高度な設定」→「追加CSSクラス」を見ると、「is-style-sample」が入力されていることを確認します。

このままだと「デフォルト」と同じレイアウトなので、次はCSSで独自のレイアウトにします。

WordPressにCSSのコードを入力する

続いて、CSSのコードを入力します。

WordPress管理画面から「外観」→「テーマエディター」に進みます。

「スタイルシート(style.css)」を選択します。

ここのテキストエリアに以下のコードを入力します。

.wp-block-table.is-style-sample table {
	width: 100%;
}
.wp-block-table.is-style-sample th {
	width: 180px;
	background: #FFAD90;
}
.wp-block-table.is-style-sample td {
	background: #FFFFFF;
	word-break: break-word;
}

「ファイルを更新」ボタンをクリックします。

これでCSSの編集は終了です。

HTMLコードの編集

テーブルのスタイルから「サンプルテーブル」を選択すると、以下の表が表示されます。

「表の設定」から「ヘッダーセクション」を有効にしても、以下のレイアウトになります。

「ヘッダーセクション」を有効にしても、必ず上部がヘッダーになります。

左側にヘッダーを持ってくるには、HTMLを直接編集します。

次に表(テーブル)を選択し「・・・」→「HTMLとして編集」を選択します。

すると表がHTML形式で表示されます。

以下のようにHTMLを直接編集します。

<figure class="wp-block-table is-style-sample"><table><tbody><tr><th></th><td></td></tr><tr><th></th><td></td></tr></tbody></table></figure>

表を選択し「・・・」→「ビジュアル編集」を選択すると、表形式で表示されます。

一番左がヘッダーになっていることを確認します。

コード解説

ここからはPHPとCSSのコード解説をします。

これが理解できると、応用して他のブロックも独自に作成できるようになります。

PHPコード解説

function sample_assets() {
	$script = <<<SCRIPT
wp.blocks.registerBlockStyle('core/table', {
  name: 'sample',
  label: 'サンプルテーブル'
});
SCRIPT;
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'sample_assets' );

まずはざっくり、2つの処理に分けられます。

「sample_assets()」関数と「add_action()」関数です。

add_action()

add_action( 'enqueue_block_editor_assets', 'sample_assets' );

add_action()関数は、WordPressに標準で準備されている関数で、関数を特定のアクションにフック(別の処理を追加)します。

今回の場合だと、「enqueue_block_editor_assets」という処理に「sample_assets」の処理を追加します。

「enqueue_block_editor_assets」はブロックエディタを読み込む処理を表します。

つまりこのコードの意味は、

となります。

では「sample_assets」関数はどんな処理をしているのでしょうか？

wp.blocks.registerBlockStyle()

wp.blocks.registerBlockStyle('core/table', {
  name: 'sample',
  label: 'サンプルテーブル'
});

wp.blocks.registerBlockStyle()関数は、標準のブロックにスタイルを追加する関数です。

1つ目の引数は、「どのブロックタイプ(スタイル)にするか？」を指定します。

今回はテーブルなので「core/table」を指定しました。

2つ目の引数は「ブロックタイプの名前」です。

nameはCSSで利用するための名前で、labelはブロックスタイルを選ぶときに表示される名前です。

<<<SCRIPT　～～　SCRIPT;

$script = <<<SCRIPT
～～
SCRIPT;

「<<<SCRIPT　から　SCRIPT;」までを1つの文字列とみなしています。

このように複数行の文字列を1つの文字列とみなすことを「ヒアドキュメント」といいます。

「SCRIPT」の部分は何の文字でも構いません。

今回の場合だと、

という意味になります。

wp_add_inline_script()

wp_add_inline_script( 'wp-blocks', $script );

wp_add_inline_script()関数は、WordPressに標準で準備されている関数で、登録されたスクリプトにコードを追加します。

1つ目の引数は、既に登録してあるスクリプトです。

今回はブロックの作成をするスクリプト「wp-blocks」を指定しています。

2つ目の引数は、追加するスクリプトです。

今回はscript変数を指定していますので、実際はregisterBlockStyle()関数を追加することになります。

つまりこのwp_add_inline_script()関数は

という意味になります。

wp-blocks以外にどんなスクリプトがあるか知りたい方はBlock Editor Handbookを参照してください。

PHPコード解説のまとめ

ここまでのPHPコード解説をまとめると、

となります。

ブロックスタイルを変更すれば、見出しやボタンなどの別ブロックも独自のものが作成できます。

CSSコード解説

.wp-block-table.is-style-sample table {
	width: 100%;
}
.wp-block-table.is-style-sample th {
	width: 180px;
	background: #FFAD90;
}
.wp-block-table.is-style-sample td {
	background: #FFFFFF;
	word-break: break-word;
}

CSSコードで注目する点は「is-style-sample」です。

独自に作成した表の「追加CSS」に「is-style-sample」が入っていたことを覚えていますか？

この2つは必ず同じ文字列にする必要があります。

また、「sample」の部分は、PHPコードにあるregisterBlockStyle()関数の「name」に書いた単語と同じ単語が入ります。

.wp-block-table.is-style-sample

「wp-block-table」クラスと「is-style-sample」クラスを意味します。

HTMLでこの2つのクラスを指定している個所があれば、2つのクラスによって定義されたレイアウトが適用されます。

「.wp-block-table.is-style-sample table {～～}」と書いた場合、ここで指定されたレイアウトは、「wp-block-table」クラスと「is-style-sample」クラスが指定されたタグ内にある「table」タグに適用されます。

同じ考え方で、thタグ、tdタグのレイアウトを定義しています。

CSSコード解説のまとめ

ここまでのCSSコード解説をまとめると、

となります。

今回はテーブルの幅や背景色くらいしか指定していませんが、線の太さや種類、色などもCSSで指定することができます。

「ブロックエディタで独自の表(テーブル)を作る方法」のまとめ

聞きなれない関数が多く、少し内容が難しかったかもしれません。

ですがこの記事の内容を理解できれば、いろいろなカスタマイズができるようになります！

ぜひ自分の納得いくレイアウトを完成させてみてください♪

ここまで見ていただき、ありがとうございました。