ElementorとTablePressを使用してWordPressでテーブルを作成する方法

Rifat Elementor Jan 24, 2023

テーブルベースのデータベースにアクセスできることは、多くの WordPress サイトにとって便利な機能です。 サイト訪問者が理解しやすい方法でデータを表示でき、情報の整理、比較、および分解に使用できます。 したがって、WordPress でテーブルを作成する方法を知ることは、非常に価値のあるスキルです。

HTML テーブルを手動で作成する従来の方法は、時間がかかり、非効率的です。 また、テーブル ブロックを備えた新しい Gutenberg エディターが登場するまで、WordPress にはこの種の組み込みサポートがありませんでした。 幸いなことに、CMS には、サイトにテーブルを簡単に追加できるプラグインが多数用意されています。

TablePressは最も広く使用されています。 ビジュアル エディターで表を作成し、文章にシームレスに統合します。 インストール数が 700,000 を超え、平均レビュー スコアが 4.5 つ星であるという事実は、そのパフォーマンスが見事であることを示しています。

ElementorTablePressを使用して、WordPress サイトに美しいテーブルを作成する方法を学びましょう。 この記事では、プラグインとその機能を紹介し、新しいテーブルを作成してインポートおよびエクスポートする手順を説明し、関連する拡張機能について説明します。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

WordPress にテーブルを追加する

この記事の実際のハウツーに入る前に、使用するプラグインについて話しましょう。

確立されているように、TablePress は同時代の人々の間で最高レベルの採用を享受しています。 これについての最も可能性の高い説明は、特に新規参入者にとっての使いやすさです。 以下でそのアサーションを確認できます。ただし、プラグインには他にも特徴的な機能があります。

  • 多くのフォーマットからデータをインポート–テーブルを簡単に作成できるだけでなく、TablePress ではさまざまなソース (Excel、CSV、HTML、JSON) からデータをインポートすることもできます。 スプレッドシートのデータは、手動で入力する必要なくすぐに使用できます。
  • エクスポート可能性–逆に、テーブルを TablePress からさまざまな種類のファイルにエクスポートできます。 これにより、データをコピーして Excel スプレッドシートに貼り付けたり、必要に応じて他の方法で使用したりできます。
  • Extendability–TablePress の開発者は、コア プラグインに加えて多数の拡張機能を作成しました。 彼らの助けを借りて、列フィルター、PDF エクスポート オプションなどをテーブルに追加できます。 この記事の結論では、これについてさらに説明します。

TablePress & Elementor を使用して WordPress でテーブルを作成する

WordPress で新しいテーブルを作成するために TablePress プラグインを使用する基本から始めます。

TablePressをインストールする

当然のことながら、 TablePress アドオンのセットアップは最初の仕事です。 これは、他の WordPress プラグインをインストールするのと同じ方法で可能です。 Plugins > Add New に移動し、検索バーにプラグインの名前を入力して、Install をクリックするだけです。

プラグインをサイトにアップロードしたら、必ずプラグインを有効にしてください。

新しいテーブルを追加

TablePress が有効になると、WordPress の管理メニューに新しいオプションが表示されます。 選択すると、ここに移動します。

WordPress サイトのすべてのテーブル関連タスクは、このセクションで処理できます。 サポートが必要な場合は、上部にある他のリソースへのリンクを見つけることができます。

[新規追加] ボタンを選択して、新しいテーブルを作成します。 すると、次の場所に到着します。

テーブルを作成するには、テーブルに名前を付け、必要に応じて説明を入力し、必要な行数と列数を決定するだけです。 準備ができたら、メニューから [テーブルの追加] を選択します。

テーブルにコンテンツを入力する

これに続いて、テーブルのセルへのデータの入力を開始できます。 スプレッドシートの使用経験があれば、これで問題はないはずです。

小さな矢印アイコンを使用して行と列を並べ替えたり、行と列をドラッグ アンド ドロップして並べ替えたりできます。Elementor Proの使用をサポートする説得力のある理由を探している場合は、ここで見つけることができます。

詳細オプションの構成

テーブルの操作と書式設定の追加オプションを以下に示します。

