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

【徹底解説】WordPress ブロックエディタで独自の表(テーブル)を作る方法
  • ブロックエディタでは簡単な表しか作れないの?
  • ブロックエディタでもっとカスタマイズした表を作りたい

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

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

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

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

この記事の内容

  • ブロックエディタで独自の表を作る方法
  • 独自の表を作るためのプログラムを徹底解説

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

  • ブロックエディタで自由に表が作ることができる
  • 表以外にもカスタマイズする応用力が身につく

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

この記事の結論

  • ブロックエディタで独自の表を作るためには、PHPとCSSのコードをWordpressに入力する
  • コードの意味を理解すれば、応用して他のブロックも独自のものが作れる

「プログラミングやWordPressについてもっと深く勉強したい!」

という方は、TechAcademy [テックアカデミー]のオンラインプログラミングスクールがオススメ!

講師は経験豊富な現役エンジニアのため、スキルアップのスピードは独学に比べて格段に早いです!

気になる方は、まずは無料体験に申し込んでみてはいかがでしょうか?

無料体験の申し込みから1週間、TechAcademyの学習システムを無料で体験することができます。

>> TechAcademyの無料体験に申し込む

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

この記事は以下の環境で解説しています

環境の違いによりこの記事とは操作方法が異なる場合がありますので注意してください。

  • レンタルサーバ:Conoha WING
  • WordPressのバージョン:5.7.2
  • テーマ:Cocoon
  • テーマのバージョン:2.3.2.1
  • PHPのバージョン:7.3.26

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

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

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

  • プログラム言語の「変数」や「関数」の考え方
  • 簡単なHTMLとCSSの知識(調べて理解できる)

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

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

  1. WordPressにPHPのコードを入力する
  2. WordPressにCSSのコードを入力する
  3. HTMLコードを編集する

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

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

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

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' );

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

エラーが出る場合はセキュリティプラグインを確認してみよう

「ファイルを更新」ボタンをクリックした時にエラーが出る可能性があります。

原因はセキュリティプラグイン「SiteGuard WP Plugin」 が影響している可能性があります。

「SiteGuard WP Plugin」の「管理ページアクセス制限」を「OFF」にしみてください。

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

わいつー
わいつー

「info」は私が普段使っているテーブルです。この記事では無視してください。

高度な設定」→「追加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;
}

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

エラーが出る場合はレンタルサーバのWAF機能を確認してみよう

「ファイルを更新」ボタンをクリックした時にエラーが出る可能性があります。

原因はレンタルサーバのWAF機能が影響している可能性があります。

設定方法がわからない方は以下の記事を参考にしてください。

403 Forbidden?サイトと通信できない?WordPressのエラー対処法と関連エラーまとめ

これで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>

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

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

再利用ブロックを使って操作の手間を減らそう

いちいちHTMLを変えるのがめんどくさい!

そういう方は、よく使う表を「再利用ブロック」に登録しておきましょう。

「再利用ブロック」を使えば、よく使う表をいろんな記事で使いまわすことができます。

再利用ブロックの詳細は以下の記事で紹介しています。

【WordPress】ブロックエディタでテンプレートを実装する方法を解説

コード解説

ここからは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()」関数です。

「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」はブロックエディタを読み込む処理を表します。

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

「enqueue_block_editor_assets」でブロックエディタを読み込むときに「sample_assets」関数の処理も読み込む

となります。

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

wp.blocks.registerBlockStyle()

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

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

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

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

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

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

各ブロックスタイルの名前について

  • 段落:’core/paragraph’
  • 見出し:’core/heading’
  • 引用:’core/quote’
  • リスト:’core/list’
  • テーブル:’core/table’
  • ボタン:’core/button’
  • カラム:’core/columns’

各ブロックスタイルの名前は以下で定義されています。(ConoHa WINGの場合)

Conoha WING管理画面→「サイト管理」→「ファイルマネージャー」を選択します。

「xxx@localhost」→「public_html」→「サイト名」→「wp-includes」→「blocks」の順に移動すると、各ブロックスタイルごとのフォルダがあります。

その中に「block.json」ファイルがあります。

それをダウンロードして中身を見ると、「”name”」のところに書いてあります。

WordPressの公式HPにブロックスタイルの名前一覧を見つけきることができませんでした。

<<<SCRIPT ~~ SCRIPT;

$script = <<<SCRIPT
~~
SCRIPT;

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

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

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

今回の場合だと、

script変数にregisterBlockStyle()関数を文字列として代入する

という意味になります。

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スクリプトにregisterBlockStyle()関数の処理を追加する

という意味になります。

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コード解説をまとめると、

PHPコードで作成したブロックスタイルのCSSは「.wp-block-table.is-style-●●」で指定できる

となります。

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

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

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

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

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

もっとプログラミングを勉強していろんなカスタマイズがしたい!

WordPressに詳しくなって魅力的なページが作りたい!

という方は、TechAcademy [テックアカデミー]のオンラインプログラミングスクールで勉強してみてはいかがでしょうか?

  • オンラインプログラミングスクール 受講者数No.1
  • 講師は経験豊富な現役エンジニアのため実績は抜群!
  • 挫折しないためのメンタルサポート
  • 豊富なコースの種類

など、TechAcademyには抜群のサポート体制が整っています!

この記事でも使った「WordPress」や「PHP」のコースもあります。

実際、どんな内容の講義なのか知りたい

いきなり受講料金を払うのは不安!

という方は、まずは無料体験をしてみてください。

無料体験の申し込みから1週間、TechAcademyの学習システムを無料で体験することができます!

短期間でスキルアップしよう!

TechAcademyの無料体験を申し込む

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA