[WordPress] 外掛分享: TOC Builder by RobertIvan

前言介紹

  • 這款 WordPress 外掛「TOC Builder by RobertIvan」是 2025-12-01 上架。
  • 目前尚無安裝啟用數,是個很新的外掛。如有要安裝使用,建議多測試確保功能沒問題!
  • 上一次更新是 2025-12-02,距離現在已有 1 天。
  • 外掛最低要求 WordPress 6.0 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

robertivan |

外掛標籤

toc | headings | gutenberg | navigation | table of contents |

內容簡介

總結:TOC Builder by RobertIvan 是一款內容條目表格的外掛程式,可以自動從您的內容標題生成導覽選單。它包含管理介面進行配置,適用於長篇內容、文件站點和部落格。

問題與答案:
1. TOC Builder by RobertIvan能夠自動掃描內容的標題範圍是什麼?
- 回答:可以自動掃描內容的標題範圍為H1-H6。

2. 這個外掛程式在滾動時如何突出顯示目前所在部分?
- 回答:TOC Builder具備SpyScroll功能,可以在滾動時突出顯示目前所在部分。

3. 未來的架構中,TOC Builder的管理介面將容納哪些功能?
- 回答:包括自訂配色方案和字型選項、進階CSS自定義、性能優化控制、分析追踪能力、預建設計模板和多語言支持基礎架構。

原文外掛簡介

TOC Builder by RobertIvan is a Table of Contents plugin that automatically generates a navigation menu from your content’s headings. It includes an admin interface for configuration and is suitable for long-form content, documentation sites, and blogs.
Core Features

Auto-Detection – Automatically scans content for headings (H1-H6)
Smooth Scroll – Animated scrolling to sections
SpyScroll – Highlights the current section in the TOC while scrolling
Gutenberg Ready – Includes a native block with live preview in the editor
Configurable – Customize position, colors, heading levels, and more
Performance – Assets loading and caching optimized
Responsive – Compatible with desktop, tablet, and mobile devices

Admin Interface
TOC Builder by RobertIvan features an admin settings page for configuration:
Design System

Gradient color scheme
Animations and transitions
Card-based layout
System typography

WordPress Sidebar Menu Structure

Dedicated Sidebar Menu – Menu in WordPress sidebar with a custom icon
General Settings – Core TOC functionality with live preview
Appearance Settings – Visual customization options (coming soon)
Advanced Settings – Options for developers (coming soon)
Premium Features – Planned functionality
Bookmarkable URLs – Direct URLs for each section

User Experience

Live Preview – Preview updates based on selected heading levels
Heading Selection – Click on heading boxes (H1-H6) to toggle selection
Visual Hierarchy – Preview shows TOC structure based on heading selections
Interactive Demo – Collapsible TOC preview with hide/show functionality
Visual Feedback – Checkboxes with gradient backgrounds when selected
2-Column Layout – Settings on left, sticky live preview on right (desktop)
Responsive Design – Stacked layout on smaller screens

Future Architecture
The admin interface is designed to accommodate upcoming features:

Custom color schemes and typography options
Advanced CSS customization
Performance optimization controls
Analytics and tracking capabilities
Pre-built design templates
Multi-language support infrastructure

Suitable For

Long-form blog posts and articles
Documentation and knowledge bases
Educational content and tutorials
Product guides and manuals
Any content with multiple headings

Technical Details
File Structure
toc-master/
├── assets/
│ ├── css/
│ │ ├── style.css (Frontend TOC styles)
│ │ └── admin-premium.css (Admin interface styles)
│ └── js/
│ ├── script.js (Frontend functionality)
│ ├── admin-settings.js (Admin interface interactions)
│ └── block.js (Gutenberg block)
├── includes/
│ ├── class-toc-generator.php (Core TOC generation logic)
│ ├── class-toc-settings.php (Settings page with UI)
│ └── class-toc-block.php (Gutenberg block registration)
└── toc-builder.php (Main plugin file)
Admin Interface Architecture
The settings pages use a component-based architecture:

CSS Design System – CSS custom properties, modular components, responsive breakpoints
WordPress Sidebar Navigation – Individual pages for each settings section
Live Preview System – TOC rendering with dynamic heading selection

