WordPressの投稿/ページにテーブルを挿入する方法

公開: 2022-03-21

簡単な方法があります。

しかし、それは最善の方法ではありません。

WordPressの新しいブロックエディターにはテーブルブロックが含まれており、単純なテーブルに対しては完全に正常に機能します。

ただし、もう少し高度なものが必要になる可能性があります。

役立つ2つの優れたプラグインがあります。

最初のプラグインを使用すると、特別なエディターを使用してテーブルを作成できます。 つまり、コードを調べる必要さえありません。 2番目のプラグインは、視覚的な魅力と多様性を必要とするテーブルに適しています。

動的に機能し、サイト上の投稿、ドキュメント、およびその他のコンテンツを一覧表示する3番目の方法があります。最後にそのオプションについて説明します。

YoutubeでCompeteThemesを購読する

目次を隠す
  1. 1.TablePressでテーブルを作成します
    1. なぜTablePressを使用するのですか?
    2. TablePressの使い方
    3. よくある質問
  2. 2.Tablesomeでテーブルを作成します
    1. Tablesomeの使い方
  3. 3.WPテーブルビルダーを使用してテーブルを作成します
    1. WPテーブルビルダーの使用方法
  4. 4. PostsTableProを使用します
  5. 5. JetEngineTablesBuilderを使用します
    1. JetEngine Tables Builderの使用方法は?
  6. プラグインなしでテーブルを作成できますか?

1.TablePressでテーブルを作成します

TablePressは、WordPressでテーブルを作成および表示するためプラグインです。

TablePressプラグイン

ご覧のとおり、WordPressユーザーの間で人気があります。

なぜTablePressを使用するのですか?

TablePressの主な魅力は、コードに触れることなくテーブルを作成および変更するための優れたインターフェイスを提供することです。

また、ここで説明できるよりも多くの機能があります。 基本プラグインに追加できるすべての優れた機能については、拡張機能のページをご覧ください。

TablePressを使用する最後の利点は、テーブルが単一の投稿やページに縛られないことです。 投稿/ページから独立してテーブルを作成するため、サイトのどこでもそれらを再利用できます。

TablePressの使い方

TablePressをアクティブにすると、管理ダッシュボードに新しいトップレベルメニューが追加されます。

TablePressによって追加されたメニュー

[新規追加]ボタンをクリックすると、このページに移動し、テーブルの名前とサイズを設定できます(心配しないでください。後で、いつでも行/列を更新できます)。

テーブル作成画面

テーブルを作成すると、データを入力する完全なテーブルエディタにアクセスできます。

テーブルエディタ
テーブルにいくつかのサンプルデータを追加したので、使用中にどのように見えるかを確認できます。

行と列の再配置、リンクの追加、セルの結合が可能です。エディターには多くの実用的な機能が組み込まれています。

テーブルを表示する準備ができたら、テーブルページからショートコードをコピーし、Shortcodeブロックを使用してエディターに貼り付けます。

ショートコードブロック

エディターにショートコードが表示されますが、投稿を表示すると完全なテーブルが表示されます。

フロントエンドに表示されるテーブルの外観は次のとおりです。

TablePressで表示されるテーブルの例
Apexをテーマにした投稿で表示されます。

ショートコードを使用したことはありませんか? このチュートリアルでそれらに精通してください。

よくある質問

TablePressには、いくつかの一般的な問題と質問があります。

ショートコードは私のサイトのSEOに影響しますか?

いいえ。ショートコードを使用しても、ページ上の表を読み取るGoogleの機能には影響しません。

エディターにショートコードが表示されている間、通常のクロール可能なHTMLがサイトに出力されます。 HTMLを自分で書き出すのと同じです。

応答性/モバイルフレンドリーですか?

TablePressが作成するテーブルは、デフォルトではレスポンシブではありません。 ただし、モバイルフレンドリーにする拡張機能があります。

このプラグインの使用をやめると、テーブルが失われますか?

はいといいえ。

テーブルデータはデータベースに保存されるため、プラグインをアンインストールしても技術的に失われることはありません。 ただし、管理ダッシュボードでそのデータにアクセスできなくなるため、それを使用してテーブルを作成するのは難しい場合があります。

あなたのサイトをバックアップしてください!

さて、これは質問ではありませんが、サイトをバックアップするためのリマインダーです! Web上の一部のWPユーザーは、テーブルを失うことになっただけで、テーブルに何時間も費やしていることを嘆いています。

常に定期的にサイトをバックアップして、ハードワークを失わないようにしてください。 ヘルプが必要な場合は、サイトをバックアップする方法に関するチュートリアルに従うことができます。 選択できる優れた無料およびプレミアムバックアッププラグインがたくさんあります。

2.Tablesomeでテーブルを作成します

