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

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

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

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

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

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

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

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

WordPress5 テーブルブロックのメニュー

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

ヘッダー 1ヘッダー2
サンプル1サンプル2
サンプル3サンプル4
メニューで作るヘッダー

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

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

WordPress5 ブロックのメニュー

メニューの『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として編集』が『ビジュアル編集』に変わってるので、それをクリックすれば終了。

結果はこうなります。

ヘッダー 1ヘッダー2
サンプル1サンプル2
サンプル3サンプル4
メニューで作るヘッダー

テーブルブロックは、Gutenbergより前のWP4以前のテーブル編集よりできることが少ない。

以前は列のサイズをマウス操作でできたりもしたが、今はできなくなった。

実はテーブルブロックのHTML編集でもかなり制限があり、できるのはHTMLタグの変更くらい。

列ヘッダーも数少ないカスタム可能なもののひとつ。

前の投稿
WordPress5, Test jQuery Updates の使い方と注意点
WordPress5, テーブルのセルに画像を挿入する方法。プラグインは使いません。
次の投稿

WordPressの本

post-cta-image

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

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

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

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

コメントを残す