{"id":907,"date":"2025-07-14T18:22:29","date_gmt":"2025-07-14T18:22:29","guid":{"rendered":"https:\/\/tableberg.com\/?p=907"},"modified":"2025-07-14T18:22:31","modified_gmt":"2025-07-14T18:22:31","slug":"how-to-create-tabs-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-create-tabs-in-wordpress\/","title":{"rendered":"How to Create Tabs in WordPress to Organize Content"},"content":{"rendered":"

If you have to publish lots of information of various types on blog posts or pages concisely, tabs could be a helpful web element to do this. They allow you to organize content in separate sections so users can selectively explore and find the information they need.<\/p>\n\n\n\n

With the Gutenberg block editor, you can easily add tabs to your blog posts. In this article, we\u2019ll show you how to create tabs in WordPress to organize content. Before that, we\u2019ll answer some basic questions.<\/p>\n\n\n\n

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\u30bf\u30d6\u3068\u306f\u4f55\u304b\uff1f<\/strong><\/div>\n\t\t\t<\/div>
\n\t\t\t\t
\u30bf\u30d6\u306f\u3044\u3064\u4f7f\u3046\u3079\u304d\u304b\uff1f <\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t
\n\n

Tabs serve as a navigational tool, allowing you to display lots of information in various sections. As a result, users don\u2019t have to depend on excessive scrolling to explore vast information on your post or page.<\/p>\n\n\n\n

They provide a structured format so users can find the specific information they seek by clicking on them. People normally use the tab element to display their web pages in the hero and header sections.<\/p>\n\n\n\n

But today, with the help of certain Gutenberg plugins, you can create tabbed content anywhere on any post or page.<\/p>\n\n<\/div>

\n\n

Tabbed content works exceptionally when you have a large amount of information that needs to be displayed in a tabular format. This element is particularly effective in organizing the following information types.<\/p>\n\n\n\n

Product Descriptions:<\/strong> You can use this block to cover product specifications, features, and customer reviews in separate tabs.<\/p>\n\n\n\n

Service Offerings:<\/strong> If you have multiple service plans or packages, showcasing them in separate sections is better.<\/p>\n\n\n\n

Pricing Plans:<\/strong> It is already a common practice to display multiple pricing plans in different tabs on websites.<\/p>\n\n\n\n

FAQs<\/strong>: Although most people love to use FAQ and content toggle blocks for the FAQ section, you can also use the tab block to cover this section.<\/p>\n\n\n\n

Comparative Information:<\/strong> If there is any information that would be better presented in a side-by-side section, the tab block is useful in this case.<\/p>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n

WordPress\u3067\u4efb\u610f\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306b\u30bf\u30d6\u3092\u4f5c\u6210\u3059\u308b<\/h2>\n\n\n\n

The default block library of Gutenberg doesn\u2019t have the tab block. You must use a plugin like \u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af<\/a> to have it in the block library. The plugin has 25+ additional plugins by which you can take your web design and content marketing to the next level.<\/p>\n\n\n\n

T\u30b3\u30f3\u30c6\u30f3\u30c4<\/a>Ultimate Blocks\u306e'\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u3048\u3070\u3001\u30bf\u30d6\u306b\u4efb\u610f\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8ffd\u52a0\u3067\u304d\u308b\u3002\u305d\u306e\u65b9\u6cd5\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002 <\/p>\n\n\n\n

\u30b9\u30c6\u30c3\u30d701: Ultimate Blocks\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u6709\u52b9\u5316\u3059\u308b<\/h3>\n\n\n\n

\u3053\u3061\u3089\u3078 \u30d7\u30e9\u30b0\u30a4\u30f3 > \u65b0\u898f\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8ffd\u52a0<\/strong>. Type \u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af<\/strong> in the search bar on the top-right corner. \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong> \u305d\u3057\u3066 \u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/strong> the plugin after it appears below.<\/p>\n\n\n\n

\"Ultimate<\/figure>\n\n\n\n

Step 02: Insert the Tabbed Content Block<\/h3>\n\n\n\n

Open a post or page. Find the \u30bf\u30d6\u4ed8\u304d\u30b3\u30f3\u30c6\u30f3\u30c4<\/strong> block by pressing \u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong>. Once you find the block, add it to the Gutenberg editor.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Step 03: Add New Tabs and Rename Them<\/h3>\n\n\n\n

\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002 \u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30a2\u30a4\u30b3\u30f3<\/strong>, you can add as many tabs as you want to the block.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Take your cursor and click on the tab one by one. You\u2019ll be allowed to rename them. So, rename the tabs based on the content you\u2019ll display.<\/p>\n\n\n\n

\"Rename<\/figure>\n\n\n\n

Step 04: Add Content to the Tabs<\/h3>\n\n\n\n

Select a tab where you want to add content. Then place the cursor in its editor. You\u2019ll see the \u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong> of the Gutenberg editor appeared. Click and choose the content block you need.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

For the tutorial, we have added the text and image blocks to the tab. The same way, you can add other blocks as well to the tab. Do the same in other tabs.<\/p>\n\n\n\n

\"Texts<\/figure>\n\n\n\n

Step 05: Customize the Tabs<\/h3>\n\n\n\n

Come to the right sidebar while keeping the Tabbed Content block selected. You\u2019ll find various options to configure, like the Tab Types, Tab Anchor, and Responsiveness.<\/p>\n\n\n\n

Once you upgrade to the premium version, you\u2019ll be allowed to add icons to the tab titles, secondary texts, and call to action buttons to the tabs.<\/p>\n\n\n\n

\"Configure<\/figure>\n\n\n\n

\u6b21\u306b \u30b9\u30bf\u30a4\u30eb\u30bf\u30d6<\/strong>. You\u2019ll get options to colorize the tabbed content, change the tab layout, and set a new dimension. Hope you can explore and do these yourself.<\/p>\n\n\n\n

\"Stylize<\/figure>\n\n\n\n
\n\n\n\n

\u30d3\u30c7\u30aa\u30fb\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb<\/h3>\n\n\n\n
\n