PINTO!株式会社PLAN-Bの情報発信メディア

2020.03.19

五十嵐 和希

WEB CREATION

WordPressに表を挿入する方法。プラグインで初心者でも簡単に作成

WRITER

五十嵐 和希

株式会社PLAN-B システム開発本部 PDMチーム

大手広告主企業での広告宣伝部、総合広告代理店でのプロモーション部を経験し、PLAN-Bへ入社。
企業のオウンドメディア立ち上げ支援や自社開発DMP「Juicer」のマーケティング責任者を担う。
現在は自社開発プロダクト「SEARCHWRITE」のプロダクトオーナーとしてPMFに向けた活動を担当している。Twitterを見る

目次
    1. 静的な表と動的な表の違い
    2. 一番簡単な方法はプラグインを設定して挿入する
      1. TinyMCE Advanced
        1. ダウンロード・設定方法
        2. 表の作成方法
      2. TablePress
        1. ダウンロード、設定方法
        2. 表の作成方法
    3. プラグイン以外の表を挿入する方法
      1. word等で作った表を挿入する
      2. HTMLで記述し挿入する
    4. まとめ

WordPressを使ってサイトやブログを作成していると、文字や写真だけではなく表などを用いてWebサイトの情報を整理して分かりやすく表示し伝えようと考える方が多いかと思います。

表にまとめた方が読者が情報を読み取りやすく情報をまとめる場合にも使用ができます。

そんな方向けに、今回はWordPressでの表の作成方法を紹介していきます。

静的な表と動的な表の違い

プラグインの説明をする前に、WordPressのテーブルプラグインには、静的な表、動的な表と異なるタイプの表があります。まずは静的な表と動的な表の違いについて紹介します。

静的な表は一般的な行列の表のことであり、複数の行と列を持つ表形式でデータを表示します。プラグインによっては検索などの操作が可能となり、携帯等のデバイスに合わせて見た目を変化させることができたりもします。

検索、ソート、抽出ができても「静的」と表現される理由は、データがテーブルに直接入力されているからになります。表に用いられているデータをサイト上の他の場所で使用したり、他の場所から取得することはできないので、この後に紹介する「動的」と反対の意味である「静的」な表と呼ばれています。

動的な表は。静的な表とは異なりサイト上に存在するコンテンツを基に自動で即席の表を作成するもので、ブログの投稿一覧や、サイト上で扱っている商品の一覧を表にすることや、行事の予定、人員表、取引先の一覧などを自動で作成することもできます。

静的な表は、データを1カ所に保存しますが、動的な表は存在しているデータを使用することが大きな違いとなります。

一番簡単な方法はプラグインを設定して挿入する

一番シンプルで簡単な方法は、プラグインを使用して簡単に表を作成することです。

デフォルトのWordPressの編集画面には表を作成する機能はついていませんが、プラグインをダウンロードしカスタマイズすることにより感覚的に表を作成することが可能です。

  • TinyMCE Advanced
  • TablePress

とありますので別々にご紹介していきます。

TinyMCE Advanced

公式サイト:https://ja.wordpress.org/plugins/tinymce-advanced/

TinyMCE Advancedでは静的な表を作成する他、フォントを変更したりテキストを箇条書きにすることができます。

様々な機能のアイコンをビジュアルエディタ内に設定することができる点が使いやすさの特徴になります。

また、表を見ながら作成できるので、実際にどのような表になるのかを確認しながら作成する事ができ、初めて表を作成するという方でも安心して表を作成することができます。

ダウンロード・設定方法

まずはインストールをし、初期設定を行います。

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力し、検索完了後「今すぐインストール」をクリックします。

インストールが完了しますと、先ほどの「今すぐインストール」ボタンが「有効化」へと代わりますので、「有効化」をクリックします。

有効化することでTinyMCE Advancedを使用することができるようになり、特別な設定をしなくてもエディタに表を作成できるマークが追加され表を作成できるようになります。

その他、

  • 文字色
  • 文字背景色
  • 打ち消し
  • 検索置換

などなどWordPressのデフォルトエディタにはない機能を追加することも可能です。

表の作成方法

ビジュアルモードで、テーブルのアイコンをクリックすると「テーブル」がありますので、作りたい数だけマスを青くすることで作成が可能となります。

作成した表に文字を入れたり、文字のフォントを設定したり、行や列を追加することもでき自分の作りたい表をイメージしながら表を作成することができます。

