最近、読者の一人から、スペースを節約し、ユーザーが見つけたいものを簡単に見つけられるように投稿をタブに分割する方法について質問されました。
WPBeginnerでは、多くのウェブサイト所有者がタブレイアウトでコンテンツの整理を強化するのを支援してきました。
タブ付きコンテンツを追加すると、1つのページに商品やサービスに関するより多くの情報を詰め込むことができ、ユーザーエクスペリエンスを向上させ、すべての詳細情報を1か所にまとめることができます。その結果、ページの煩雑さが軽減され、訪問者のナビゲーションが容易になります。
この記事では、WordPressの投稿やページにタブ付きコンテンツを追加する方法を紹介し、訪問者が探しているものを簡単に見つけられるようにします。
WordPressでタブ付きコンテンツを使用するのはいつですか？
タブを使用すると、限られたスペースにより多くの詳細を追加したり、大きなコンテンツの塊を分割して、より良い整理とユーザーエクスペリエンスを実現したりできます。
例えば、オンラインストアがあるとします。商品情報、レビュー、技術仕様などのタブを追加できます。このように分離することで、顧客に必要なすべての詳細情報を1か所に提供し、ページをインタラクティブにすることができます。
同様に、WordPress.orgのプラグインページでもタブ付きコンテンツを見ることができます。ページは、詳細、レビュー、インストール、サポート、開発情報などのタブを使用して異なるセクションに分割されています。
タブ付きコンテンツは、WordPressウェブサイトにユーザーを滞在させるのに役立ちます。製品やサービスに関する必要なすべての詳細を取得するために、ユーザーを別のページに誘導する必要はありません。
それでは、WordPressのページや投稿にタブ付きコンテンツを追加する方法を見ていきましょう。
これを行うために使用する2つの方法を以下に示します。
方法1：ランディングページビルダーを使用したタブ付きコンテンツの追加
WordPressにタブ付きコンテンツを追加する最良の方法は、SeedProdを使用することです。これは最高のWordPressランディングページおよびウェブサイトビルダーです。SeedProdは初心者にも使いやすく、ドラッグ＆ドロップビルダー、事前作成済みテンプレート、複数のカスタマイズオプションが付属しています。
このチュートリアルでは、タブ付きコンテンツを追加するための高度なブロックが含まれているため、SeedProd Proライセンスを使用します。無料で利用できるSeedProd Liteバージョンもあります。
まず、SeedProd プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法をご覧ください。
有効化すると、WordPressダッシュボードのSeedProdウェルカム画面にリダイレクトされます。SeedProdアカウントエリアで見つけられるライセンスキーを入力してください。
次に、WordPress管理画面から SeedProd » ランディングページ に移動します。
その後、「新しいランディングページを作成」ボタンをクリックするだけです。
ここから、SeedProdは選択できる複数のランディングページテンプレートを表示します。
使用したいテンプレートを選択してください。テンプレートにカーソルを合わせ、オレンジ色のチェックマークアイコンをクリックするだけです。
ポップアップウィンドウが開き、「ページ名」フィールドにページタイトルを、「ページURL」の下にパーマリンクのスラッグを入力する必要があります。
その後、「保存してページの編集を開始」ボタンをクリックするだけです。
これにより、SeedProdのドラッグアンドドロップビルダーが起動します。これで、テンプレートにさまざまなブロックを追加したり、既存の要素を編集したりできます。
タブ付きコンテンツを追加するには、高度なセクションの下にある「タブ」ブロックをドラッグして、ページテンプレートにドロップするだけです。
次に、SeedProdでタブブロックをカスタマイズできます。
例えば、「新規アイテムを追加」ボタンをクリックすると、好きなだけタブを追加できます。さらに、各タブのコンテンツのフォントサイズ、テキスト間のスペース、配置を編集するオプションもあります。
次に、いずれかのタブをクリックして、さらに編集し、詳細を追加できます。
例えば、各タブのタイトルを変更したり、コンテンツを追加したり、タブのアイコンを変更したりできます。
それに加えて、SeedProdは高度なカスタマイズオプションも提供します。
左側のメニューにある「詳細設定」タブをクリックするだけです。ここで、タブのレイアウト、タイポグラフィ、色、背景色、境界線などを変更できます。
タブブロックに変更を加え、ランディングページをカスタマイズしたら、一番上にある緑色の「保存」ボタンをクリックするのを忘れないでください。
その後、「ページ設定」タブに移動できます。
次に、「ページステータス」トグルをクリックし、ステータスをドラフトから公開に変更できます。
「保存」ボタンをクリックすると、変更が保存され、ページビルダーが閉じます。
これで、WordPressのページでタブ表示されたコンテンツが実際に動作しているのをウェブサイトで確認できます。
方法2：WordPressプラグインを使用してタブ付きコンテンツを追加する
ランディングページビルダーを使用したくない場合は、専用のWordPressプラグインを使用して、投稿やページにタブ付きコンテンツを追加できます。
まず、Tabs Responsive プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するガイドをご覧ください。
有効化後、WordPressダッシュボードからTabs Responsive » Add New Tabsに移動し、タブの名前を入力して開始できます。
次に、赤い「新規タブを追加」ボタンをクリックして、好きなだけタブを追加できます。
さらに、各タブのタイトルを変更したり、説明を追加したり、異なるタブアイコンを使用したり、アイコンの場所を編集したりすることで、個別に編集できます。
それに加えて、プラグインは右側のメニューにさまざまな「タブ設定」も提供しています。
例えば、タブのタイトルを表示するかどうか、タイトルのアイコンの異なるオプションを選択するかどうか、アイコンの位置を変更するかどうか、タブの境界線を表示するかどうか、テキストの色を変更するかどうかなどを選択できます。
変更が完了したら、プラグインによって生成されたショートコードを使用して、任意のブログ投稿またはページでタブを使用できるようになります。
「公開」ボタンをクリックするだけです。
次に、[TABS_R id=130]ショートコードを使用して、任意のページまたは投稿にタブを追加できます。ショートコードのID番号をタブのID番号に置き換えるだけです。
タブレスポンシブ » すべてのタブに移動し、「タブショートコード」列の下のコードをコピーすることで、タブIDとショートコードを簡単に見つけることができます。
次に、新しい投稿を追加するか、既存の投稿を編集するだけです。
Gutenbergブロックエディターで、ショートコードブロックを追加してショートコードを入力してください。
その後、ブログ投稿またはページをプレビューできます。すべて問題がなければ、「公開」または「更新」ボタンをクリックして、投稿にタブを保存できます。
さて、あなたのウェブサイトにアクセスして、タブ付きコンテンツが機能しているのを確認してください。
この記事が、WordPressの投稿やページにタブ付きコンテンツを追加する方法を学ぶのに役立ったことを願っています。また、WooCommerceの簡単な使い方や、ビジネス向けウェブサイトに最適なWordPressプラグインの専門家リストもご覧いただけます。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
これは、製品レビュー記事をよりパーソナライズするための素晴らしいオプションのようですね。ユーザーは、製品の評価（レビュー）、詳細な製品情報、または購入場所を提供するタブを簡単に切り替えることができるでしょう。レビュープラグインとして、このソリューションは本当に素晴らしいと思います。素晴らしいヒントをありがとうございます。
Ahmed Abo Rwash
素晴らしい、プロフェッショナルで価値のあるものです。ありがとうございます。
WPBeginnerサポート
どういたしまして！
管理者
アレクサンダー
こんにちは、投稿をタブとして表示したいのですが、投稿タイトルをタブラベル、投稿コンテンツをタブコンテンツにしたいです。どうすればよいか何かおすすめはありますか？
WPBeginnerサポート
あなたが求めているもののように聞こえるものについては、以下のガイドのオプションをいくつか確認することをお勧めします。
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
管理者
msiddiqui
WordPressであなたがナンバーワンであることを非常に簡単に説明します
WPBeginnerサポート
Glad you like our content
管理者
navya
私はWordPress初心者です。どなたか私の問題を解決するのを手伝っていただけませんか？
私のサイトには、歴史のような「私たちのストーリー」という部分があります。例えば、2018年のタブをクリックしたら、2018年に関する説明を取得したいです。WordPressでこれをどうすればいいですか？よろしくお願いします。
Dan Acton
これを気に入っています。このオプションが利用できなくても世界の終わりではありませんが、作成したのと同じインターフェイスを使用して現在のタブのセットを編集できるようになりたいだけです。ショートコードの間に新しいコンテンツを貼り付けるのではなく、これが可能ですか？
Andi Sutrisnya
タブごとに動画がある場合、別のタブに切り替えたときに動画の再生を停止するにはどうすればよいですか？助けてください
dany
ありがとう、とても参考になりました。
Lena
ユーザーエディタに、新しいタブを自動的に作成してコンテンツを書き込めるボタンを設置することは可能でしょうか？
コンテンツ共有プラットフォームを計画しています…
デビッド
こんにちは。
リンクを追加できる縦型タブを探しています。各タブにアドレスを持たせたいです。
このオプションがあるタブプラグイン、またはこの機能を追加する方法を説明したチュートリアルを教えていただけますか。
ご協力ありがとうございます。
デビッド
Soni
この記事は役立ちます。
wpbeginnerのホームページにあるタブ付きコンテンツについて知りたいです。このプラグインで同じようなタブ付きコンテンツを作成できますか？
それとも、別のプラグインを使用してそのタブ付きコンテンツを作成していますか？
このタブは素晴らしいと思います。
Ssekito
ブログに設定したさまざまなタブの下にコンテンツを投稿する方法を教えてください。
ありがとう
WPBeginnerサポート
あなたのブログはWordPress.comでホストされています。セルフホスト型WordPress.orgと無料WordPress.comブログの違いに関するガイドをご覧ください。セルフホスト型WordPress.orgと無料WordPress.comブログの違い。
管理者
Ssekito
返信ありがとうございます！
私は実際にはWordPressブログの初心者で、まずそれに慣れてから、BluehostをホストとしてWordPress.orgにアップグレードしたいと思っています。
アフィリエイトマーケティングをしているので、ブログを収益化したいです！現在、メニューバーに作成した各ページのすぐ下にコンテンツとソーシャル共有ボタンを追加したいのですが、難しく感じています！
これについて教えてください。
ありがとう。
Sase Antic
WordPressのタブに関する役立つ情報です！
しかし、このプラグインまたは他のWPプラグインで、投稿やページだけでなく、サイト全体（サイトワイド）にタブを追加するソリューションはありますか？
例えば：3つのタブで構成される「タブグループ」が1つ必要で、それをサイト全体に追加したい（メニュー/サブメニューのように、すべてのページや投稿に同じコンテンツ/タブが表示されるが、タブ機能付き）。
これは可能ですか？
そうしないと、すべてのページや投稿に同じ「タブグループ」を一つずつ追加するのは大変な作業になります。
返信ありがとうございます！
uvie
ウィジェット形式でコンテンツを表示するタブが必要な場合はどうすればよいですか？どのようにすれば実現できますか？
Tony
これは素晴らしいタブプラグインのように見えますが、投稿だけでなくページにも追加できるとさらに素晴らしいでしょう。あちこち探しましたが、ページの編集者には表示されません。それは可能ですか？
サミール
Hello,
WordPressのブログページでタブ内にテーブルを作成することは可能ですか？このページをご覧ください：、WPでこのようなものを作成するのを手伝ってもらえませんか？
WPBeginnerサポート
はい、可能です。各タブのコンテンツエリアに必要なテーブルのHTMLコードを生成する必要があります。
管理者
Weiwei
コンテンツ内に複数のページがある場合、どうすればよいですか？
WPBeginnerスタッフ
それらが必要な理由がわからない場合、それはあなたのウェブサイトにそれらを本当に必要としていないことを意味します。私たちは、ユーザーがウェブサイトに追加できる多くのクールなことについて書いています。ユーザーが何か役立つものを見つけたら、それを自分のサイトに追加できます。
Shah
ウェブサイト構築は全くの初心者です。あまりにも進んでいるので、私のような人があなたの指示をどれだけ理解し、従うことができるかというあなたの仮定は、非常に誇張されていると思います。タブが何のためにあるのか、まだ理解できません。説明してくれたし、実際にどこで見られるかまで示してくれたけれど、なぜタブが必要なのか、まだ理解できません。私たちのような理解の遅い人にもっと例を挙げていただけるとありがたいです。ありがとうございます！
Heather Lewis
これは役立つ記事です。必要に応じてこのプラグインを使用します。デザインの面では、現在使用しているものよりもはるかに優れていると思います。共有していただきありがとうございます。
vinayak
こんにちは、ブログにタブ付きコンテンツを追加できる投稿を提供していただきありがとうございます。
このようなことができるプラグインを探していました。
Amjaru
タブ内のコンテンツは検索可能ですか、それともショートコードがコンテンツの検索を妨げますか？
WPBeginnerスタッフ
検索可能な状態は維持されます。
Knitwit23
これが使用されている投稿を見せていただけますか？
KonaGirl
このプラグインはタブ形式のメニュー階層を作成しますか？もしそうなら、このプラグインを追加する前にメニュータブを削除する必要がありますか？
WPBeginnerスタッフ
投稿やページ内で、コンテンツをタブ形式で表示するために使用されます。
サリー・ベネット
初心者向けに「タブ」とは何かを説明していただけると非常に役立ちます
WPBeginnerスタッフ
タブは、フォルダ内のタブや電話の索引帳のようなものです。タブのタイトルをクリックすることで、ユーザーは異なるセクションを閲覧できます。実際の動作はこちらで確認できます。