Gutenbergエディターでテーブルを作成および管理

テーブルやチャートは、私たちがウェブサイトを持っているときに思っているよりも重要です。これにより、私たちが価格、計画、会社の軌跡などを表示する方法が本当に簡単になります。

作成したテーブルを検索するのは、ショートコードをコピー/ペーストする必要があるため、非常に面倒です。しかし、すべてのテーブルを検索するためのブロックがあればどうでしょうか? WP Table Manager

WP Table Manager は、ブロック内に検索ボックス付きの表を追加できるGutenbergエディタのブロックを追加します。.

Gutenberg 用のこのプラグインを使用して WordPress テーブルを作成する

この投稿では、 WP Table Manager を使用して価格比較表を作成します。まず、表の作成方法について説明します。.

まず、テーブルマネージャ > すべてのテーブルに移動します。このセクションで、+ 新規作成 > テーブルをクリックします。これにより、テーブルエディタが開きます。テーマを使用して簡単に作成できるので、テーマ > テーマの選択をクリックしましょう。

テーマのすべてのオプションが表示されるので、価格比較表に適したテーマを選択します。.

OKをクリックします（テーブル内のすべてのデータが削除されることに注意してください）。.

テーマを追加したので、ほぼすべての作業が完了しました。.

必要なのは、テーブルをニーズに合わせて簡単な調整を行い、適応させることだけです。多くの行を削除し、それらの多くを編集します。これらは、Excelを使用しているかのようにクリックして入力を開始するだけで編集できます。.

削除するには、行をクリックして右クリックし、削除

セルを編集する場合は、クリックするだけで、コンテンツをカスタマイズするために使用できる高度なエディタが開きます。.

さらにテーブルをカスタマイズしたい場合は、セルの色を変更することができます。上部のツールを使用して、変更したいセルの色を変更するだけです。.

テーブルは自動的に保存されるため、手動で保存する必要はありません。.

テーブルを作成した後、Gutenberg Editorブロックを使用して投稿に追加できます。.

投稿 > 新規追加に移動すると、Gutenberg エディターが表示されるので、WP Table Managerブロックを選択します。

これにより、カテゴリと表が表示される検索フィールドが追加され、表をクリックするだけで表を追加できます。.

テーブルが追加され、投稿を公開するだけで、テーブルがそこに表示されます。テーブルをクリックして投稿/ページを公開するのと同じくらい簡単です。.

以上で、10分もかからずに価格表を作成して投稿しました。とても簡単ですよね？

WordPressで WP Table Manager を使用してチャートを作成する

はい、表からチャートを作成するオプションもあります。さらに嬉しいことに、チャートセクションには専用のGutenbergブロックがあるため、投稿を作成する際に簡単にチャートを見つけることができます。.

Now, to create charts go to Table Manager > All Tables, we should have a table created with the data that we want to reflect in the chart, we have a table prepared with information to create this chart.

良い方法としては、作成したいテーブルの種類ごとにカテゴリを作成することです。たとえば、ここでは「チャート」というカテゴリを作成しました。.

カテゴリの作成は非常に簡単です。+ 新規作成 > カテゴリ

最後に、カテゴリのタイトルを入力し、親カテゴリ（これがサブカテゴリの場合）を選択し、完了をクリックします。

では、チャートを作成するテーブルに移動しましょう。5カ国の人口に基づいてテーブルを追加しました。.

チャートを作成するには、チャートに追加するセルを選択し、チャート > データからチャートを作成

 ここで、右側のメニューで作成されたチャートが表示され、チャートをカスタマイズするためのツールが表示されます。.

この例では、円チャートを使用します。.

右側のパネルの下部で、各フィールドの色を選択して、使用しているテーマに合うように色を設定できます。.

チャートの作成/カスタマイズが完了したので、投稿 > 新規追加に移動して、作成したチャートを追加した新しい投稿を作成しましょう。

Gutenberg Editorで、「WP Table Manager Chart」ブロックを検索して投稿に追加します。.

これにより、検索フィールドが開き、使用可能なすべてのチャートを確認できます。.

ご覧のとおり、利用可能なすべてのカテゴリ、テーブル、チャートが表示されます。そのため、すべてのカテゴリを整理しておく必要があります。次に、追加するチャートをクリックします。この例では、「人口チャート」です。.

ご覧のとおり、ショートコードは自動的に追加されるため、公開するだけですべて完了です。.

しかし今、チャートのデータを更新したい場合はどうなるでしょうか? 新しいチャートを作成すべきでしょうか? いいえ！テーブルの中のデータを編集するだけで、チャートは自動的に更新されます。.

この例では、ツバルの人口は11147です。画像のように、人口を20000に変更して、再度チャートを確認してみましょう。.

チャートが更新されたはずです。確認してみましょう。.

はい、魔法は完了しました。表内のデータを変更するだけで簡単に変更できる動的なチャートを作成しました。.

さらに、WordPressのデータベースからのテーブル

データベースからテーブルを作成するオプションもあります。このテーブルは、データベースに変更があると自動的に更新されます。データベースに保存された情報に基づいてテーブル/チャートを作成する場合、+新規作成 > データベーステーブル

これにより、データベースに含まれるすべてのテーブルが表示されるページにリダイレクトされるため、必要な列を選択するだけで、 WP Table Manager がテーブルを自動的に作成します。.

その後、テーブルに追加したい列を選択できるようになります。たとえば、ここでは著者のコメントタイプと電子メールのみを選択します。.

最後に、各列のタイトルを選択し、テーブルを作成するためのルールを追加します。.

次に、 テーブルを作成 テーブルは自動的に作成されます。たとえば、著者の電子メールが「」の場合にのみ変数を表示するなど、追加できる条件があることに留意してください。この電子メールアドレスはスパムボットから保護されています。表示するにはJavaScriptを有効にする必要があります。.”.

必要な数のルールを追加できます。「追加」をクリックするだけで、新しいルールを設定するための新しいボックスが追加されます。.

これで、データベースからテーブルを作成する方法が非常に簡単であることがわかります。.

新しいデザインにより、すべてがさらに簡単になります！

WP Table Managerでテーブルの作成を開始する

これで、WP Table Managerここにアクセスし、メンバーシップを購入して、これらのテーブルを最もプロフェッショナルな方法で提供し始めましょう。