WordPressサイトで、異なるコンテンツや価格オプションを素早くきれいに切り替える方法をユーザーに提供したいですか？トグルボタンは完璧なソリューションです！
トグルボタンを使えば、訪問者はページを乱雑にすることなく、月額と年額、ライトモードとダークモード、あるいはまったく異なるコンテンツセクションなど、2つ以上のオプションを即座に切り替えることができます。
この記事では、WordPressサイトにトグルボタンを追加する2つの簡単な方法をご紹介します：
- Method 1: あらゆるタイプのコンテンツ（テキスト、画像、フォームなど）にトグルボタンを追加できます。
- Method 2: 価格テーブルやあらゆるタイプの表形式データ用のトグルボタンを追加する。
さあ、飛び込もう！
方法1：あらゆるタイプのコンテンツにトグルボタンを追加する
ユーザーが異なるコンテンツブロックを切り替えられるようにしたい場合、例えば次のようにします。 FAQs製品詳細や機能セットが異なる場合は、この方法をご利用ください。
私たちは アルティメット・ブロック プラグインは、あらゆる種類のコンテンツに対応する多目的なContent Toggle (Tabbed Content)ブロックを提供します。
ステップ1：Ultimate Blocksプラグインをインストールする
- WordPressのダッシュボードにアクセスする。
- プラグイン > 新規追加.
- Ultimate Blocks "を検索し、インストール／有効化する。
ステップ2：タブ付きコンテンツブロックを追加する
- WordPressのエディタで投稿またはページを開きます。
- タイプ
/タブコンテンツまたは+アイコンを使ってタブ付きコンテンツブロックを追加します。
タブ付きコンテンツ」ブロックは次のようになります。
ステップ 3: ブロックのトグル機能のカスタマイズ
ブロックを選択し ピルズスタイル タブをボタンのように見せる）。
中央揃えでクラシックなトグルを演出。
をクリックする。 + 符号 をクリックし、最初のタブの横に別のタブを追加する。少なくとも2つのタブを追加する（「月間」と「年間」、「詳細」と「サマリー」など）。トグルのオプションに合わせてタブの名前を変更する。
どのタブがアクティブなのかが一目瞭然になるように、「色の設定」を使って対照的な色を設定しましょう。
ステップ4：コンテンツを追加する
各タブの中をクリックして、お好みのコンテンツ（テキスト、画像、リスト、フォーム、またはその他のブロック）を追加してください。
タブの背景やコンテンツの色など、必要に応じてカスタマイズしてください。
ステップ5：プレビューと公開
- トグルをテストするにはプレビューオプションを使用します。
- 問題がなければ、ページを公開または更新してください。
それだけだ！ これで、WordPressサイトのあらゆるタイプのコンテンツに対応する柔軟なトグルボタンができました。
方法2：価格表（およびその他）のトグルボタンを追加する
月間価格表と年間価格表を切り替えて表示したり、異なるデータセットを並べて比較したりしたいですか？その場合は Tableberg用トグル Tablebergプラグインのブロックはそのために設計されています！
と TablebergプロのToggleブロックを使用すると、価格プラン、製品比較、多言語テーブル、または複数のテーブルが意味を持つ任意のシナリオに最適な、クリック可能なタブに任意の数のテーブルを整理することができます。
ステップ1：「Tableberg用トグル」ブロックの挿入
- WordPressのエディタで投稿またはページを開きます。
- プラス）アイコンをクリックし、"Toggle for Tableberg "を検索する。
- ブロックをページに追加します。
ステップ2：タブの設定とカスタマイズ
- デフォルトでは、"タブ1"、"タブ2"、"タブ3 "と書かれた3つのタブが表示される。
- または-アイコンを使用して、必要に応じてタブを追加または削除します。
- 各タブの名前を変更する（例えば、「毎月」、「毎年」、「基本プラン」、「プロプラン」など）。
- 右側のオプションパネルを使用して、タブのタイトル、配置、色、ボーダーを調整し、ブランディングされた外観を実現します。
ステップ 3: テーブルを追加する
- 各タブをクリックすると、中にユニークなテーブルが追加されます。
- ゼロから新しいテーブルを構築するか、あらかじめ構築されたTablebergテーブルパターンを挿入する。
- 各タブは、機能比較、価格設定、データセットなどに最適な、まったく異なるテーブルを保持することができます。
一般的な使用例
- 価格表： 月額と年額、または異なるプランを切り替えられるようにする。
- データ比較： 地域データ、異なる製品仕様、または性能指標を別々のタブで表示します。
- 教育的内容： レッスンやコースの資料を整理して、ナビゲーションを容易にします。
- 多言語テーブル： 海外からの訪問者のために、同じデータを異なる言語で表示する。
ステップ4：プレビューと公開
- トグルタブをプレビューして、すべてが期待通りに見え、動作することを確認してください。
- 準備ができたら、投稿/ページを公開または更新してください。
価格テーブルのトグルの例を示します。
結論
WordPressサイトにトグルボタンを追加することで、ナビゲーションを改善し、スペースを節約し、訪問者が料金プランの切り替え、詳細の表示、データの比較など、気になるコンテンツにすぐにアクセスできるようになります。
- どのタイプのコンテンツでも アルティメット・ブロック を使えば、フレキシブルなトグルを数秒で作ることができる。
- 価格表やより高度なテーブルレイアウトについては、以下をお試しください。 Tablebergプロのトグル・ブロック シームレスなタブ体験のために。
あなたのサイトでこれらの方法を試し、コンテンツをよりインタラクティブでユーザーフレンドリーにしましょう。ご質問がありますか？コメントでお知らせください！
