{"id":977,"date":"2025-03-11T06:43:46","date_gmt":"2025-03-11T06:43:46","guid":{"rendered":"https:\/\/tableberg.com\/?p=977"},"modified":"2025-03-11T06:43:49","modified_gmt":"2025-03-11T06:43:49","slug":"how-to-create-a-table-of-contents-in-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/","title":{"rendered":"How to Create a Table of Contents in WordPress"},"content":{"rendered":"<p>A table of contents (TOC) is an organized list of headings, subheadings, and sections usually covered at the beginning of any blog post. It is a navigational guide outlining the main points so users can quickly understand the topics discussed in the post\/content.<\/p>\n\n\n\n<p>All the points in TOC are presented in clickable HTML anchor texts. So, users can instantly jump to the particular points of the content by clicking them. In this post, we\u2019ll show you how to create a table of contents in WordPress.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-a2d60368-230c-41df-b77d-4b44fcf4217f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">\u76ee\u6b21<\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/#0-step-01-install-the-ultimate-blocks-plugin\" style=\"\">Step 01: Install the Ultimate Blocks Plugin<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/#1-step-02-organize-your-content-with-proper-heading-tags\" style=\"\">Step 02: Organize Your Content with Proper Heading Tags<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/#2-step-03-add-the-table-of-contents-block\" style=\"\">Step 03: Add the Table of Contents Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/#3-step-04-customize-settings-of-the-table-of-contents-block\" style=\"\">Step 04: Customize Settings of the Table of Contents Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-create-a-table-of-contents-in-wordpress\/#4-conclusion\" style=\"\">\u7d50\u8ad6<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>\u7f8e\u3057\u3044\u30c6\u30fc\u30d6\u30eb\u3092\u4f5c\u308b <\/strong><br><strong>\u30d6\u30ed\u30c3\u30af\u30a8\u30c7\u30a3\u30bf\u30fc\u4ed8\u304d<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">\u7121\u6599\u4f53\u9a13<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/ja\/%e4%be%a1%e6%a0%bc%e8%a8%ad%e5%ae%9a\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u30d7\u30ed\u306b\u306a\u308b<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-step-01-install-the-ultimate-blocks-plugin\">Step 01: Install the Ultimate Blocks Plugin<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u30a2\u30eb\u30c6\u30a3\u30e1\u30c3\u30c8\u30fb\u30d6\u30ed\u30c3\u30af<\/a> is a block plugin. It includes 25+ custom Gutenberg blocks to help with content creation. Table of Contents is one of them. <strong>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong> \u305d\u3057\u3066 <strong>\u30a2\u30af\u30c6\u30a3\u30d6\u5316<\/strong> the plugin on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp\" alt=\"Ultimate Blocks\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u6709\u52b9\u5316\u3059\u308b\" class=\"wp-image-456\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-step-02-organize-your-content-with-proper-heading-tags\">Step 02: Organize Your Content with Proper Heading Tags<\/h2>\n\n\n\n<p>WordPress allows you to add up to six heading tags (from H1 to h6) to your content. It is impossible to create a table of contents without the proper placement of heading tags.<\/p>\n\n\n\n<p>H1 is always reserved for post titles. So, you can use heading tags from h2 to h6 in the posts according to their demand. See the image below \u2013 we have created a structure with them.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Content-organized-with-proper-headings.webp\" alt=\"Content organized with proper headings\" class=\"wp-image-978\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Content-organized-with-proper-headings.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Content-organized-with-proper-headings-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Content-organized-with-proper-headings-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Content-organized-with-proper-headings-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-step-03-add-the-table-of-contents-block\">Step 03: Add the Table of Contents Block<\/h2>\n\n\n\n<p>Hover your cursor to the point where you want to create the table of contents. Press the <strong>\u30d7\u30e9\u30b9\uff08\uff0b\uff09\u30dc\u30bf\u30f3<\/strong>. Type <strong>Table of Contents<\/strong> in the search box. Add it to the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Table-of-Contents-block-1024x523.webp\" alt=\"Add the Table of Contents block\" class=\"wp-image-979\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Table-of-Contents-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Table-of-Contents-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Table-of-Contents-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Table-of-Contents-block.webp 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can see the <strong>Table of Contents<\/strong> block is created. Don\u2019t forget to give it a title at the top.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-table-of-content-block-is-created.webp\" alt=\"The table of content block is created\" class=\"wp-image-980\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-table-of-content-block-is-created.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-table-of-content-block-is-created-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-table-of-content-block-is-created-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/The-table-of-content-block-is-created-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-step-04-customize-settings-of-the-table-of-contents-block\">Step 04: Customize Settings of the Table of Contents Block<\/h2>\n\n\n\n<p>The Table of Contents block allows you to customize numerous settings. Open the <strong>\u8a2d\u5b9a\u30bf\u30d6<\/strong> on the right sidebar. <strong>Tick the headings<\/strong> you want to display. Next, <strong>select a layout type<\/strong> for the block you like.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Customize-headings-and-layout-of-the-Table-of-Contents-block.png\" alt=\"Customize headings and layout of the Table of Contents block\" class=\"wp-image-981\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Customize-headings-and-layout-of-the-Table-of-Contents-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Customize-headings-and-layout-of-the-Table-of-Contents-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Customize-headings-and-layout-of-the-Table-of-Contents-block-1024x523.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Customize-headings-and-layout-of-the-Table-of-Contents-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Scroll the Settings tab a bit more. You can do the following things with the options on the tab.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Collapsible \u2013<\/strong> Hides the entire block and opens it by clicking.<\/li>\n\n\n\n<li><strong>Scroll \u2013<\/strong> Enable smooth scrolling and reference them to ids, classes, and elements.<\/li>\n\n\n\n<li><strong>Additional \u2013<\/strong> Romanize the anchor text and remove diacritics from anchor links.<\/li>\n\n\n\n<li><strong>Responsive Control \u2013<\/strong> Allows to display\/hide the block on specific device types (mobile, tablet, and desktop)<\/li>\n<\/ul>\n\n\n\n<p>\u306b\u3064\u3044\u3066 <strong>Pro option<\/strong> is reserved only for premium users. Once you upgrade to the premium version, you can add icons to the block and make it sticky while scrolling the content.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Further-customize-settings-of-the-Table-of-Contents-block.webp\" alt=\"Further customize settings of the Table of Contents block\" class=\"wp-image-982\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Further-customize-settings-of-the-Table-of-Contents-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Further-customize-settings-of-the-Table-of-Contents-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Further-customize-settings-of-the-Table-of-Contents-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Further-customize-settings-of-the-Table-of-Contents-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Thus, you can create the Table of Contents for your blog posts with the Ultimate Blocks plugin.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_3989f76a-aacc-4e7e-bbdb-71981945f31c\"><div class=\"ub_divider_wrapper\" style=\"position: relative; margin-bottom: 2px; width: 100%; height: 2px; \" data-divider-alignment=\"center\"><div class=\"ub_divider_line\" style=\"border-top: 2px solid #ccc; margin-top: 2px; \"><\/div><\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-conclusion\">\u7d50\u8ad6<\/h2>\n\n\n\n<p>Add a table of contents is mandatory when you cover long blog posts and articles. Because it allows users to find the content they are actually looking for quickly. It not only upholds user experience but also saves time.<\/p>\n\n\n\n<p>Ultimate Blocks have numerous other blocks by which you can make your content more compelling and reading-worthy. Take a look at <a href=\"https:\/\/ultimateblocks.com\/\" data-type=\"link\" data-id=\"https:\/\/ultimateblocks.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">what you can do with the Ultimate Blocks plugin<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>A table of contents (TOC) is an organized list of headings, subheadings, and sections usually covered at the beginning of any blog post. It is a navigational guide outlining the main points so users can quickly understand the topics discussed in the post\/content. All the points in TOC are presented in clickable HTML anchor texts. So, users can instantly jump to the particular points of the content by clicking them. In this post, we&#8217;ll show you how to create a table of contents in WordPress. Step 01: Install the Ultimate Blocks Plugin Ultimate Blocks is a block plugin. It includes 25+ custom Gutenberg blocks to help with content creation. Table [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7987,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[37,18],"class_list":["post-977","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-table-of-contents","tag-ultimate-blocks"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Create-a-Table-of-Contents-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/977","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=977"}],"version-history":[{"count":6,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/977\/revisions"}],"predecessor-version":[{"id":7990,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/977\/revisions\/7990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7987"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}