ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5, テーブルはカスタム制限が多い。style, class属性さえ使えない。

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPressはバージョン5になってから、テーブルのHTMLを編集してカスタマイズできることが少なくなってしまいました。

原因は、編集機能のメインであるGutenbergがブロック単位でコンテンツを作り、そのテーブルブロックが編集を大きく制限しているから。

HTML編集ではほとんどエラーになるテーブルブロック

今回、簡単なテーブルを使っていろいろカスタムしてみます。

テスト1テスト2テスト3
テスト4テスト5テスト6
テスト7テスト8テスト9

カスタムには、編集画面上部のメニューから『HTMLとして編集』を使ってHTMLを変更します。

WordPress5 ブロックのメニュー
編集するHTML
<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td>テスト1</td><td>テスト2</td><td>テスト3</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

HTMLタグのstyle属性を追加

HTMLのstyle属性を使ってセルの背景色を変えてみましょう。

変更HTML
<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td style="background-color:red;">テスト1</td><td>テスト2</td><td>テスト3</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

するとテーブルブロックが壊れたエラーが発生しました。

Gutenberg テーブルブロック エラー
テーブルブロックの破損

テーブルブロックでは、style属性は使えません。<td> 以外のタグでもやってみましたが全滅でした。

テスト1テスト2テスト3
テスト4テスト5テスト6
テスト7テスト8テスト9

というか、テーブルブロック以外でもできないらしい。

『style属性で直接CSSを書くなよ?』という仕様なんだと思います。

WP4以前は、セル幅や高さなどのサイズをマウス操作で変更できましたが、WP5からはできません。

内部でHTMLのstyle属性を使っていたから。

WP5では、テーブルの左寄せ・中央揃え・右寄せのどちらかを選ぶと、セル内は文字列長に合わせてサイズが自動的に変わるので、『これでいいじゃん』になってるもよう。

HTMLタグのclass属性を追加

HTMLタグのclass属性もstyle属性と同じようにテーブルブロックを壊します。ただ1点ちがうところは、<figure> だけは追加できる。

これは画面右側にあるブロックメニューの『高度な設定』『追加CSSクラス』でもできるから。

『HTMLとして編集』でできることはありません。

colspan属性を使ってセルを結合する

WP4以前には、エディターメニューにあったセルの結合をしてみましょう。

セル結合したHTML
<figure class="wp-block-table aligncenter">
  <table>
    <tbody>
      <tr><td colspan="3">テスト1</td></tr>
      <tr><td>テスト4</td><td>テスト5</td><td>テスト6</td></tr>
      <tr><td>テスト7</td><td>テスト8</td><td>テスト9</td></tr>
    </tbody>
  </table>
</figure>

これもテーブルブロックが壊れます。Gutenbergになったらテーブルの編集が退化したと言われる所以ですね?

これまで見てきたように、Gutenbergのブロックでは <figure>, <div>などのブロックの一番外の枠のHTMLタグのclass属性以外、属性は追加できません。

カスタムできるのはHTMLタグの変更とメニュー操作だけ

テーブルブロックが壊れない範囲でのカスタムできるのは、HTMLタグの変更だけです。

<td> を <th> に変えるとそのセルはヘッダーになります。

正直これだと、ヘッダーに変えるくらいしかできません。

WP5では、ブロックの編集は画面のメニュー以外できないようになってます。『HTMLとして編集』でできることは、メニューやブロックオプションでできることとほぼ同じ。

ここがWP5の特長。『HTMLとして編集』は用意されても、ブロックのカスタムは、メニューやブロックオプションでできること以外、できないようになってます。

ユーザー操作でエラーが出ないようにするという面では機能強化されていますが、カスタム好きにとっては不便です。

テーブルブロックはあまり進化していない

テーブルブロックはWP4以前よりもあまり進化していません。むしろ、セル幅の変更やセルの結合・分割ができなくなったので退化してると思う人もいるでしょう。

『カスタムHTMLブロックがあるんだから、テーブルブロックは基本的なもんでもいいっしょ?』ということなんでしょう。

また、高機能なテーブルを作成するプラグインもたくさんあります。たとえば TablePress なんかは日々更新されてますし、検索をかけると使い方もたくさん出てきます。

『プラグインがあるなら標準の高機能化は後回しで』と思ってるのかもしれません。

もちろんですが、プラグインなどで作る高機能テーブルはテーブルブロックではありません。カスタムHTMLを使ってるんじゃないかな?

もしくは、Gutenbergから独立した単なるHTMLなのかも。

ボクは、カスタムHTMLブロックを使う派なので良くは分かってませんが。

もうひとつ、WP4以前の編集機能(クラシック)が使えるものもあります。

設定はいろいろあって面倒ですが、クラシックを使う分には初期設定でいいです。

ただこれには弱点があって、ブロックへ変換するとやっぱりブロックは壊れます。リカバリするとエラーになる部分は消えてしまうので意味がありません。

(クラシックはテーブルブロックのHTMLにstyleやcolspanなどの属性をガンガン入れている。)

前の投稿
WordPress5, Test jQuery Updates の使い方と注意点
WordPress5, デフォルトのテーブルで列をヘッダーに変える方法。プラグインなしで。
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す