上部にある洗練されたエディターを使用して、リンクや画像、テキストなどのメディアを追加できます。 3 つの方法のいずれかを使用してセルにコンテンツを追加するには、最初に必要なボタンを選択し、次にセルを選択します。 プラグインを有効にすると、3 つの選択肢すべての標準設定メニューが表示されます。

行または列を非表示にしたり、既存のセルのコピーを作成したり、新しいセルを追加したり、既存のセルを削除したり、新しいセルを追加したりすることもできます。 横にある対応するラジオ ボタンをクリックして、変更する内容を指定します。

[テーブル オプション] メニューでは、ヘッダーやフッターを追加するなど、テーブルの外観を変更できます。 行の色、カーソルを合わせたときの表示方法、表のタイトルと説明の表示方法を変更できます。 さらに、CSS クラスを使用して独自のスタイルを適用できます。

最後に、テーブルの JavaScript ライブラリのさまざまな側面を調整するための一連のボタンがあります。

横スクロールバー、検索バー、ページ番号バーがあり、表の並び替えができます。 ユーザー指定のパラメーター用のスポットも用意されています。

サイトにテーブルを表示する

ページの下部にあるボタンを使用して、完成したテーブルを表示したり、保存したりできます。 右上隅にあるショートコードを確認することは、保存後の最も重要なステップです。

それを使用して、WordPress サイトにテーブルを追加します。 いつでもテーブルのリストに戻り、[ショートコードを表示] をクリックして外観を確認できます。

ショートコードをテキスト ウィジェット、投稿、またはページに貼り付けて、そこに表を表示することができます。

TablePress は、標準の WordPress エディターにテーブルを挿入するためのボタンも追加します。

これをクリックすると、テーブルのショートコードとボタンが表示され、それらをコンテンツに追加できます.

いずれにせよ、これがページに表示される方法です。 検索機能とページ番号に注意してください。

Elementor で TablePress テーブルを使用する

Elementorでは、単一の投稿などのテンプレートにテーブルを含めることもできます。 これは簡単です。 使用するテンプレートを開き、左側でショートコード ウィジェットを探し (検索バーが役立ちます)、テーブルを表示する場所にドロップします。

次に、テーブルのショートコードを左側のフィールドに貼り付ける必要があります。 TablePress のプレビュー ウィンドウにはショートコードのみが表示され、実際のテーブルは表示されないことに注意してください。

ただし、気にしないでください。 テーブルは、テンプレートのプレビューまたは最終バージョンで正しく表示されます。

テーブルの再編集

いつでも TablePress のプライマリ メニューに戻って、テーブルの 1 つに変更を加えることができます。 リスト内のテーブル名は、カーソルを合わせると編集可能になります。

これをクリックすると、標準の編集画面に移動し、必要な調整を行うことができます。 テーブルを更新すると、使用されているすべての場所でこれらの変更が反映されます。

TablePress でテーブルをインポートする

すでに述べたように、情報は手で入力する代わりにファイルから取り込むことができます。 TablePress に慣れている場合は、新しいテーブルを作成するのと同じくらい簡単であることがわかります。

テーブルをインポートする

TablePress > テーブルのインポート (ナビゲーション バーからもアクセス可能) には、この目的に関連するすべての設定が含まれています。

最初に入力として使用する適切なデータ フィードを見つけます。 これは、ファイルのアップロード、URL の使用、サーバー上のファイルへのアクセス、入力 (コピーと貼り付け) など、さまざまな方法で行うことができます。

この目的のために、ファイルを使用する必要があります。 これを行うには、[参照] ボタンを選択し、追加するスプレッドシートを見つけます。 完了したら、ドロップダウン メニュー (CSV、HTML、JSON、または Excel) を使用して、TablePress に形式を指定します。

この情報を使用して、まったく新しいテーブルを作成したり、既存のテーブルを更新したり、既存のテーブルに追加したりできるので便利です。 後者の 3 つの方法を使用する場合は、適切なテーブルを手動で選択する必要があります。

必要に応じて設定を変更し、[完了] ボタンをクリックします。

チェックとフォーマット

テーブルをインポートすると、以前と同じページに移動します。

