ある読者から最近、投稿をタブで区切り、スペースを節約し、ユーザーが探しているものを見つけやすくする方法を尋ねられました。
WPBeginnerでは、タブレイアウトでコンテンツ構成を強化する多くのサイトオーナーを支援してきました。
タブコンテンツを追加することで、商品やサービスに関するより多くの情報を個別ページに詰め込むことができ、ユーザーエクスペリエンスを向上させ、すべての詳細を便利な1つの場所にまとめることができます。その結果、ページの乱雑さが減り、訪問者のナビゲーションが容易になります。
この投稿では、WordPressの投稿やページにタブコンテンツを追加し、訪問者が必要なものを簡単に見つけられるようにする方法を紹介します。
WordPressでタブコンテンツを使うべきタイミングとは？
タブを使うことで、小さなスペースに詳細を追加したり、大きなコンテンツの塊を分割して整理したり、ユーザー体験を向上させることができます。
オンラインストアがあるとしましょう。商品説明、レビュー、技術仕様などのタブを追加できます。この区切りは、カスタマイザーにすべての詳細を一箇所で提供し、ページをインタラクティブにするのに役立ちます。
同様に、WordPress.orgのプラグインページでもタブ化されたコンテンツを見ることができる。ページは、詳細、レビュー、インストール、サポート、開発者情報などのタブを使ってさまざまなセクションに区切られています。
タブ化されたコンテンツは、人々をWordPressサイトに留まらせるのに役立ちます。あなたの商品やサービスについて必要なすべての詳細を得るために、他のページに人々を移動させる必要はありません。
それでは、WordPressのページや投稿にタブコンテンツを追加する方法を見ていきましょう。
そのために使う2つの方法を紹介しよう：
方法1：ランディングページビルダーを使ってタブ付きコンテンツを追加する
WordPressでタブコンテンツを追加する最良の方法は、SeedProdを使用することです。これは最高のWordPressランディングページとサイトビルダーです。SeedProdは初心者に優しく、ドラッグアンドドロップビルダー、既成テンプレート、複数のカスタマイザー設定が付属しています。
このチュートリアルでは、タブコンテンツを追加するための高度なブロックが含まれているSeedProd Proライセンスを使用します。無料で使用できるSeedProd Liteバージョンもあります。
まず、SeedProdプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
有効化すると、WordPressダッシュボードのSeedProdウェルカム画面にリダイレクトされます。先に進み、SeedProdアカウントエリアにあるライセンスキーを入力してください。
次に、WordPressの管理画面からSeedProd ” ランディングページにアクセスします。
その後、「新規ランディングページを作成」ボタンをクリックするだけです。
ここから、SeedProdは選択可能な複数のランディングページテンプレートを表示します。
使いたいテンプレートを選んでください。テンプレートにマウスオーバーして、オレンジ色のチェックマークのアイコンをクリックしてください。
ポップアップウィンドウが開きますので、「ページ名」フィールドにページのタイトルを、「ページURL」にパーマリンクのスラッグを入力してください。
その後、’Save and Start Editing the Page’ボタンをクリックするだけです。
これでSeedProdドラッグ＆ドロップビルダーが起動します。テンプレートにさまざまなブロックを追加したり、既存の要素を編集したりできるようになります。
タブコンテンツを追加するには、Advancedセクションの下にある’Tabs’ブロックをドラッグしてページテンプレートにドロップするだけです。
次に、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プラグインのエキスパートリストもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Abo Rwash says
It’s excellent, professional, and valuable. Thank you
WPBeginner Support says
You’re welcome!
管理者
Alexander says
Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?
WPBeginner Support says
For what it sounds like you’re wanting, you would want to go through some of the options from our guide below:
https://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress
管理者
msiddiqui says
very simply explain u r no 1 in WordPress
WPBeginner Support says
Glad you like our content
管理者
navya says
I am beginner in wp.Can anyone help me to solve my problem?
in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance
Dan Acton says
I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?
Andi Sutrisnya says
How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me
dany says
thanks bro this helpful
Lena says
Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
I’m planning a Content sharing platform …
David says
Hi,
I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
Thanks for any help
David
Soni says
This is a helpful article.
I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
Or you use another plugin to create that tabbed content?
I think that tab is great.
Ssekito says
Kindly show me how to post content under the different tabs i have put on my blog.
Thanks
WPBeginner Support says
Your blog is hosted on WordPress.com. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Ssekito says
Thanks for the reply!
I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.
I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!
Please guide me this.
Thanks.
Sase Antic says
Helpful info on tabs in WordPress!
However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?
For example: I need one “tabs group” consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
Is this possible?
Otherwise, it’s a lot of work to add the same “tabs group” to all pages and posts one by one.
Thanks in advance for the reply!
uvie says
what if i need the tab to display contents in the form of widgets.how can i achieve that
Tony says
This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?
Sameer says
Hello,
Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.
WPBeginner Support says
Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.
管理者
Weiwei says
if in the content , there are more pages, what should I do?
WPBeginner Staff says
If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.
Shah says
I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!
Heather Lewis says
This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.
vinayak says
hi and thanks for providing a post where i could add tabbed content in my blog.
i was looking for a plugin that could do this.
Amjaru says
Is the content in the tabs searchable or does the short code prevent the content from being searched?
WPBeginner Staff says
It will still be searchable.
Knitwit23 says
can you show us a post where this is in use?
KonaGirl says
Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?
WPBeginner Staff says
It is used inside posts and pages to display content in tabs.
Sally Bennett says
It would be very useful if you explained what ‘tabs’ are to a complete novice
WPBeginner Staff says
Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.