WordPress で比較表を作成する方法

WordPressで比較表を作成する方法

コンテンツに比較表を組み込むことで、より使いやすくなりました。それがあなたのものであるかどうか eコマースウェブサイトまたはアフィリエイト商品の販売では、類似製品間の比較を簡単に共有できます。または、詳細な比較を表示したいあらゆる種類のデータにすることもできます。

良い点は、WordPressで比較表を簡単に作成できることです。

WordPress で比較表を作成するには 2 つのオプションがあります — WordPress のデフォルトの Gutenberg エディターと比較表用の WordPress プラグイン。

ただし、WordPress のデフォルトのテーブルにはいくつかの制限があります。レイアウトをカスタマイズするのは難しいです。そのため、作業を簡単にするプラグインを使用することをお勧めします。 

比較表を作成するためのステップバイステップのガイド

このステップバイステップガイドでは、いくつかのステップに分けてプロセス全体を共有しました。各ステップに従うと、使いやすい比較表が作成されます。製品の比較であれ、他のものであれ、私が共有する方法を活用する機会は無限にあります。

ステップ 1: 必須のプラグインをインストールする

先ほども述べたように、新しいコードをカスタマイズしたり作成したりする手間を省くには、WordPress プラグインを使用する必要があります。さまざまな比較表プラグインが世に出ていますが、使用できる最適なものは ElementsKit です。これは、ユーザーが数回クリックするだけでさまざまな Web ページを作成できるようにする Elementor アドオンです。

インストール -

他の WordPress プラグインをインストールするのと同じ方法でインストールできます。まず、WordPress ダッシュボードから、次の場所に移動します。 プラグイン > 新規追加 > プラグインをアップロード。次に、プラグインをインストールして有効化します。

WordPressテーブルプラグインをインストールする

ElementsKit プラグインをインストールすると、テーブル ウィジェットを有効にする必要があるプラグインのダッシュボードが表示されます。 ElementsKit のダッシュボード > ウィジェットに移動し、テーブル ウィジェットを有効にします。

テーブルウィジェットをオンにする

ステップ 2: 新しいページを作成する

次に、比較表を統合するページを選択する必要があります。比較表を新しいページに組み込む場合は、 WordPress ダッシュボード > ページ > 新規追加。次に、新しいページを作成し、Elementor で編集を選択します。

比較表用の新しいページを作成します

比較表を既存のページに統合する場合は、ページに移動し、比較表を追加する特定のページを選択し、Elementor で編集を選択します。

ステップ 3: 比較表を作成する

ページ エディターを使用している場合は、ページ内にテーブルを挿入できます。このためには、ページ エディターの左側にあるウィジェット ライブラリに移動します。 「テーブル」を検索すると、ElementsKit のテーブル ウィジェットが表示されます。ウィジェットをページエディターにドラッグアンドドロップします。

WordPressで比較表を作成する

比較表を作成するには 2 つのオプションがあります。 CSVファイルをアップロードする データを使用するか、カスタム テーブルを作成します。

CSVファイルでテーブルを作成

最も優れている点は、商品のデータを整理して CSV ファイルに挿入した場合、そのファイルを直接アップロードしてテーブルを作成できることです。このためには、ページエディターに移動し、編集を選択します。次に、コンテンツ タブから、データ タイプとして CSV を選択します。

テーブル データをアップロードするには 2 つのオプションがあります。 リモート URL を選択してください Google スプレッドシートの、または直接 CSVファイルをアップロードする WordPress メディア ライブラリに追加します。

テーブルのCSVファイルをアップロードする方法

比較データを追加したCSVファイルを選択してアップロードします。比較表が自動で作成されます。または、Google シートのパブリック リンクをリモート URL フィールドに挿入します。

カスタムの場合は、次のステップを確認してください。 

ステップ 4: カスタム比較テーブルをカスタマイズする

WordPress でカスタム比較表を作成したい場合は、 'カスタム' データ型として。デフォルトのテーブルがページ内に作成されます。その後、テーブルフィールドを無制限にカスタマイズできます。たとえば、行、列、画像などを追加できます。

テーブルヘッダーをカスタマイズする

比較表を魅力的なものにするために、コードを記述せずに色、間隔、境界線などをカスタマイズできます。

