長ったらしいウェブページをスクロールしながら、必要な情報を正確に探し出すのに苦労したことはないだろうか。イライラしますよね？その解決策は、折りたたみと展開が可能なコンテンツにあります。折りたたみと展開が可能なコンテンツは、情報を整理するシンプルで効果的な方法です。
このテクニックを使えば、ページをすっきりと見やすく保ちながら、詳細なコンテンツを提示することができます。FAQであれ、商品説明であれ、ブログ記事であれ、折りたたみ可能なセクションはユーザビリティとエンゲージメントを高めます。
良いニュースは？それを実装するためにコーディングに没頭する必要はない。WordPressでは、Ultimate Blocksプラグインのようなツールを使えば、驚くほど簡単に実装できる。Ultimate Blocksは、Gutenbergユーザーのために特別に設計されたプラグインで、以下のような機能を提供します。 コンテンツ・トグル そして ブロック拡大 を使用して、インタラクティブで折りたたみ可能なセクションを作成できます。
方法1：Ultimate Blocksプラグインを使う
ステップ1：Ultimate Blocksプラグインをインストールする
WordPressのダッシュボードに移動して "プラグイン" セクションで "新規追加" タイプ 「究極のブロック を検索バーに入力し、検索結果でプラグインを見つけ 「今すぐインストール そして "アクティベート"
ステップ2：コンテンツ・トグル・ブロックを追加する
折りたたみ可能なコンテンツを追加したい投稿またはページを開きます。折りたたみ可能なコンテンツの "+"アイコン WordPressエディターで新しいブロックを追加し、"Content Toggle "を検索して選択します。
ブロックを追加すると、トグル・ブロックが閉じた状態で表示されます。矢印をクリックしてブロックを展開し、コンテンツのタイトルを 「パネルタイトル フィールドのメインコンテンツとなる。 「パネル・コンテンツ ボックス。
複数の展開または折りたたみ可能なセクションが必要な場合は ＋ボタン をクリックして新しいトグルを挿入します。同様に、特定のトグルが不要な場合は、ブロックの最後にあるxボタンをクリックします。
ステップ3：コンテンツ・トグル・ブロックをカスタマイズする
ブロックを選択すると、ダッシュボードの右側にブロック設定パネルが表示されます。そこには2つのタブがあります： 一般設定とスタイル。
の中で 一般設定 タブを使用することができる：
- を調整する。 パネルタイトル 適切な階層のために。
- トグル・ステートを設定して、ページがロードされたときにパネルを折りたたむか開くかを制御する。
- 有効にする FAQスキーマ 検索エンジンの結果での可視性を向上させる。
- 用途 レスポンシブ・コントロール をクリックすると、特定のデバイスでブロックが非表示または表示されます。
- 追加 検索ボックス FAQを簡単にナビゲートできます。ただし、この機能はプロユーザーに限定されています。
では、次に スタイルタブ色の調整、ボーダーの有効化、トグル・アイコンのスタイルと位置の設定、パディングとマージンの微調整ができる。
問題がなければ、"Publish "または "Update "をクリックし、公開する。
方法2：エキスパンド・ブロックを使う
ステップ 1: 拡張ブロックの追加
折りたたみ／展開可能なコンテンツが必要なページまたは投稿に移動します。もう一度「＋」アイコンをクリックして新しいブロックを追加し、「展開」を検索して選択します。
ステップ2：ブロックにコンテンツを追加する
ブロックは2つのセクションを提供します：1つは可視コンテンツ（最初に表示される）、もう1つは非表示コンテンツ（クリックすると表示される）です。最初のセクションの"もっと見る"テキストを挿入する。残りのコンテンツは、" "の下にある隠しセクションに配置する。もっと見る「という文章がある。
をクリックする。 + 符号 をクリックし、お好みのブロックを選択し、後でブロックにコンテンツを追加します。をカスタマイズすることができます。もっと見る"と"ショー・レス" テキストをあなたのコンテンツや読者に合うように変更できます。デフォルトのテキストをクリックし、希望のラベルに置き換えるだけです。
ステップ 3: 拡張ブロックのカスタマイズ
無料版では、スクロール設定、レスポンシブコントロール、スタイルタブでの寸法調整など、限られたカスタマイズしかできない。しかし、プロバージョンにアップグレードすると、最小化されたコンテンツのフェード効果を選択することができます（一般設定で利用可能）。また、ボタンのスタイル、背景色、ボーダー、半径をカスタマイズして、より洗練された外観にすることもできます。
結果に満足したら、"Publish "または "Update "をクリックして変更を保存し、サイトに表示します。
結論
この記事の目的は、WordPressで折りたたみと展開が可能なコンテンツを作成し、すっきりとした見やすいレイアウトを維持することです。アルティメットブロックを使えば、コーディングなしで、しかもユーザビリティもデザインもシンプルにすることができます。利用者のニーズを理解することは非常に重要です。折りたたみ可能なコンテンツを最も価値のある場所に実装し、最適なブラウジング体験のためにすべてがスムーズに機能するようにします。このような小さな変更が、訪問者とあなたのサイトとの関わり方を一変させることを心に留めておいてください。