TablePress

公式サイト:https://ja.wordpress.org/plugins/tablepress/

TablePressを使用することで様々な機能の付いた動的な表をタグなどを使わずに簡単に作成することができるようになります。

TinyMCE Advancedとは違いエディタ上で編集はできないものの、ショートコードを作成してエディタ上で簡単にテーブルを貼り付けることが可能です。

ダウンロード、設定方法

プラグイン公式サイトからもインストールできますが、プラグインの新規追加のページの検索枠に「TablePress」と入力し検索することもできます。

検索後、「今すぐインストール」をクリックし、インストールが完了しますと、先ほどの「今すぐインストール」ボタンが「有効化」へと代わりますので、「有効化」をクリックします。

表の作成方法

実際に表を作成し記事内に挿入するためには、予めどのような表を作成したいのかという条件を設定し、その条件を保存する必要があります。

管理画面左メニューから「TablePress」→「新しいテーブルを追加」を選択し、「テーブルの名前」「説明」と行数・列数を入力して「テーブルを追加」をクリックします。

また、これらの項目は全て作成後に変更でき、「テーブルの名前」と「説明」は記入しなくても表の作成は可能となります。

完成した条件での表を記事内に挿入する場合には、記事作成画面のビジュアルエディタに「TablePressからテーブルを挿入」のアイコンが追加されているのでそれをクリックすることで挿入することができます。

「TablePressからテーブルを挿入」をクリックすると保存されている表の一覧が表示され、記事に追加したい表の「ショートコードを挿入」ボタンをクリックします。

記事作成画面では、ショートコードとして表示されるので表として表示されず[Table id = 1 / ]などと表示されますが、記事を保存・公開すると表がサイト上で表示されるようになります。

「プレビュー」をクリックすることで、表の表示を確認することができます。

また、便利な機能が多数存在しており、「DataTables JavaScriptライブラリの機能」から各種オプションを選択し使用することが可能となっております。

例えば、「テーブルのページ分割(一度に表示する行数の指定)を訪問者が使用できるようにする」にチェックを入れることで、一度に表示される行の数を設定することができます。

「訪問者がテーブルの並べ替えを選択できるようにする」にチェックを入れることで、訪問者が閲覧時に見出し項目をクリックし並び替えができるようになります。

1回目のクリックで昇順(小さい数字から順番)、2回目のクリックで降順(大きい数字から順番)となります。 このように様々な機能がついているため表にさまざまなカスタマイズが可能です。

プラグイン以外の表を挿入する方法

上記ではプラグインで表を挿入する方法をご紹介しましたが、その他にも表を挿入する方法がありますのでご紹介します。

word等で作った表を挿入する

まず、既に資料がある場合やMicrosoft Word等の操作に慣れている人向けになります。作成方法はシンプルで、word等で作成した表をコピーして貼り付けるという方法になります。

その際に注意していただきたいのが、「ビジュアルモード」であるということを確認してから進めてください。貼り付け後、更新することで表が挿入された状態になります。

この後に紹介する方法が正直わからないという方はこの方法が一番シンプルで簡単かと思います。ただ、既に作成済の表を貼り付けるため、設定によっては貼り付け後の編集ができず、途中で行を追加したいなどということがある場合は、次で紹介するHTMLで表を作成できる方が便利になります。

HTMLで記述し挿入する

HTMLを直接記述し表を作成する方法になります。

エディタはテキストモードを使用し、

<table>~</table>

の間に表のコンテンツを入れ表を完成させます。

コンテンツは

  • <tr>~</tr>で囲まれた部分が行(横の並び)
  • <td>~</td>で囲まれた部分がセル
  • <tr>~</tr>の中に、<td>~</td>が挿入される

といったイメージで表を作成します。HTMLを直打ちとなるとどうしても時間がかかってしまう場合が多く、手軽に表を作成するとなるとプラグインで作成してしまった方が楽です。

ただ、表が表示される仕組みを知っていないと細かな微調整などがビジュアルエディタではできないので表のHTMLの基本だけでも覚えておくとよいですね。

まとめ

サイトやブログをより見やすく、分かりやすくするためにも表の作成は必須です。

その際、どのような表を作成したいかで表の作成方法や設定するプラグインも異なります。 TinyMCE AdvancedやTablePressは無料でも比較的簡単に、かつ様々な便利な機能が多くありますので、ぜひ活用してみてください。