カスタム テーブルに新しい列を追加するとします。これを行うには、ウィジェットのエディターセクションに移動します。表セクションの下で、「項目を追加」をクリックします。新しい列が作成されます。同様に、列をさらに追加することもできます。

テーブルに新しい列を追加する方法

新しい行を追加するには、 「本文の内容」 タブをクリックして 「アイテムを追加」。次に、設定から新しい行を有効にすると、新しい行が作成されます。 「行」タブの下に、テキストを追加するオプションが表示されます。

製品画像を追加して、製品比較表を作成することもできます。見出しに写真を追加したいとします。これを行うには、テーブル設定に移動し、画像を追加する列をクリックします。次に、表示したい画像を選択します。

比較テーブル用の画像ヘッダーをアップロードします

画像のパディング、マージン、その他の設定を変更するには、次の場所に移動します。 [スタイル]タブ > ヘッダー画像 > 高さ幅を有効にする ウィジェットエディターから。次に、画像のサイズを調整します。

商品画像を1つずつ選択してアップロードします。

ヘッダー画像をカスタマイズする

ステップ 5: プレビューと公開

最後に、作成した比較表を確認します。ページエディターの下部には、プレビューというオプションがあります。そのボタンを押して、作成したテーブルを確認してください。  

その他のテーブル スタイルを確認する ElementsKit ページ ビルダー アドオンを使用して設計されています。

WordPress比較表が完成しました

WordPress比較表とは何ですか?

比較テーブルは、データを含む標準テーブルとほぼ同じように見えます。ただし、比較表には、製品機能間の詳細な比較が示されています。 

比較表を表示するメリット

なぜサイト訪問者に比較表を表示する必要があるのか疑問に思いませんか?そうですね、特定のニッチ分野で顧客向けに複数の製品がある場合、顧客は混乱することが一般的です。比較表は、各オプションの詳細な機能を確認して、顧客が決定を下すのに役立ちます。

アフィリエイトマーケティングの場合、 製品間の詳細な比較を示す あなたがレビューしていることは非常に重要です。なぜなら、読者は多くの場合、製品に関する詳細な文章を読むことに興味がないからです。

代わりに、すべてを表に表示することで、データを読みやすく、必要な情報を取得することが容易になります。ユーザーフレンドリーな比較表により、「クリックスルー率」とコンバージョン率も向上します。

プラグインなしで比較表を作成できますか?

ページの特定のカスタマイズにプラグインの使用を誰かに勧められたとき、最初に頭に浮かぶのは何ですか? 「プラグインなしでやるのはどうですか!」右?

一つはっきりさせておきます。プラグインなしでいつでも WordPress 内にページやさまざまなセクションを作成できます。ただし、カスタマイズのオプションは限られます。そのため、特定のプラグインを使用することが最善の解決策となります。特に ElementsKit ページビルダー アドオンを使用すると、無限のオプションが得られます。

ElementsKit が WordPress で比較表を作成する理由

ElementsKit は最も軽量な Elementor アドオンの 1 つで、オプションのオン/オフを切り替えて読み込みを高速化できます。必要に応じて 1 つの機能を使用し、他の機能をオフにすると、プラグインは読み込み中にそれらの関数を呼び出すことがなくなります。

比較表を作成する以外にも、他にもさまざまなことができます。実際に、 ElementsKit ページビルダー コードを書かずに、まったく新しい WordPress Web サイトをデザインできます。

デザインすることができます ポートフォリオウェブサイト, ビジネスウェブサイト, ドロップシッピングウェブサイト, SaaS ウェブサイト、 もっと。

また、ElementsKitの機能はテーブルの作成だけではありません。テーブルウィジェットと同様に、 85以上のウィジェットがあります、既製のテンプレート、15 個以上のモジュールなど。

まとめ

上記のステップバイステップガイドに従った場合は、WordPress で使いやすい比較表を作成したことになります。テーブルの幅広いスタイルを選択してテストできます。ユーザーに最高のエクスペリエンスを提供するよう努めてください。

コメント

  1. Clean10xのアバター
    クリーン10x

    無料版はありますか?

    1. ハシブのアバター
      ハシブ

      はい、そうです。無料版は次の場所で試すことができます https://wordpress.org/plugins/elementskit-lite/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です