WordPressのページを見やすくしたいですか？私のお気に入りの方法のひとつは、WordPressでタブを作成することです。整理整頓ができ、スペースを節約でき、どんなデバイスでも見栄えが良くなります。
タブはページ上の小さなフォルダのように機能します。訪問者はクリックするだけで、スクロールすることなく、必要な情報だけを表示することができます。
このガイドでは、コードを1行も書かずにWordPressでタブコンテンツを構築する方法をステップバイステップで紹介します。SeedProdを使った私のお気に入りの方法と、手っ取り早く代用できる無料のプラグインも紹介します。
タブ付きコンテンツを作成するクイックステップ
WordPressのタブとは？
タブはコンテンツを整理するナビゲーションシステムの一種で、訪問者がウェブサイトを閲覧しやすくなります。投稿やページにタブを追加したり、WordPressのサイドバーやウィジェットエリアにタブ付きコンテンツを表示するためのタブウィジェットを使用することができます。
なぜWordPressのタブ付きコンテンツが必要なのか？
コンテンツの並べ替えだけでなく、タブを利用することで、ウェブサイトの訪問者をアクティブな状態に保ち、興味を持たせ続けることが非常に簡単になります。タブはコンテンツのトピックを1つのページにまとめるため、ユーザーはクリックして他のページに移動する必要がありません。
例えば、WordPress.orgはプラグインページにタブを使い、詳細、レビュー、サポート、開発などの情報を表示している。
WordPressでタブを使う人気の方法：
- WooCommerceページの製品仕様とレビュー
- 部署や場所ごとに分かれた連絡先
- ブログフィルター（人気、最近、カテゴリー）
- タブ分けされたカテゴリーによるFAQセクション
- 価格段階またはサービス・パッケージ
プロのヒントタブをアコーディオンと混同してはいけません。ユーザーはタブをクリックして情報を切り替えますが、アコーディオンは展開して情報を表示します。
SeedProdを使ってWordPressにタブを作成する方法（コードなし）
最初の方法では、最高のWordPressウェブサイト・ビルダーであるSeedProdを使って、ウェブサイトにタブ・コンテンツを追加します。
SeedProdは、コードを書くことなく柔軟なWordPressレイアウトを作成できる強力なドラッグアンドドロップページビルダーです。プロフェッショナルなウェブサイトキット、ランディングページテンプレート、ライブビジュアルエディタにより、サイトのあらゆる部分をカスタマイズし、リアルタイムで変更を確認することができます。
また、SeedProdを使って次のようなこともできる：
- カスタムWordPressテーマの作成
- WooCommerceウェブサイトの構築
- コンバージョンの高いランディングページを作成する
- サイトをメンテナンスモードにする
- その他いろいろ
このページビルダーには、WordPressのデザインを向上させるための高度にカスタマイズ可能なブロックも含まれています。例えば、このガイドで使用するタブブロックを使えば、数回のクリックでページに複数のタブを追加することができます。
SeedProdを使用してWordPressにタブを作成するには、以下の手順に従ってください。
ビデオ・チュートリアル
お望みであれば、以下の記述された手順に従ってください。
ステップ1.SeedProdウェブサイトビルダーをインストールする
まず、SeedProdのウェブサイトへ行き、プラグインをダウンロードする必要がある。SeedProdには無料版もありますが、タブやその他のブロックをアンロックするにはプレミアムプランが必要です。
プラグインをダウンロードしたら、WordPressサイトにインストールして有効化する必要があります。WordPressのプラグインをインストールしたことがない方は、こちらの手順に従ってください。
プラグインを有効化した後、SeedProd " Settingsに移動し、プラグインのライセンスキーを入力します。
SeedProdライセンスキーは、アカウントダッシュボードのダウンロードセクションにあります。
次のステップに進む前に、忘れずに「Verify Key」ボタンをクリックしてください。
ステップ2.WordPressテーマまたはランディングページを作成する
SeedProdを使用してウェブサイトにタブを追加するには、2つの方法があります：
- テーマビルダーを使用してカスタムWordPressテーマを作成し、WordPressの任意のページにタブを追加します。
- ドラッグ＆ドロップでページビルダーを作成し、タブ付きの独立したランディングページを作成できます。
このガイドでは、ホームページ、WordPressのサイドバー、ヘッダー、フッターなど、テーマ内の好きな場所にタブを追加できるので、最初のオプションを使うことにする。
SeedProdを使用してWordPressテーマを作成するためのステップバイステップガイドに従うことができます。
ステップ3.WordPressページにタブを追加する
WordPressテーマを構築した後、どのページにタブコンテンツを設置するかを決める必要があります。例えば、コンタクトページにタブを追加して異なるタイプのコンタクト情報を表示したり、カスタムサイドバーに異なる投稿カテゴリーを表示したりすることができます。
この例では、aboutページにタブを追加し、求人情報や編集ガイドラインなどの詳細を表示します。
そのためには、WordPressの管理画面からPages " All Pagesに 行き、編集したいページを見つけてください。
SeedProdウェブサイトキットを使用しているため、about、contact、servicesページなどのコンテンツページが自動的に作成されます。これらをビジュアルエディタで開くには、「SeedProdで編集」リンクをクリックします。
ページビルダーでページを開いたら、SeedProdのカスタマイズオプションを使って変更を加えることができます。任意の要素をクリックして、その内容、色、スタイル、可視性を変更することができます。
また、ブロックパネルからドラッグして所定の位置にドロップすることで、ページに要素を追加することも簡単です。それでは、SeedProdのタブブロックを使ってやってみましょう。
まず、タブコンテンツを「収容」する新しいセクションをページに追加します。ここでは、既存のセクションを複製し、ページの一番下にドラッグします。
その後、画像をより適切なものに入れ替え、不要になったコンテンツはゴミ箱アイコンをクリックして削除する。
左側のパネルでタブブロックを探し、ページの新しいセクションにドラッグします。
ブロックをクリックすると、そのブロックのコンテンツ設定が表示される：
- 複数のタブを追加する
- タブアイコンの表示・非表示
- フォントサイズの変更
- タブ間のスペースを増減する
- タブの位置を調整する
各タブを展開すると、タブのタイトルを追加し、"what you see is what you get"（WYSIWYG）設定のクラシックエディタを使ってコンテンツを書くことができます。
カスタムアイコンを有効にして、タブを目立たせることもできます。タブアイコンを隠す」を「オフ」にして、Font Awesomeライブラリからカスタムアイコンを選んでください。
詳細設定]タブをクリックすると、カスタム背景色、フォント、ボーダー、スペーシングなど、より多くのカスタマイズオプションを選択できます。
また、いずれかのレイアウトオプションをクリックすることで、垂直タブまたは水平タブセットを表示することもできる。
画面右上の「保存」ボタンを忘れずにクリックして、変更を保存してください。
同じ手順でWordPressウェブサイトの他のページにもタブを追加し、次のステップに進んで変更をライブにします。
ステップ4.タブコンテンツを公開する
WordPressの様々なページにタブを追加したら、ウェブサイトの訪問者が見られるように公開する準備ができました。
これを行うには、SeedProd " Theme Builder ページに行き、'Enable SeedProd theme'トグルを'On'の位置に切り替えます。
これで、ページをプレビューして、タブ化されたコンテンツを実際に見ることができます。
無料プラグインでWordPressにタブを追加する方法
WordPressのテーマを変更したり、ランディングページを作成したりしたくない場合は、次の方法が良い選択肢となります。無料のTabs Responsive WordPressプラグインを使用して、WordPressサイトにレスポンシブタブを追加します。
まず、Tabs Responsiveプラグインをインストールし、WordPress管理画面から有効化する必要があります。
次に、タブレスポンシブ " 新しいタブを追加に 移動し、タブセットにタイトルを付けます。
そこから、デフォルトのテンプレートを選択するか、プロバージョンを使用している場合は、18以上のテンプレートスタイルから選択することができます。
次のステップは、タブを追加することです。好きなだけタブを作成することができます：
- タブタイトル
- タブの説明
- タブアイコン
また、タブのスタイル、背景色、フォントの色などをカスタマイズして、右側のサイドバーの各タブのスタイルを編集することもできます。
タブに満足したら、タブのショートコードをコピーしてWordPressテーマの任意の場所に貼り付けます。
例えば、ショートコードをWordPressの投稿やページに次のように貼り付けることができる：
あなたのサイトのフロントエンドではこのように表示されます：
また、WordPressのサイドバーやフッターウィジェットなどのウィジェット対応エリアに、ショートコードを段落ブロックに貼り付けることで、タブショートコードを追加することもできます。
タブ化されたコンテンツがサイドバーに表示されます：
タブの作成にはどの方法が最適か？
完全なデザインコントロールが必要で、すでにSeedProdを使用している場合は、ドラッグ＆ドロップ方式が最適です。高速で、視覚的で、既存のテーマやランディングページと連動します。古典的なテーマを使用していて、タブを挿入する迅速な方法が必要な場合は、Tabs Responsiveプラグインが堅実な無料オプションです。
WordPressでタブを作成する方法 FAQ
はい、プラグインを使わずにカスタムタブコンテンツを作成することは可能です。ただし、一般的にはHTML、CSS、JavaScriptの知識が必要です。タブコンテンツの機能を実装し、好みに合わせてスタイルを設定するために必要なコードを記述する必要があります。
はい、各タブの中に様々なタイプのコンテンツを表示することができます。テキスト、画像、動画、テーブル、フォーム、その他HTMLでサポートされているコンテンツを表示することができます。ほとんどのタブコンテンツ・プラグインは、各タブ内に様々なタイプのコンテンツを追加し、フォーマットするオプションを提供しています。
はい、タブコンテンツ・プラグインは通常、レスポンシブでモバイルフレンドリーに設計されています。これらのプラグインは、スマートフォンやタブレットを含むさまざまなデバイスで最適な表示とユーザビリティを確保するために、タブのレイアウトや動作、タブ付きコンテンツを自動的に調整します。
タブコンテンツは、商品情報や料金プランを整理して表示する効果的な方法です。製品の機能、仕様、価格、その他関連する詳細ごとにタブを作成し、ユーザーが興味のある情報を簡単に切り替えることができます。
WordPressサイトにカスタマイズ可能な洗練されたタブを数クリックで追加できます。SeedProdは、特にすでにページビルダーを使用している場合、そのプロセスを迅速かつ初心者に優しくします。
ウェブサイトにカスタマイズ可能なタブを作成する準備はできましたか？
このほかにも、WordPressのお役立ちガイドをご覧ください：
- WordPressでテキストアニメーションを作成する方法（簡単なステップ）
- WordPressで派手なセクション区切りを作る方法
- WordPressで著者欄を追加する方法（プラグインなし）
- WordPressでページごとに異なるサイドバーを追加する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
