WordPressのブログ記事に綺麗な表を入れたくて悪戦苦闘しました。ネット記事やYoutubeなどで先人の方々の情報を仕入れてまとめました。
目次
WordPressの機能を使って表を作成する
Excelの機能を使って表を作成する
TablePressプラグインを使う
WordPressの機能を使って表を作成する
WordPressに設定しているテーマにもよりますが、作成中の記事のなかで挿入したい場所にブロックを追加し、主要なブロックの選択画面が出てきたら「すべてを表示」を押すと、左側に全てのブロックの選択画面がでてきます。ここで「テーブル」を探してクリックします。
本文ブロックの下に表示される「＋」の「ブロックを追加」から「すべてを表示」を押す
左に表示されるブロックのリストのなかから「テーブル」を選択
カラム数（列数）と行数を入力する画面が表示されるので、所望の数字を入力して「表を作成」を押すと、表が挿入されます。
入力したいセルに文字を入力します。セルを選択すると上部に表示されるメニューのなかから、表の編集の部分を押すと、メニューが現れます。ここで行・列の挿入・削除を行うことができます。
Excelの機能を使って表を作成する
これは文字のどおり、そのままです。
まずExcelで表を作成します。表の範囲を選択してコピーをし、WordPress上の記事の貼り付けたい箇所を選択して、ペーストをおこないます。
TablePressプラグインを使う
「TablePress」というプラグインを使用する方法です。
行または列の順番を変えたり、セルの結合を行ったりすることが簡単にできます。
インストール
ます、プラグインをインストールします。WordPress管理画面の左メニューからプラグイン＞＞新規プラグインを選択し、右上の検索ウィンドウに「TablePress」を打ち込んで、表示された候補の中からTablePressをインストールします。インストールしたらすぐに「有効化」します。
表の作成
TablePressでは、作成中の記事に直接入力するのではなく、TablePressの管理画面のほうで表を作成・保存し、貼り付けたい記事の箇所に表のIDを含む命令を挿入します。
管理画面左メニューに「TablePress」が追加されているのでクリックすると表の作成・管理の画面が現れます。新規追加タブでテーブル名や行数・列数を指定し、「テーブルを追加」します。
表の作成画面が表示されるので、「テーブルの内容」に各セルの内容を記入していきます。また、下の「テーブルの操作」を利用して、行・列の挿入・削除ができます。さらに、行や列を選択した状態でドラッグすることにより、行または列を入れ替えることができます。
また、下のJavaScriptライブラリの設定において、テーブルの並べ替え、フィルタ、一度に表示する行数、表のスクロールなどを設定することができます。
作成が終わったら、一番下または上にある「変更を保存」を押して、表を保存させます。保存すると、管理画面メニューのTablePress>>すべてのテーブル の画面にて保存した表の一覧が表示されます。
記事への表の貼り付け
すべてのテーブルの一覧の中から、貼り付けしたい表の「テーブルの名前」を選んでクリックします。表を作成したときの画面が再び現れるので、その上部にあるショートコードをコピーします。
下の例では
の部分になります。
次に貼り付けしたい記事の箇所にブロックを挿入し、先ほどコピーしたショートコードを貼り付けします。
これで実際の画面をみると、表が挿入された状態になっています。
表の列幅の指定
表の列幅を変えたいときは、下のように各列幅を%またはpx単位で追記します。
table id=〇 column_widths=”〇〇%|〇〇%|〇〇%”
table id=〇 column_widths=”〇〇px|〇〇px|〇〇px”
