WordPress5, デフォルトのテーブルで列をヘッダーに変える方法。プラグインなしで。

WordPressはバージョン5になってからGutenbergを編集画面のメインに使っているんですが、デフォルトのテーブルのカスタムがしずらくなりました。

でも、列をヘッダーに変えることはできます。今回はプラグインは使いません。標準機能だけで行います。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

テーブルブロックで作れるヘッダーは行（横）だけ

WordPressはバージョン5からgutenbergを編集機能のメインにしてから、コンテンツはブロック単位で作るようになりました。

テーブルもブロックの一つです。ただ、標準機能では行（横）のヘッダーはメニューにありますが、列（縦）はありません。

ヘッダーセクションをONにして内容を記入するとこうなります。

ヘッダー 1	ヘッダー2
サンプル1	サンプル2
サンプル3	サンプル4

メニューで作るヘッダー

HTMLの編集でHTMLタグを変える

列のヘッダーはHTMLの編集でできます。まずは、編集画面の上部にあるエディターメニューでテーブルブロックをHTMLで編集できるように変えましょう。

メニューの『HTMLとして編集』を選べばOK。

テーブルのHTML(見やすいように整形)

<figure class="wp-block-table aligncenter">
  <table>
    <thead><tr><th>ヘッダー 1</th><th>ヘッダー2</th></tr></thead>
    <tbody>
      <tr><td>サンプル1</td><td>サンプル2</td></tr>
      <tr><td>サンプル3</td><td>サンプル4</td></tr>
    </tbody>
  </table>
  <figcaption>メニューで作るヘッダー</figcaption>
</figure>

1列目（サンプル1とサンプル3）の<td> を <th> に変更します。

1列目をTHタグに変更

<figure class="wp-block-table aligncenter">
  <table>
    <thead><tr><th>ヘッダー 1</th><th>ヘッダー2</th></tr></thead>
    <tbody>
      <tr><th>サンプル1</th><td>サンプル2</td></tr>
      <tr><th>サンプル3</th><td>サンプル4</td></tr>
    </tbody>
  </table>
  <figcaption>メニューで作るヘッダー</figcaption>
</figure>

HTMLのままだと見づらいので元に戻します。

元に戻すには、さっきと同じエディターメニュー（画面上部）を開いてください。『HTMLとして編集』が『ビジュアル編集』に変わってるので、それをクリックすれば終了。

結果はこうなります。