WordPressはタブを使ってフィールドの内容をグループ化して表示する。

あるワードプレスウェブコンテンツ管理では、商品ページ、コースページ、カスタム記事タイプを扱うとき、例えば、詳細を保持するために多くのフィールドを使用することがよくあります：

製品パラメータ（モデル、重量、材質）
コース内容（導入、シラバス、講師紹介、FAQ）
サービス内容（サービス範囲、料金説明、利用方法）

すべてのフィールドのコンテンツが同じページ内に積み重ねられていると、ユーザーは読むのに混乱し、ページの専門性と美観が損なわれる。

を使用する方法について説明します。タブタブはフィールドの内容を表示するためにグループ化される。

I. タブタブの利点

タブタブ（タブの切り替え）が可能：

異なるタイプの情報をグループ化して表示する
控えめにウェブページ長すぎるコンテンツを避けるための長さ
ページの美観と専門性を高める
ユーザーが必要な情報を素早く見つけられるようにする

第二に、コードなしで、フィールドの内容の生産タブタブページメソッド

初心者の方には、次のような使い方をお勧めします。 ページ編集プラグイン 例えば、タブ機能を実装する：

方法1：Elementorの無料版を使う

エレメンタ WordPressでよく使われるページエディターのひとつで、無料版にはタブウィジェットが付属しており、簡単に操作できる。

ステップ

1.WordPressの背景で[ページ]をクリックし、編集したいページを選択して[Elementorで編集]をクリックします。

2.左側の「タブ」を検索し、ドラッグ＆ドロップする。 タブウィジェット ページに戻る

3.各タブのタイトルと内容を編集する。

4.内容がフィールドから来ている場合は、フィールドの内容をコピーして、対応するタブに貼り付けることができます。

例

タブ1 タイトル：製品概要
タブ1 内容：商品説明欄をコピー＆ペーストする
タブ2 タイトル：製品パラメーター
タブ2 目次：パラメータ・フィールドのコピー＆ペースト
タブ3 タイトル：よくある質問
タブ3 内容：コピー＆ペーストよくあるご質問フィールド

5.ページを保存するには、[更新]をクリックします。

方法2.Gutenberg Editor Blockプラグインを使う

WordPressのデフォルトエディタ(グーテンベルク)、例えばタブ機能をサポートするブロックプラグインをインストールすることができます：

ケイデンス・ブロック
Spectra (旧称：Ultimate Addons for Gutenberg)

ステップ

プラグインをインストールして有効化する（バックグラウンドの[プラグイン]→[プラグインのインストール]でプラグイン名を検索する）

ページを編集する際、ブロック選択で「タブ」を検索する。

タブ・ブロックを挿入し、必要な数のタブを追加する。

各タブに対応するフィールドの内容を貼り付ける
更新ページ

方法3.テーマ付属のタブ機能を使う。

いくつかの高度なテーマ（例えばアストラ・プロタブコンポーネントはBlocksy Proに付属しており、プラグインをインストールすることなく、ページ編集中に直接挿入することができます。

タブのグループ化アプリケーションノートの表示

タブタブを使用すると、ページ内の多くのページを移動できます。フィールドコンテンツを論理的に分割することで、全体的な構造をわかりやすくしています。例えば、イントロダクション、パラメーター、よくある質問、使用方法、その他の情報を別々に配置し、訪問者がスイッチをクリックして必要なコンテンツを表示できるようにすることで、ページのコンテンツが連続的に積み重なることによる視覚的な混乱を避けることができます。

タブをデザインする際、フィールドのコンテンツタイプに基づいてグループ化の順序と名前を決定し、各タブが理解しやすく読みやすいコンテンツの独立したブロックを提示するようにできます。

ヒント

タブタグの内容は、論理的に分離して配置するのに適しています。コンテンツブロック
ユーザーにとって難しい選択を避けるため、タブの数は3〜5個に制限することを推奨する。

各タブ内のコンテンツはできるだけシンプルにし、核となる情報を優先する。

V. まとめ

タブタブを使ってフィールドのコンテンツをグループごとに表示することで、ページがすっきりし、ナビゲートしやすくなり、全体的なデザインもよりプロフェッショナルなものになる。WordPress初心者の方は、Elementorを使うだけでコードは不要です、ケイデンス・ブロックテーマがコンポーネントと一緒に提供されている場合は、簡単です。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み