要約：WordPressでタブを作成する方法
コーディング不要で、WordPressの任意のページにタブコンテンツを追加する3つの方法があります。
- SeedProdをインストールする – SeedProd（有料プランはタブブロックに必要）をダウンロードして有効化し、ライセンスキーを入力します
- SeedProdでタブを追加する – 「SeedProdで編集」で任意のページを開き、タブブロックをドラッグ＆ドロップしてコンテンツを設定し、保存します
- ブロックエディターを使用する – Ultimate Blocks（無料）をインストールし、任意の投稿またはページを開き、ブロックインサーターからタブブロックを追加します
- 無料プラグインを使用する – Tabs Responsiveをインストールし、タブセットを作成してショートコードをコピーし、任意の投稿またはページに貼り付けます
- 方法を選択する – SeedProdは完全な視覚的制御を提供します。ブロックエディターとTabs Responsiveは既存のテーマと連携します
WordPressページにタブを追加するのは簡単そうですが、ほとんどのチュートリアルでは、あなたが開発者であるか、開始するためだけに3つのプラグインをインストールしたいことを前提としています。
ほとんどのガイドでは、カスタムテーマ全体をゼロから構築する方法を説明しています。ブロックエディターのオプションは完全にスキップされているか、1つのプラグインしかカバーされていません。
SeedProdはタブコンテンツの私の定番の方法ですが、このガイドではブロックエディターのアプローチと無料プラグインのオプションも紹介します。コーディングは不要です。
WordPressタブとは何ですか？また、どのように役立ちますか？
WordPressタブは、ページコンテンツをセクションに整理するクリック可能なコンテンツパネルで、訪問者はスクロールせずに切り替えることができます。
タブは、コンテンツを整理するナビゲーションシステムの一種であり、訪問者がウェブサイトを閲覧しやすくなります。投稿やページにタブを追加したり、タブウィジェットを使用してWordPressサイドバーやウィジェットエリアにタブ付きコンテンツを表示したりできます。
タブ付きWordPressコンテンツが必要な理由
コンテンツの並べ替えに加えて、タブはウェブサイト訪問者をアクティブでエンゲージした状態に保つことをはるかに容易にします。タブはコンテンツトピックを1つのページにまとめるため、ユーザーは他のページをクリックする必要がなくなり、短い注意力の持続時間に最適です。
たとえば、WordPress.orgはプラグインページでタブを使用して、詳細、レビュー、サポート、開発などの情報を表示しています。
WordPressでタブを使用する一般的な方法：
- WooCommerceページの製品仕様とレビュー
- 部署または場所別に分割された連絡先情報
- ブログフィルター（人気、最新、カテゴリ）
- 個別のタブ付きカテゴリを持つFAQセクション
- 価格ティアまたはサービスパッケージ
WooCommerceの商品ページは、タブを使用する最も一般的な場所の1つです。仕様用の専用タブ、レビュー用のタブ、配送用のタブを設けることで、購入者が必要とする詳細情報を隠すことなく、商品ページをすっきりと保つことができます。専用のWooCommerceタブプラグインを使用すると、商品ページタブの外観と動作をさらに細かく制御できます。
プロのヒント: タブはアコーディオンと混同しないでください。ユーザーは情報を切り替えるためにタブをクリックしますが、アコーディオンは情報を表示するために展開します。
SeedProdでタブを作成する方法
この方法では、SeedProd、つまり最高のWordPressウェブサイトビルダーを使用して、ウェブサイトにタブ付きコンテンツを追加します。
SeedProdは、コードを書かずに柔軟なWordPressレイアウトを作成できるドラッグアンドドロップ式のウェブサイトビルダーです。プロフェッショナルなウェブサイトキット、ランディングページテンプレート、ライブビジュアルエディターを使用すると、サイトのあらゆる部分をカスタマイズし、変更をリアルタイムで確認できます。
SeedProdには、このガイドで使用するタブブロックを含む、高度にカスタマイズ可能なブロックも含まれています。
SeedProdを使用してWordPressでタブを作成するには、以下の手順に従ってください。
ステップ 1. SeedProd ウェブサイトビルダーをインストールする
まず、 SeedProdの料金ページにアクセスし、タブブロックが含まれるプランを選択してください。タブブロックは有料プランで利用できます。料金ページにアクセスしてオプションを比較し、予算に合ったプランを見つけてください。
プラグインをダウンロードしたら、WordPressサイトにインストールして有効化する必要があります。以前にWordPressプラグインをインストールしたことがない場合は、WordPressプラグインのインストール方法に関するこれらの手順に従ってください。
プラグインを有効化した後、SeedProd » Settingsに移動し、プラグインのライセンスキーを入力します。
SeedProdのライセンスキーは、アカウントダッシュボードのDownloadsセクションで見つけることができます。
次のステップに進む前に、Verify Keyボタンをクリックすることを忘れないでください。
ステップ2. SeedProdでページを開く
SeedProdをインストールした後、ビジュアルエディターで既存のWordPressページを開くことができます。WordPress管理画面からPages » All Pagesに移動し、タブを追加したいページを見つけます。
ビジュアルエディターでページを開くには、Edit with SeedProdリンクをクリックします。
この例では、求人情報や編集ガイドラインなどの詳細を表示するために、会社概要ページにタブを追加します。サイトに合わせて意味のある任意のページを選択できます。
ステップ3. WordPressページにタブを追加する
ページがビジュアルエディターで開いたら、任意の要素をクリックして、そのコンテンツ、色、スタイル、表示設定を変更できます。
ブロックパネルから要素をドラッグして配置することで、ページにさらに多くの要素を追加することも簡単です。
まず、タブ付きコンテンツを格納するための新しいセクションをページに追加します。この場合、既存のセクションの1つを複製し、ページの下部にドラッグします。
その後、画像をより関連性の高いものに置き換え、不要になったコンテンツはゴミ箱アイコンをクリックして削除します。
左側のパネルでタブブロックを探し、ページ上の新しいセクションにドラッグできるようになりました。
ブロックをクリックすると、コンテンツ設定が表示され、次のことができます。
- 複数のタブを追加する
- タブアイコンを表示または非表示にする
- フォントサイズを変更する
- タブ間のスペースを増減する
- タブの配置を調整する
各タブを展開すると、タブタイトルを追加し、「What You See Is What You Get」（WYSIWYG）設定を使用してコンテンツを作成できます。
カスタムアイコンを有効にして、タブをより魅力的にし、目立たせることもできます。「タブアイコンを非表示」トグルを「オフ」の位置に切り替え、「Font Awesome」ライブラリからカスタムアイコンを選択します。
詳細設定タブをクリックすると、カスタム背景色、フォント、境界線、間隔など、さらに多くのカスタマイズオプションを選択できます。
レイアウトオプションのいずれかをクリックして、垂直タブまたは水平タブセットを表示することもできます。
変更を保存するには、画面右上隅にある保存ボタンをクリックすることを忘れないでください。
同じ手順でWordPressウェブサイトの他のページにもタブを追加し、次のステップに進んで変更を公開します。
ステップ4. タブ付きコンテンツを公開する
さまざまなWordPressページにタブを追加した後、ウェブサイトの訪問者が見ることができるように公開する準備が整いました。
これを行うには、SeedProd » テーマビルダーページに移動し、「SeedProdテーマを有効にする」トグルを「オン」の位置に切り替えます。
これで、ページをプレビューして、タブ付きコンテンツが機能していることを確認できます。
WordPressブロックエディターでタブを追加するにはどうすればよいですか？
標準のWordPressテーマを使用しており、完全なビジュアルエディターが必要ない場合は、無料プラグインを使用してブロックエディターに直接WordPressタブブロックを追加できます。
いくつかのブロックエディタータブプラグインをテストしましたが、「Ultimate Blocks」は、どのテーマでも機能する専用のタブブロックを備えた信頼性の高い無料オプションです。
ブロックエディターを使用してWordPressページにタブを追加する方法は次のとおりです。
- プラグイン » 新規追加に移動し、「Ultimate Blocks」を検索して、「今すぐインストール」、次に「有効化」をクリックします。
- WordPressブロックエディターで任意の投稿またはページを開きます。
- +アイコンをクリックしてブロックインサーターを開き、「タブ」を検索します。
- Ultimate Blocksセクションからタブブロックを選択し、コンテンツに追加します。
- 各タブラベルをクリックして名前を変更し、下のタブパネルにコンテンツを追加します。
- 右側のブロック設定サイドバーを使用して、色、タブスタイル、配置を調整します。
- タブに満足したら、更新または公開をクリックします。
この方法は、既存のWordPressテーマを変更したり、別のページビルダーをインストールしたりすることなく機能します。
WordPressでタブを無料で追加できますか？
はい、ページビルダーなしでタブ付きコンテンツを追加できる無料のWordPressタブプラグインがいくつかあります。
Tabs Responsive はショートコード経由でどのテーマでも動作し、以下で説明します。Ultimate Blocks（上記のブロックエディターの方法でカバー）は、すでにGutenbergを使用している場合に適しています。WP Tabs は、ブロックベースのインターフェイスと複数のレイアウトスタイルを備えた、もう1つの堅実なオプションです。
次の方法は、WordPressテーマを変更したくない場合や、ランディングページを作成したくない場合に適した代替手段です。無料のTabs Responsive WordPressプラグインを使用して、WordPressサイトに応答性の高いタブを追加します。
まず、Tabs Responsiveプラグインをインストールし、WordPress管理者から有効化する必要があります。
次に、Tabs Responsive » Add New Tabs に移動し、タブセットにタイトルを付けます。
そこから、デフォルトのテンプレートを選択できます。Proバージョンを使用している場合は、18以上のテンプレートスタイルから選択できます。
次のステップは、タブを追加することです。好きなだけ多くのタブを作成し、以下を含めることができます。
- タブのタイトル
- タブの説明
- タブのアイコン
右側のサイドバーで、カスタムタブスタイル、背景色、フォントの色などを選択して、各タブのスタイルを編集することもできます。
タブに満足したら、タブのショートコードをコピーして、WordPressテーマのどこにでも貼り付けます。
たとえば、次のようにWordPressの投稿やページにショートコードを貼り付けることができます。
サイトのフロントエンドでは、このようになります。
また、段落ブロックにショートコードを貼り付けることで、WordPressのサイドバーやフッターウィジェットなどのウィジェット対応領域にタブショートコードを追加することもできます。
その後、サイドバー領域にタブ付きコンテンツがライブで表示されます。
WordPressでタブを作成する方法 FAQ
プラグインなしでWordPressでタブを作成するにはどうすればよいですか？
カスタムHTML、CSS、JavaScriptコードを使用してプラグインなしでタブを作成できますが、このアプローチには開発者の知識が必要です。ほとんどの初心者は、Ultimate BlocksやTabs Responsiveのような無料のWordPressタブプラグインを使用する方が良いでしょう。これらのプラグインは、すべてのコードを処理してくれます。SeedProdのビジュアルエディターを使用している場合、ドラッグアンドドロップのTabsブロックは、WordPressページにタブ付きコンテンツを追加するための最も簡単なノーコードオプションです。
WordPressブロックエディターにタブを追加するにはどうすればよいですか？
ブロックエディターにタブを追加するには、Ultimate Blocks（無料）など、GutenbergにTabsブロックを追加するプラグインをインストールします。有効化したら、任意の投稿またはページを開き、+ブロックインサーターをクリックし、「Tabs」を検索して、WordPressタブブロックをコンテンツに追加します。その後、各タブの名前を変更し、タブパネルにコンテンツを追加し、ブロック設定サイドバーで色と配置をカスタマイズできます。
WordPressのタブとアコーディオンの違いは何ですか？
WordPressのタブは複数のコンテンツパネルを横並びに表示し、タブをクリックすると表示されるパネルが切り替わります。アコーディオンは垂直に積み重ねられ、クリックするとコンテンツが表示されるように展開します。タブは、すべてのオプションを一度に表示したい場合や、コンテンツの長さが似ている場合に最適です。アコーディオンは、ほとんどの訪問者が1つのセクションしか読まないFAQのような長いコンテンツに適しています。
タブ付きコンテンツのデザインを完全に制御したい場合は、SeedProd がライブのビジュアルプレビューを備えた最速のオプションです。ブロックエディターの方法は、現在のテーマを維持したい場合や、ネイティブの Gutenberg アプローチを好む場合に適しています。Tabs Responsive プラグインは、あらゆる WordPress セットアップで機能し、無料のショートコードプラグイン以上のものは必要ありません。
数回クリックするだけで、コード不要で WordPress サイトにタブ付きコンテンツを追加できます。すでに SeedProd を使用してサイトを構築している場合は、SeedProd によってプロセスが迅速かつ初心者フレンドリーになります。
WordPress サイトにタブを追加する準備はできましたか？
ついでに、これらの他の役立つ WordPress ガイドも気に入るかもしれません。
- WordPressでテキストアニメーションを作成する方法（簡単な手順）
- WordPressウェブサイト向けのカスタムセクション区切りを作成する方法
- WordPressに著者ボックスを追加する方法（プラグインなしで）
- WordPressでページごとに異なるサイドバーを追加する方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
