WordPress で見事なタブ付きコンテンツ用のタブを作成する方法

WordPress でタブを作成する方法を学びたいですか?

WordPress Web サイトにタブを追加することは、さまざまな種類のコンテンツを整理し、投稿やページのスペースを節約する優れた方法です。

この記事では、WordPress にタブを追加する方法を順を追って説明します。

タブ付き WordPress コンテンツが必要な理由

コンテンツの並べ替えに加えて、タブを使用すると、Web サイトの訪問者をアクティブに保ち、エンゲージメントを維持することがはるかに簡単になります。 タブはコンテンツ トピックを 1 つのページにグループ化するため、ユーザーはクリックして別のページに移動する必要がなく、注意力が短い場合に最適です。

たとえば、WordPress.org はプラグイン ページのタブを使用して、詳細、レビュー、サポート、開発などの情報を表示します。

タブを使用するその他の方法には、次のようなものがあります。

• 製品説明で異なる製品仕様を示す
• ブログのサイドバーでカテゴリをフィルタリングする
• 連絡先ページで連絡先情報を並べ替える

プロのヒント:タブをアコーディオンと混同しないでください。 ユーザーはタブをクリックして情報を切り替えますが、アコーディオンは展開して情報を表示します。

タブの仕組みとタブが必要な理由について理解が深まったところで、WordPress サイトにタブを追加する方法を見てみましょう。

以下では、WordPress にタブを追加する 2 つの方法を紹介します。 まず、ページ ビルダーを使用し、次に WordPress プラグインを使用してタブを作成する方法を示します。

始めましょう。

方法 1: ページ ビルダーを使用して WordPress でタブを作成する方法

最初の方法では、最高の WordPress ウェブサイト ビルダーである SeedProd を使用して、タブ付きコンテンツをウェブサイトに追加します。

SeedProd は強力なドラッグ アンド ドロップ ページ ビルダーで、コードを書かずに柔軟な WordPress レイアウトを作成できます。 プロ仕様の Web サイト キット、ランディング ページ テンプレート、ライブ ビジュアル エディターを使用して、サイトのあらゆる部分をカスタマイズし、リアルタイムで変更を確認できます。

SeedProd を使用して次のこともできます。

• カスタム WordPress テーマを作成する
• WooCommerce ウェブサイトを構築する
• コンバージョン率の高いランディング ページを作成する
• サイトをメンテナンス モードにする
• そして、はるかに

このページ ビルダーには、WordPress のデザインを強化するための高度にカスタマイズ可能なブロックも含まれています。 たとえば、このガイドで使用するタブ ブロックを使用すると、数回クリックするだけで複数のタブをページに追加できます。

WordPress で SeedProd を使用してタブを作成するには、次の手順に従います。

ステップ 1. SeedProd Website Builder をインストールする

まず、SeedProd Web サイトにアクセスしてプラグインをダウンロードする必要があります。 SeedProd には無料版があります。 ただし、タブやその他のブロックのロックを解除するには、プレミアム プランが必要です。

プラグインをダウンロードしたら、WordPress サイトにインストールして有効化する必要があります。 WordPress プラグインをインストールしたことがない場合は、次の手順に従って WordPress プラグインをインストールできます。

プラグインを有効化したら、 SeedProd » 設定に移動し、プラグインのライセンス キーを入力します。

SeedProd ライセンス キーは、アカウント ダッシュボードの [ダウンロード] セクションにあります。

次の手順に進む前に、[ Verify Key ] ボタンをクリックすることを忘れないでください。

ステップ 2. WordPress のテーマまたはランディング ページを作成する

SeedProd を使用して Web サイトにタブを追加するには、次の 2 つの方法があります。

1. テーマ ビルダーを使用してカスタム WordPress テーマを作成し、任意の WordPress ページにタブを追加します。
2. ドラッグ アンド ドロップ ページ ビルダーを使用して、タブ付きコンテンツを含むスタンドアロンのランディング ページを作成します。

このガイドでは、ホームページ、WordPress サイドバー、ヘッダー、フッター、およびテーマ内の任意の場所を含む任意のページにタブを追加できるため、最初のオプションを使用します。

このステップバイステップ ガイドに従って、SeedProd で WordPress テーマを作成してから、ここに戻って、サイトにタブを追加する手順を確認してください。

ステップ 3. WordPress ページにタブを追加する

WordPress テーマを作成したら、どのページにタブ付きコンテンツを含めるかを決定する必要があります。 たとえば、連絡先ページにタブを追加して、さまざまな種類の連絡先情報を表示したり、さまざまな投稿カテゴリのカスタム サイドバーに表示したりできます。

この例では、about ページにタブを追加して、求人情報、編集ガイドラインなどの詳細を表示します。

