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

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

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

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

WordPressでテーブルを作る方法

まずは、WordPressにテーブルを作る方法についてみていきましょう。

WordPressの機能を活用する

WordPressでは、テーブルを作成するために様々な方法があります。まず、Gutenbergエディターを使用すると、ブロックエディターのテーブルブロックを簡単に追加できます。このブロックを選択し、必要な行と列を追加して、テキストやデータを入力することで、デザインの整った表を作ることが可能です。

また、プラグインを利用することも可能です。例えば、TablePressというプラグインを活用すれば、知識がない方でも簡単に表を作成できます。デザインや機能のカスタマイズも容易で、データのインポートやエクスポートもサポートされています。

さらに、カスタムテーマを作成することで、自分自身でテーブルを作成することも可能です。テーマのテンプレートファイルにHTMLやCSSを組み込んでテーブルを設計し、WordPressの投稿やページに組み込むことができます。

これらの方法を使って、WordPressの機能を活用して簡単にテーブルを作成し、コンテンツを整理することができます。

スプレッドシートで作成してコピーする

WordPressでテーブルを作成する方法として、スプレッドシートでテーブルを作成し、その内容をコピーしてWordPressの投稿やページに貼り付けることができます。これにより、スプレッドシートの柔軟な編集機能を活用しながら、簡単にデザイン性のあるテーブルを作成できます。

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

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

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

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

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

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

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

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

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

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

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を直接記述し表を作成する方法になります。

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

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

コンテンツは

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

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

そもそもテーブルを設置するメリットとは？

最後に、そもそもテーブルを設置するメリットについてみていきましょう。

記事が読みやすくなる

テーブルを設置することで記事を読みやすくすることが可能です。テーブルは情報を整理し、視覚的に分かりやすく表示するために役立ちます。以下に、テーブルを活用することで記事が読みやすくなる理由について紹介します。

情報を構造化しやすい テーブルはデータを行と列に整理し、パターンや関連性を明確に示します。読者は素早く情報をスキャンし、重要なポイントを見つけやすくなります。

これらの理由から、テーブルを設置することは記事の可読性を向上させ、読者にとって情報をより理解しやすくします。

デザイン的にすっきりする

テーブルタグをWebサイトに設置することは、デザイン的にすっきりとした外観を実現するための重要な手段です。テーブルを使用することで、情報を整然と配置し見やすく分かりやすいレイアウトを作ることができます。タイトルやヘッダー、セルなどの要素を適切に活用することで、コンテンツを整列させたり、グループ化したりすることが可能です。また、CSSを使用してテーブルのスタイルをカスタマイズすることもできます。

読者が情報を取得しやすい

テーブルタグを設置することで、読者は情報を簡単に取得することができます。画像のように視覚的に確認できるとともに、テーブルは検索やフィルタリングにも適しており、読者は必要な情報を素早く見つけることができます。テーブルタグは情報アクセスの向上に役立ち、読者の使いやすさと満足度を高めます。

まとめ

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

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