トグルを使ったWordPress価格表の作り方

ウェブサイトを通じて商品やサービスを販売したい場合、価格表の作成は必須です。しかし、顧客がページを離れることなく簡単に比較できる複数の料金プランを表示するには、テーブルにトグル機能を追加する必要があります。

トグル機能により、ユーザーは異なる料金オプションのセットをナビゲートまたは切り替えることができ、インタラクティブなインターフェイスを作成できます。例えば、ユーザーは月額プラン、年間プラン、ライフタイムプランを切り替えることができます。

このブログでは、トグル付きのWordPressテーブルの作り方をステップ・バイ・ステップでご紹介します。それでは始めましょう。

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

チュートリアルに入る前に、以下のものが必要です。テーブルバーグそしてアルティメット・ブロックプラグインをインストールしてください。TableBergを使えば、価格テーブルを作成することができ、Ultimate Blocksを使えば、テーブルにトグル機能を追加することができます。

あなたのサイトにプラグインをインストールしたら、チュートリアルのプロセスに飛び込んでください。

Ultimate Blocksプラグインがインストールされ、有効化されると、次のような画面が表示されます。タブ付きコンテンツをブロックライブラリに追加します。ブロックを見つけてエディターに追加します。

タブコンテンツ・ブロックは即座にエディターに追加されます。

タブ付きコンテンツ・ブロックでは、その中に他のブロックを追加することができます。をクリックしてください。 プラス（＋）ボタン.TableBergブロックを見つけて追加する。

表の行数と列数を定義する。ここでは3列の表を作成したいので、3*3を選択しています。

テーブルレイアウトの準備が整ったのがわかるだろう。

TableBergブロックでは、様々なタイプのコンテンツをセルに追加することができます。テキスト、リスト、画像、CTAボタンなどを追加できます。

# 列タイトルの追加

まず、テーブルのカラムにタイトルを追加する必要があります。ここでは架空のプラグインの価格表を作成する。そのため、コンテンツはそれに応じたものになります。

タイトルを3つ追加し、中央に配置し、サイズを大きくしているのがわかるだろう。

# 料金プランの追加

次に、カラムに料金プランを追加します。GutenbergツールバーのHighlightオプションを使って色を付けました。

# 製品特長一覧

それでは、各プランの特徴を挙げていきましょう。TableBergでは リストブロック をテーブルに追加する。Listブロックを見つけてテーブルに追加する。

各プランの特徴をすべての欄に列挙したのがおわかりいただけるだろう。

# CTAボタンの追加

最後に、CTAボタンをカラムに追加します。 ボタンブロック.

CTAボタンは価格表の上に準備されています。

これでテーブルの準備は整った。このテーブルをさらにカスタマイズして、好きなようにスタイリングすることができる。一人でできることを祈っている。

をクリックして新しいタブを作成します。 プラス（＋）アイコン.タブの名前をあなたの好みに変更することをお忘れなく。

上で説明したのと同じ方法で、このタブに新しいテーブルを作成する。より見やすくするために、タブのタイトルを中央揃えにしました。

これでトグル機能付き価格テーブルの準備は完了です。新しいタブでテーブルをプレビューし、すべてが問題なく動作していることを確認してください。

結論

トグル機能を使って価格テーブルを作成することは、今やほとんどすべてのスタンダードクラスのウェブサイトが採用しているスマートさである。ほとんどのウェブサイトは、ページビルダーや同様のタイプのソリューションを使用して作成しており、ページが重くなることがよくあります。

ただし、TableBergとUltimate Blocksはブロックベースのプラグインなので、価格設定ページが重くなることはありません。ステージングサイトやローカルホストでテストすることもできます。軽くて速いスピードが楽しめます。

下のコメント欄にご意見をお聞かせください。また、ご質問があれば遠慮なくお尋ねください。