これを行うには、WordPress 管理画面から [ページ] » [すべてのページ] に移動し、編集するページを見つけます。

SeedProd Web サイト キットを使用しているため、概要、連絡先、サービス ページなどのコンテンツ ページが自動的に作成されます。 それらをビジュアル エディタで開くには、[ Edit with SeedProd ] リンクをクリックします。

ページ ビルダーでページが開いたら、SeedProd のカスタマイズ オプションを使用して変更を加えることができます。 任意の要素をクリックして、その内容、色、スタイル、および可視性を変更できます。

ブロック パネルから要素をドラッグ アンド ドロップすることで、ページに要素を簡単に追加することもできます。 それでは、SeedProd のタブ ブロックでそれを行いましょう。

まず、ページに新しいセクションを追加して、タブ付きコンテンツを「収容」します。 この例では、既存のセクションの 1 つを複製し、ページの下部にドラッグします。

その後、画像をより関連性の高いものに交換し、不要になったコンテンツをゴミ箱アイコンをクリックして削除します。

これで、左側のパネルでタブブロックを探して、ページの新しいセクションにドラッグできます。

ブロックをクリックすると、そのコンテンツ設定が表示され、次のことができます。

• 複数のタブを追加する
• タブ アイコンを表示または非表示にする
• フォントサイズを変更する
• タブ間のスペースを増減する
• タブの配置を調整する

各タブを展開すると、タブ タイトルを追加し、「見たままに」(WYSIWYG) 設定の従来のエディターを使用してコンテンツを作成できます。

カスタム アイコンを有効にして、タブに興味を持たせ、目立たせることもできます。 [タブ アイコンを非表示] トグルを [オフ] の位置に切り替えて、Font Awesome ライブラリからカスタム アイコンを選択するだけです。

[詳細設定] タブをクリックすると、カスタムの背景色、フォント、境界線、間隔など、より多くのカスタマイズ オプションを選択できます。

いずれかのレイアウト オプションをクリックして、垂直タブまたは水平タブ セットを表示することもできます。

画面の右上隅にある [保存] ボタンをクリックして、変更を保存することを忘れないでください。

同じ手順に従って、WordPress Web サイトの他のページにタブを追加してから、次の手順に進んで変更を有効にします。

ステップ 4. タブ付きコンテンツを公開する

さまざまな WordPress ページにタブを追加したら、Web サイトの訪問者が表示できるようにタブを公開する準備が整いました。

これを行うには、 SeedProd » テーマ ビルダーページに移動し、[SeedProd テーマを有効にする] トグルを [オン] の位置に切り替えます。

ページをプレビューして、タブ化されたコンテンツの動作を確認できるようになりました。

方法 2: WordPress プラグインでタブを追加する方法

WordPress のテーマを変更したり、ランディング ページを作成したりしたくない場合は、次の方法が適しています。 無料の Tabs Responsive WordPress プラグインを使用して、WordPress サイトにレスポンシブ タブを追加します。

まず、タブ レスポンシブ プラグインをインストールし、WordPress 管理者から有効化する必要があります。

次に、 Tabs Responsive » Add New Tabsに移動し、タブ セットにタイトルを付けます。

そこから、デフォルトのテンプレートを選択できます。または、Pro バージョンを使用している場合は、18 以上のテンプレート スタイルから選択できます。

次のステップは、タブを追加することです。 好きなだけタブを作成して、次のものを含めることができます。

• タブのタイトル
• タブの説明
• タブのアイコン

カスタム タブ スタイル、背景色、フォント色などを選択して、右側のサイドバーで各タブのスタイルを編集することもできます。

タブに満足したら、タブのショートコードをコピーして、WordPress テーマの任意の場所に貼り付けます。

たとえば、次のようにショートコードを WordPress の投稿またはページに貼り付けることができます。

これは、サイトのフロント エンドでどのように表示されるかです。

ショートコードを段落ブロックに貼り付けることで、WordPress サイドバーやフッター ウィジェットなどのウィジェット対応領域にタブ ショートコードを追加することもできます。

その後、タブ付きコンテンツがサイドバー領域に表示されます。

そこにあります！

このチュートリアルでは、コードを書かずに WordPress でタブを作成する方法を学びました。 Web サイトにカスタマイズ可能なタブを作成する準備はできましたか?

ここにいる間、これらの他の役立つ WordPress ガイドも気に入るはずです。

• WordPressでテキストアニメーションを作成する方法（簡単な手順）
• WordPress Web サイトの派手なセクション区切りを作成する方法
• WordPress に著者ボックスを追加する方法 (プラグインなし)

読んでくれてありがとう。 YouTube、Twitter、Facebook でフォローして、ビジネスの成長に役立つコンテンツを入手してください。