WordPressで比較表を作成する方法(2つの方法)

比較表では、複数の項目を水平または垂直に比較し、それぞれの主な特徴を強調することができます、 仕様書, and other features. It’s a powerful way to let users make informed decisions.

比較表は デフォルトのWordPressテーブルブロックしかし、多くの制限があります。デフォルトのブロックには、画像、ボタン、リストを追加できません。

テーブルバーグ is a wonderful table builder plugin that overcomes all these limitations. In this article, we’ll show you two methods of how to create a comparison table in WordPress – with a plugin and no plugin.

美しいテーブルを作る
ブロックエディター付き

方法1:プラグインを使用しない

You’ll get a default Table block in the WordPress block library. You can create a basic-level comparison table with it.

ステップ1:投稿/ページエディタにテーブルブロックを追加する

をクリックする。 プラス(+)アイコン. Type テーブル in the search box. Once the block appears, add it to the editor of your post/page.

Add the Table Block to Your Post/Page Editor

ステップ2:列番号と行番号の定義

Define the column and row number as you want for the table. In this tutorial, we’ll select 4*3 for the comparison table.

行番号と列番号を設定する

ステップ3:テーブルに情報を追加する

Now, add information to the table. You can only add textual information; no images, buttons, or any other block.

Here is a demo table we have made ready for the post.

Demo comparison table created with the default WordPress Table block

方法2:Tablebergプラグインを使用する

最初のメソッドでお分かりのように、このメソッドには イメージ, buttonまたは、デフォルト・テーブル・ブロックで作成された比較テーブルへ。しかし、これらの要素がないと、比較表はユーザーをトリガーすることができません。

テーブルバーグ is a wonderful Gutenberg-friendly table builder plugin that can help you overcome all these limitations.

ステップ01: Tablebergプラグインをインストールする

Log into your WordPress dashboard. Go to プラグイン > 新規プラグインの追加. Type テーブルバーグ in the search box to find the plugin. Once the plugin appears below, hit the Install Now ボタンをクリックする。 アクティベート it afterward.

ステップ02:Tablegergブロックの追加

Open a post or page. Add the 卓球ブロック をWordPressのエディタから開きます。

ステップ03:行数と列数の選択

Select the number of rows and columns as you do with the default table block. Hit the テーブル作成 button after that. We’ll select two (2) columns and four (4) rows.

Select the Number of Rows and Columns

ステップ04:テーブルにコンテンツを追加する

Add headings to the columns. Hit the プラス (+) icon and select the block as you want. Select the イメージブロック after that. This will allow you to add an image to the cell.

Add image block to the table created by TableBerg

# Add Images to the Table

You can see we have added an image respectively to each column.

Add Images to the Table

# Add Lists to the Table

Next, select the リストブロック. Using this block, you can list all the features of your product. Do this to the respective row of each column.

Add list to the table created by TableBerg

# Add Buttons to the Table

Now, add the ボタンブロック to the table. This will allow you to add a CTA button for each product.

Add buttons to the table

Once the blocks are added, you can customize them from the スタイル タブをクリックしてください。

Customize the TableBerg blocks

Thus, you can create versatile and multipurpose comparison tables using the TableBerg plugin.


Video Tutorial


こちらもお読みください:

結論

Creating comparison tables can greatly enhance user experience by presenting information in a structured and easily digestible format. TableBerg promises to revolutionize your WordPress table building experience with more stunning releases in the coming days.

Here’s a quick guide on how to remove table borders in WordPress so you can make your table design more captivating.



テーブルバーグ・チーム