この時点で、すべての情報を正しく入力する必要があります。 後は、視覚的および機能的な設定をセットアップするだけです。

サイトに表示する

次に、同じショートコードを使用して、インポートしたテーブルをサイトの任意の場所に配置できます。

TablePress – テーブルのエクスポート

最後に、プラグインのエクスポート機能について説明します。 TablePress > [テーブルのエクスポート] にこの機能があるのは明らかですが、メイン メニューの上部にあるタブからアクセスすることもできます。 この画面には、これらのオプションの両方からアクセスできます。

まず、エクスポートするテーブルを選択します。 WordPress サイトのすべてのテーブルを 1 つずつ選択し、[CSV または Excel にエクスポート] ボタンをクリックしてエクスポートできます。 目的のエクスポート形式 (カンマ区切り値 (CSV)、HTML、または JSON) と、以下の CSV エクスポートの値間の区切り文字 (カンマ、セミコロン、またはタブ) を選択します。 圧縮されたアーカイブを生成することも選択できます。 複数のテーブルを一度にエクスポートする場合、このオプションは必須です。

選択が完了したら、[エクスポート ファイルのダウンロード] ボタンをクリックしてファイルをダウンロードできます。

利用可能なプラグイン オプション

TablePress には非常に最小限のオプション メニューがあります。

カスケード スタイル シート (CSS) によるテーブルの書式設定は、これらのオプションの主な焦点です。 開発者は、必要な場合や慣れていない場合に役立つ大量のドキュメントを同梱しています。 その下には、メイン メニュー項目の順序を並べ替えることができるスライダーがあります。 プラグインを削除するためのリンクと役立つヒントがページの下部に表示されます。 プラグインの追加機能の一部は、それで十分でない場合、以下のアドオンにリストされています。

便利な TablePress アドオン

冒頭で述べたように、TablePress には追加できるプラグインが多数あります。 最も役立つアドオンを以下にまとめます。

ただし、すべて無料で使用できるにもかかわらず、「プレミアム」と表示されているものもあります。

これらは苦労して作成されたものであり、著者はそれらの配布と引き換えに金銭的貢献を要求します.

  • レスポンシブ テーブル – デフォルトの TablePress テーブルはモバイル対応ではありません。 このアドオンで修正できます。 モバイル デバイスと互換性のあるテーブルを作成するには 3 つの方法があり、それぞれに独自の手順と例があります。
  • 自動 URL 変換 –このアドオンは、多数の URL を含むテーブルを作成する場合に役立ちます。 貼り付けた URL は、ボタンなしでクリック可能になります。
  • DataTables Sorting Plugins – 通貨、テキスト付きの数値、および日付範囲を個別に並べ替えることができるようになりました。
  • DataTables Buttons – このアドオンを使用すると、複数のラジオ ボタンをテーブルに簡単に挿入できます。 クリップボードや PDF および Excel ファイル形式にコピーする機能を備えています。
  • DataTables FixedColumns – テーブル内の列を設定して、テーブルの残りの部分が水平方向にスクロールされている間、列が静止したままになるようにします。
  • DataTables FixedHeader –列ソリューションと同じことがヘッダーにも当てはまります。
  • [テーブル] ショートコード – を変更するTablePress ショートコードの名前を変更して、他のアドオンやデザインの選択との非互換性を回避することができます (または、最悪の場合)。
  • 周期表の自動インポート –元表から一定間隔で自動でデータをインポートするようにします。

最終的な考え

TablePressが、テーブルを作成して含めたい WordPress ユーザーにとって最もダウンロードされているプラ​​グインであるのには十分な理由があります。 その結果、プロセスが簡素化され、より快適になります。 このプラグインは、Web サイトの情報を構造化する必要がある場合に強くお勧めします。

TablePress の使用方法、 Elementorサイトにテーブルを表示する方法、外部テーブルからデータをインポートする方法、およびサイトからテーブルをエクスポートする方法がわかりました。 また、使用できるさまざまなプラグインと拡張機能についても説明しました。 手順は簡単です。

ここまでで、自分の WordPress サイトでテーブルを作成する能力に自信を持っているはずです.

Divi WordPress Theme