WordPressのテーブルブロックに独自デザインを追加する方法【備忘録】|Knowledge Base

公開日：2020(令和2)年11月8日／最終更新日： 2020(令和2)年11月8日

最初は「これから切り替わっていくんだから使わないと」と半ば義務的・強制的に使いはじめたブロックエディタ（Gutenberg）。慣れるまでは本当に「なんじゃこれ？」状態で、しかも私は旧エディタでもテキストエディタ派でしたので、とにかく何もコードを書かないのは気持ち悪い？感じでした。

が、使い慣れてくるとこれがなかなか、本当に便利で、最近では旧テキストエディタで公開した記事を念のため旧エディタの編集画面で開くと、逆に「なんじゃこれ？」になってしまいました（笑）。

ブロック（塊）でコンテンツを書いていくエディタとはいえ、別に全部を「段落」だの「見出し」だので作っていく必要はなく、「クラシックブロック」というのが旧ビジュアルエディタと同じなので、それを追加して作り、特殊なものだけ他のブロックを使うという書き方をしていけばよく、エディタが変わることに対してアレルギー症状が出ているだけだと思いますから、未だに旧エディタにわざわざ戻して執筆している方はぜひ切り替えてみていただきたいと思っています。

さて、たくさんあるブロックの中にあるのが「テーブル」ブロック。特に別のプラグインを使わなくても、テーブル要素のHTMLを知らなくても、簡単に本文内へテーブルが作成できるという便利なブロックです。

でも・・・テーブルブロックを追加すると、右サイドバーの設定画面で２種類のテーブルデザインが選択されるようになっている（下図）ものの、デザインちょっとアレで、私の知識不足が影響しているのか、CSSでゴニョゴニョやっても何となく思い通りにならなくて、ちょっと残念な気がしました。

WordPressのテーブルブロックに独自デザインを追加する方法【備忘録】|Knowledge Base

やっぱりテーブルはテーブル系のプラグイン使った方がいいの？？とあきらめかけたとき、ふと思いついたのが、テーブルのスタイルって追加できないの？ということ。

いろいろなカスタマイズができるWordPressなんだからきっと・・で根気よく調べたら、公式フォーラム内でスレッドが立ち、きちんと回答されていました。

今回はフォーラムの受け売りになってしまいますが、私と同じようにGutenbergのテーブルブロックのデザインを何とかしたいと思っている方の参考になればと思い、備忘録として公開しておきます。

Gutenbergのテーブルブロックにデザインパターンを追加する方法

まあ、前述したフォーラムに掲載されている方法そのものなので、特にここで紹介することもない！とも思いますが、なくなってしまうと困る（なくなることはない？）ので、コード含め方法を掲載しておきます。

テーマのfunctions.phpへ新しいパターンを登録する

パターンというのが正しいのかどうかは置いといて、上画面のように「デフォルト」「ストライプ」の選択ができるところに、「枠あり」という選択肢を追加します。

WordPressへ機能の変更を加えるときは大抵functions.php末尾へのコード追記が必要になります。今回も同様の措置を行いますので、スキルのない方、やったことのない方は避けた方がいいかもしれません。

追加するコードは以下になります

function my_enqueue_block_editor_assets() {
	$script = <<<SCRIPT
wp.blocks.registerBlockStyle('core/table', {
  name: 'border',
  label: '枠あり'
});
SCRIPT;
	wp_add_inline_script( 'wp-blocks', $script );
}
add_action( 'enqueue_block_editor_assets', 'my_enqueue_block_editor_assets' );

※本当にまんまでスミマセン

上記コードを追加して保存してから投稿などでテーブルブロックを追加すると、今まで２つだった選択肢が３つに増え、「枠あり」というのが追加されているのが確認できると思います

※別画面で投稿編集画面を開いた状態でfunctions.phpへ追記・保存した場合は、一旦投稿編集画面をリロードしないと変更が適用されませんのでご注意を！

そして、投稿編集画面の右サイドバーをスクロールしていき、「高度な設定」をクリックした中にある「追加cssクラス」という欄に、「is-style-border」というのが指定されていれば準備完了です。

そう、追加したコードはテーブルブロックに名前が「枠あり」で、cssクラスを「is-style-border」とする選択肢を追加してちょ！というものなのです（詳しくはご自身で調べてみてください）

「is-style-border」クラスにデザイン要素を追加する

上の作業で、選択肢は追加されました。でもこの状態では「is-style-border」というクラスに対するデザインの設定が何もされていませんので、テーマ標準のCSSやブラウザ特有のCSSが勝手に（自動で）割り当てられますから、思ったようなデザインには当然ながらなりません。

そこで、このクラスが付いたテーブル要素にデザインを割り当てていきます。これもフォーラムに枠線を追加するコードまでも紹介されているのでそのままテーマのcss末尾へ追記すればいいでしょう。

.wp-block-table.is-style-border {
	border-collapse: collapse;
}
.wp-block-table.is-style-border th,
.wp-block-table.is-style-border td {
	border: solid 1px lightgray;
}

※上記コードは線が入るまでを指定するものですので、ご自身で納得いくスタイルを設定してください

ちなみに私は外枠を太くしたかったのと、テーマのCSSの都合で各セルに隙間ができてしまったので以下のようにしました。

.wp-block-table.is-style-border {
	border-collapse: collapse;
}
.wp-block-table.is-style-border table {
    width: 100%;
    border: 3px solid #333;
    border-spacing: 0px;
}
.wp-block-table.is-style-border th,
.wp-block-table.is-style-border td {
	border: solid 1px #333;
}

このあたりはテーマのCSSとの兼ね合いや、ブラウザ特有のCSSなどとの兼ね合いになりますから、環境によって対応しないとダメですね（デザイン系の記事にあるコードをコピペしたけどうまくいかないと苦言を呈する方はこのあたりを勘違いされているものと思われます）。

さらにデザインパターンを追加したいときは

１つ成功すると、もっともっとパターンを追加したいという欲求が湧きますね。

そんなときは、functions.phpへ追記するコードの

独自関数名（my_enqueue_block_editor_assets）を別名にする
「name: ‘border’」の「border」を別名にする
「label: ‘枠あり’」の「枠あり」を別名にする

という処置と、CSSの「.is-style-border」を「name: ‘border’」の別名に変えたものを新たに追記する

という作業をすれば無限大にパターンを増やすことができます。

いかがでしたか？冒頭で説明した通り、今回の情報はWordPressの公式フォーラムに掲載されていることとほぼ同じ内容ではありますが、私と同じように、デフォルトで選択できるテーブルブロックのデザインに「うーーん」と首をかしげてしまった方、ぜひトライしてみてください。