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

WordPressのテーブルをカスタマイズする方法は3つ。HTML編集するかプラグインを使う。

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

WordPressの編集で使うデフォルトのテーブルブロックは、カスタマイズがほぼできません。

ちょっと手の込んだことをするには他の方法が必要です。テーブルブロックのカスタマイズも含めて、3つの方法を紹介します。

難しくはありません。HTMLを編集するかプラグインを使うぐらいしかないので。

テーブルブロックでできるのはヘッダの追加だけ

テーブルブロックに限らず、WordPressの編集機能で使われるGutenbergではブロック単位でコンテンツを作ります。

文章を書いてるだけの段落も『段落ブロック』というブロックです。

すべてのブロックは、『HTMLとして編集』を使えばカスタマイズできるんですがエラーになることも多い。

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

HTMLのコーディングエラーなら直せばいいんですが、コーディングが正しくても各ブロックには制限があってその制限に引っかかってもエラーになるのが難点。

テーブルブロックでできることは列のヘッダを作成することくらいです。

セルの結合すらできないのが現状です。逆を言えば、そんなにカスタマイズが必要ない最低限のテーブルなら標準機能のテーブルブロックを使うのがベストです。

HTMLが分かるならカスタムHTMLブロックを使う

HTMLが書けるなら、テーブルブロックのHTMLをコピーして、カスタム HTMLブロックに貼り付けるのが手っ取り早いです。

テーブルブロックの既存のスタイル(CSS)も反映されます。

ただ、ブロック変換ではカスタム HTMLに変換できないのと、カスタム HTMLのプレビューではテーブルの枠線すら出ないほどショボいところが弱点。

プレビューにCSSスタイルを当てたらできるんじゃないか? とも思いましたが、プレビューはiframeでHTMLを挿入してるのでできないみたい。

カスタム HTMLブロックに書いたテーブルではセル内のテキストが表示されるだけ。

テーブルブロックのHTMLを書いても同じ。

そもそも、テーブルブロックのCSSがカスタム HTMLに反映されないところで気づくべきだった。

公開ページやページのプレビューではCSSスタイルは当てられるので問題ありません。

編集画面と表示される結果がちがうところが我慢できるのであれば、標準の編集機能だけを使ってるので安心です。

ただし、表示するページと編集ページの見た目が同じGutenbergの特長は無くなってしまいます。

かんたんにカスタマイズするならプラグインを使う

『HTMLとか覚えてらんないし、かんたんにしたい』という人は素直にプラグインを使います。

テーブルをカスタマイズするためのプラグインはたくさんあるので自分に合ったものを使いましょう。

今回は、有名で使ってる人が多いものを紹介します。

WP4以前の編集機能をWP5でも使う。

まずは、昔の編集機能を使うためのプラグインです。

WP4以前はGutenbergではなくTinyMCEというエディタを使っていました。そのTinyMCEをWP5以降でも使えるようにしたプラグイン。

クラシックブロックで以前の編集機能が使えます。

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

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

以前はTinyMCE Advancedというプラグイン名でしたが、Gutenbergの拡張プラグインとして進化してAdvanced Editor Toolsに変更されました。

クラシックを使わなくても入れといて損はないプラグインです。

もちろんですが、中身はテーブルブロックとは別物になります。

使い方情報がたくさんあるTablePressプラグイン

もうひとつはTablePressプラグインです。

プラグイン追加で検索かけたら最初に出てくるもので、アップデートも頻繁に行われています。検索サイトでも情報がたくさん出てくる。

もちろんですが、中身はブロックテーブルとは別物。

カスタム HTMLブロックを使ってるのかな? もしくはGutenbergから独立した単なるHTMLなのかも。

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

前の投稿
WordPress, Jetpackのコメント機能でエラー。原因は相性が悪いプラグインのせい。
WordPress, ショートコード内の処理でextract()を使うのは止めよう!
次の投稿

WordPressの本

post-cta-image

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

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

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

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

コメントを残す