Color Palette
Primary Colors:
* Primary Gradient: #4F46E5 → #7C3AED
* Accent Cyan: #06B6D4
* Accent Purple: #A855F7
Neutral Colors:
* Gray Scale: #F1F5F9 → #0F172A
* Success: #10B981
* Warning: #F59E0B
Support
For support, feature requests, and bug reports, please visit the plugin’s support forum on WordPress.org.
Credits
Developed with ❤️ for the WordPress community.

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「TOC Builder by RobertIvan」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


1.3.0 | trunk |

延伸相關外掛(你可能也想知道)

  • Classic Editor 》Classic Editor 是由 WordPress 團隊維護的官方外掛程式,可還原之前(也就是「經典」)的 WordPress 編輯器和「編輯文章」畫面,使使用者可以使用延伸這個畫...。
  • Advanced Editor Tools 》高級編輯工具(以前稱為 TinyMCE Advanced)引入了一個「經典段落」區塊,供區塊編輯器(Gutenberg)使用。, 如果您還沒有準備好切換到區塊編輯器,或者有插...。
  • Classic Widgets 》Classic Widgets 是由 WordPress 團隊維護的官方外掛,能夠恢復先前(即「經典」)的 WordPress widgets 設定畫面。該外掛將於 2024 年或必要時保持支援和維...。
  • Starter Templates – AI-Powered Templates for Elementor & Gutenberg 》免費模板,支援 Elementor、Beaver Builder 和 Block Editor, 使用 Starter Templates 外掛,只需數分鐘即可建立專業且完美的網站。此外掛為使用者提供超過 2...。
  • Spectra Gutenberg Blocks – Website Builder for the Block Editor 》a.com/tutorials/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Spectra tutorials, you can easily learn how to ...。
  • Disable Gutenberg 》此外掛可禁用新的 Gutenberg 編輯器 (也稱為區塊編輯器),並以經典編輯器取代它。你可以完全禁用 Gutenberg,或從文章、頁面、角色、文章類型和主題模板中有...。
  • Gutenberg Blocks with AI by Kadence WP – Page Builder Features 》Kadence Blocks 是一個 WordPress 外掛,它附加自訂區塊和選項,擴展了 Gutenberg 編輯功能,使您能夠輕鬆創建美麗的網站,而不需要任何程式編寫。Kadence Bl...。
  • Extendify 》Extendify 是一個網站設計和製作工具平台,提供豐富的圖案和全頁面佈局,可用於 Gutenberg 區塊編輯器,幫助人們建立美麗的 WordPress 網站。, 使用 Extendif...。
  • Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE 》Otter 是一款 Gutenberg Blocks 頁面建構外掛,可為 WordPress Block Editor(又稱 Gutenberg)添加額外功能,讓您享受更好的頁面建構體驗,而無需使用傳統的...。
  • Page Builder Gutenberg Blocks – CoBlocks 》, 注意:對於已受 CoBlocks 3.0.0 版本影響的使用者,請查看我們在 WordPress.org 支援論壇文章,如果您需要支援,請建立新的主題帖。, , CoBlocks 是新版 Gu...。
  • AI Powered Starter Templates by Kadence WP 》用三個滑鼠點擊建立一個美觀的「效能優化」網站, 在幾分鐘內創建和自定義專業設計的網站。, Kadence Starter Templates 為您提供使用 WordPress 區塊構建器的...。
  • GenerateBlocks 》將不同的功能整合至編輯器,但並不會因為過多的一維方塊造成內容過於臃腫。使用 GenerateBlocks,您只需深入學習少量的方塊,即可用於創建任何內容。, Genera...。
  • Gutenberg Essential Blocks – Page Builder for Gutenberg Blocks & Patterns 》使用 Essential Blocks for Gutenberg,即可實現您的創意視覺效果,這是適用於 WordPress 的最終區塊庫!, 使用我們易於使用的區塊,增強您使用 Gutenberg 的...。
  • VK Blocks 》這是一個擴充 Gutenberg 模塊的外掛。, [ 模塊 ], , 成員, 外框, 警示, 常問問題, 氣球, 流, 按鈕, 公關模塊, 公關內容, 邊框盒, 標題(帶副標題), 響應間距...。
  • Stackable – Page Builder Gutenberg Blocks 》終極與古鐸版衣搭檔, Stackable 是您一直在等待的終極可靠古鐸版衣搭檔。使用堅強、輕便的自訂區塊、現成設計、UI套件、全域設定和高級自訂選項建立動態網站...。

文章
Filter
Apply Filters
Mastodon