Tablesomeは、レスポンシブテーブルをすばやく作成し、ページや投稿に追加するためのWordPressテーブルプラグインです。 また、Googleスプレッドシート、MSExcelなどの他のツールで生成されたCSVおよびXLSXファイルからテーブルをインポートすることもできます。

テーブルサム

Tablepressのような他のプラグインは、デスクトップデバイスにデータを表示するのに優れていますが、モバイル対応ではありません。 一方、Tablesomeは完全にレスポンシブで、すべての画面サイズで見栄えがします。 大きなデータテーブル、製品カタログ、比較テーブル、スポーツリーグテーブル、価格表など、あらゆる種類のテーブルを作成できます。

直感的なスプレッドシートのようなインターフェイスのおかげで、テーブルの作成と編集も簡単です。

Tablesomeの使い方

Tablesomeは、他のWPプラグインだけをインストールできます。 インストール後、ダッシュボードに新しいTablesomeメニューが追加されます。

CSVまたはXLSXファイルからファイルをインポートする場合は、[インポートオプション]をクリックしてインポートできます。
テーブルを最初から作成するには、[新しいテーブルの作成]メニュー項目をクリックして[新しいテーブル]ページに移動します。

テーブルの作成

このページでは、テーブルに名前を付けてデータを入力できます。 他のプラグインとTablesomeの決定的な違いは、テーブルにデータを追加するときに行と列を追加できることです。

テキスト、リッチテキスト、電子メール、数値、日付、リンク、チェックボックス、ボタンなど、8つのデータタイプを使用できます。 テーブルの作成が終了したら、[テーブル設定]メニューからテーブルの外観をカスタマイズできます。

テーブル設定

テーブル設定では、検索、並べ替え、フィルター、ページ付けなどのオプションを有効にすることを選択できます。 テーブルをモバイル画面に適応させる方法を構成することもできます。

[スタイル]セクションでは、テーブルヘッダー、本文、境界線、フォント、およびフォントサイズの外観をカスタマイズできます。

テーブルを投稿またはページに追加する準備ができたら、Tablesomeブロックまたはクラシックエディターをまだ使用している場合はショートコードを使用して追加できます。

Tablesomeショートコード

次に、サイトのフロントエンドでTablesomeテーブルがどのように表示されるかの例を示します。

Tablesomeフロントエンド

3.WPテーブルビルダーを使用してテーブルを作成します

より視覚的に美しいテーブルを作成したい場合は、WPテーブルビルダーを試してください。

Wpテーブルビルダー

TablePressはデータの構造化と表示に最適ですが、テーブルはそれほど魅力的ではありません。 WP Table Builderは、製品比較テーブル、従業員のスケジュール、さらにはレストランのメニューを作成するのに最適です。

シンプルなドラッグアンドドロップインターフェイスを備えたWPTableBuilderは、使用するのが楽しいものです。

WPテーブルビルダーの使用方法

WP Table Builderは、他のプラグインと同じようにインストールできます。 インストールすると、ダッシュボードに新しいテーブルビルダーメニューが追加されます。

テーブルビルダーメニュー

「新規追加」ボタンをクリックすると、テーブルを作成できるドラッグアンドドロップインターフェイスが表示されます。

テーブルビルダーインターフェイス

現在、上の画像の左上に表示されている5つの異なるコンテンツタイプがあります。

必要な列と行の数を選択したら(後で編集できます)、これらの要素をテーブルの任意のセルにドラッグアンドドロップするだけです。

このプラグインをいじって1分も経たないうちに、製品比較表の始まりをまとめることができました。

テーブルの例

このプラグインを使用して、あらゆる種類のテーブルをすばやく作成する方法を簡単に理解できます。

テーブルを投稿に追加する場合は、ショートコードを使用して簡単に行うことができます。 インターフェイスの上部にある[埋め込み]ボタンをクリックすると、テーブルのショートコードを含むこのポップアップが表示されます。

Wpテーブルビルダーのショートコード

次に、それをコピーしてショートコードブロックに貼り付け、投稿やページに含めるだけです。

4. PostsTableProを使用します

この記事でこれまでに取り上げた2つのプラグインは、静的テーブルプラグインです。 つまり、ユーザーはデータを手動で追加し、テーブルを更新するたびにデータを変更する必要があります。 静的テーブルプラグインは、財務情報などの構造化データを表示するのに最適です。

Posts Table Proは、動的なWordPressテーブルプラグインであるため、異なります。 静的データを表示する代わりに、WordPressデータベースに保存されている情報を使用してテーブルを自動的に生成します。 これにより、データを手動で追加する場合に比べて時間を大幅に節約できます。

投稿テーブルプロワードプレステーブルプラグイン

