ユーザーが異なる状態やオプションを切り替えることができるシナリオを想像したい場合、トグルボタンは完璧なソリューションです。これらのボタンは、ページスペースを取らずに、ユーザーにオプションへの素早いアクセスを提供します。例えば、月額と年額の切り替え、詳細表示と概要表示の切り替え、ライトモードとダークモードなどの表示設定に最適です。
WordPressはトグルボタンをネイティブでサポートしていませんが、Ultimate BlocksのTabbed Contentブロックを使えば、その機能を簡単に再現することができます。このプラグインは多機能で、他の多くのオプションとは異なり、シンプルなタブをわずかな調整で切り替え可能な状態に変換できる幅広いブロックセットを提供しています。
このガイドでは、このプラグインを活用して、洗練されたユーザーフレンドリーなトグルボタン効果を実現する方法をご紹介します。さっそく始めましょう。
ステップ1：Ultimate Blocksプラグインをインストールする
WordPressのダッシュボードにログインし、次のページに移動します。 プラグイン > 新規追加。 検索バーに 「究極のブロックをクリックする。 インストール.インストール後、 アクティブ化 the plugin.
ステップ2：タブ付きコンテンツブロックを追加する
アルティメットブロックがアクティブになったら、トグルボタンをどこに追加するかを決めます。新しいページや投稿を開くこともできますし、既存のものを続けることもできます。
WordPressのエディターから /タブコンテンツ をクリックするか + アイコン をクリックしてブロックライブラリを開きます。アイコンを使う場合は、次のように入力する。 「タブコンテンツ を検索バーで見つけてください。 タブ付きコンテンツ・ブロック をクリックして、あなたのページや投稿に挿入してください。
エディターにブロックを追加すると、このようなインターフェイスが表示されます。
この時点では、ブロックはまだトグルボタンに似ていない。今必要なのは、ブロックの設定を少し調整して、ユーザーが表示されているコンテンツ・セクション間を移動できるトグル・ボタンのような設定に近づけることだ。
ステップ3：タブ付きコンテンツ・ブロックのカスタマイズと設定
ブロックを選択した状態で 設定 を選択します。を選択する。 丸薬 スタイルを設定に追加することで、各タブがタブの代わりにボタンのように見えるようになります。
次に、ブロックの alignment を中央に寄せて、トグル・ボタンのように見えるようにした。
さて、トグル状態を作るには、少なくとも2つのタブが必要だ。単に + 符号 をクリックし、別のタブを追加します。さらにタブを増やしたい場合は、同じ手順で追加します。
そうすれば、別々のタブが使えるようになる。次に必要なのは、色設定の助けを借りて、これらのタブをトグルボタンに変換することです。
しかし、その前に、 リネーム タブに異なるラベルを貼り、異なるトグル状態を表す。 スタイル設定 を右サイドバーに表示します。そこから カラー設定 をクリックすると、各タブに対照的な色が追加され、アクティブなタブがより明確になります。
この時点で、トグルボタンの準備は完了です。あとはコンテンツを追加するだけです。各タブの中をクリックして 特定のコンテンツを追加する.テキスト、画像、ビデオ、またはあなたのニーズに合ったブロックを含めることができます。をクリックするだけです。 + 符号 をクリックし、お好きなコンテンツの関連ブロックを追加してください。
その後、各タブに関連コンテンツを追加します。ここでは、両方のタブに段落、見出し、リストブロックを使用した価格セクションのサンプルを作成しました。各ブロックの色はカラーセクションで指定できます。 コンテンツの背景 ブロック全体の
ステップ4：プレビューと公開
を使用する。 プレビュー オプションを使用して、タブがトグルボタンとしてどのように機能するかをテストしてください。各タブが正しいコンテンツ・セクションを開くかどうかをチェックしてください。見た目と機能に満足したら 公開または更新 をクリックしてください。これで、トグルボタンエフェクトはライブになり、ユーザーにコンテンツセクション間を簡単に切り替える方法を提供する準備が整いました。
結論
以下のステップに従うことで、標準のタブを完全に機能するトグルボタンに変えることができます。この設定により、コンテンツレイアウトが改善され、アクセスしやすくナビゲートしやすくなります。訪問者は、異なる価格の検索、追加詳細の表示、表示の好みの選択など、オプションを即座に切り替えることができます。この小さな追加機能は、サイトに明瞭性と柔軟性をもたらし、ページをすっきりと整理しながら、ユーザーがそれぞれの条件でコンテンツを探索できるようにします。