Posts Table Proを使用して、WordPressブログの投稿、ページ、または任意のカスタム投稿タイプの検索可能なテーブルを作成できます。 プラグインの最も使用例は、ドキュメントライブラリ、ブログ投稿インデックス、リソースディレクトリ、スタッフまたはメンバーディレクトリ、およびビデオまたはオーディオライブラリの作成です。

なぜPostsTableProを使用するのですか?

テーブルに表示する内容によっては、テーブルを自動的に生成することで多くのメリットが得られます。

テーブルに直接データを追加する代わりに、WordPress管理者に投稿(またはカスタム投稿)を追加します。 WordPress自体に付属しているすべての標準フィールドを使用できます。また、高度なカスタムフィールドやポッドなどのプラグインを使用して、カスタムフィールドと分類法を追加できます。 追加したら、Posts Table Proショートコードを使用して、サイトの任意の場所にテーブルを挿入します。

動的なWordPressテーブルを挿入する
Posts Table Proは、画像、WooCommerce製品、オーディオなどで動作します

テーブルを挿入した後は、テーブルを再度更新する必要はありません。 投稿への変更は自動的にテーブルに反映されるため、手動で更新することを覚えておく必要はありません。

テーブルに投稿を表示するもう1つの利点は、ユーザーがアイテムごとに個別のページにアクセスできることです。 クリックして単一の投稿(またはカスタム投稿)ページに移動し、コンテンツ全体を表示できます。 静的テーブルでは、テーブル内の各アイテムに対応するページがないため、これは動的WordPressテーブルプラグインでのみ可能です。

PostsTableProの使用方法

表示したい情報がすでにWordPressサイトにある場合(ブログ投稿など)、PostsTableProをすぐに設定できます。 または、無料のPodsプラグインをインストールして、テーブルの列として表示するすべてのフィールドとともにカスタム投稿タイプを作成することもできます。

次に、Posts Table Proをインストールし、設定ページを使用して構成できます。 数十のオプションがあり、テーブルの列、フィルターのドロップダウン、ページごとに表示するアイテムの数などの詳細を制御できます。

次に、WordPressサイトのテーブルを挿入する場所に[posts_table]ショートコードを追加します。 たとえば、各テーブルにさまざまなアイテムを一覧表示できるように、ショートコードオプションがたくさんあります。

全体として、これはサイトのコンテンツを一覧表示するための優れたオプションであり、静的なテーブルの選択肢よりも優れています。

5. JetEngineTablesBuilderを使用します

もう1つの動的なWordPressテーブルプラグインは、JetEngineTablesBuilderモジュールです。 このプラグインを使用すると、WordPressデータベースからテーブルが自動的に作成されるため、データを手動で追加する必要はありません。

JetEngineテーブルビルダー

Tables Builderの最も一般的な使用例は、WooCommerce製品テーブル、統計テーブル、およびRest APIを利用したテーブル(たとえば、IMDbテーブル)です。 このテーブルプラグインを使用すると、投稿、用語、コメント、レビュー、製品、またはSQLデータを示す動的データテーブルを生成できます。

JetEngine Tables Builderの使用方法は?

JetEngineプラグインを使用して動的テーブルを作成するには、次の手順に従います。

  1. JetEngineをダウンロードしてインストールします
  2. 動的テーブルモジュールを有効にする
テーブルオプション
  1. JetEngineクエリビルダーを使用してクエリを作成します。
  2. 一般的なテーブル設定を構成します(タイトルを追加し、データを取得するクエリを選択し、データをフェッチしてテーブルをプレビューします)。
  3. 必要な列を追加します。
  4. テーブルのスタイルを調整します。
  5. テーブルをページに追加します(ElementorページビルダーまたはGutenbergを使用)。

Tables Builderを使用すると、並べ替え可能で自己更新可能なデータを使用して、Webサイトの動的テーブルを簡単に追加できます。 ちなみに、JetSmartFiltersを使用すると、テーブルにフィルターを追加できます。

要約すると、これは動的テーブルを構築するための優れたプラグインです。

プラグインなしでテーブルを作成できますか?

WordPressには、カスタムの列数と行数でテーブルをすばやく作成できるTableブロックがありますが、データは1つの場所にとどまり、再利用できず、魅力的なスタイルになりません。

TablePressは、サイトからインポートまたはエクスポートできる、より大きく再利用可能なテーブルを作成したい人に最適です。 WP Table Builderは、より視覚的なコンテンツの優れた代替手段であり、Posts Table Proは、サイトに動的コンテンツを一覧表示するのに最適です。

プラグイン間の選択をさらに探している場合は、WordPressに最適なテーブルプラグインのリストをご覧ください。

サイトにテーブルを追加するために必要なものは他にありますか? このチュートリアルに何か足りないものはありますか? 以下にコメントを残してください。