內容簡介
總結： Custom Anchor Block 通過添加多功能的錨點連結區塊來增強您的WordPress編輯器。您可以創建作為文本或按鈕樣式的平滑滾動錨點連結，並完全自定義顏色和樣式。
問題與答案：
問題：Custom Anchor Block 的關鍵功能有哪些？
答案：
- 可以創建文本或按鈕樣式的錨點連結
- 可以完全自定義按鈕顏色（背景、文字和邊框）
- 可以選擇不同的按鈕樣式（主要、次要、輪廓）
- 可以選擇按鈕尺寸（小、普通、大）
- 支持多語言（提供英文和西班牙文）
- 具有與區塊編輯器集成的易於使用介面
- 不需要編碼知識
問題：Custom Anchor Block 最適用於哪些情況？
答案：
- 長篇內容導覽
- 常見問題（FAQ）部分
- 目錄
- 登陸頁面
- 產品文檔
- 課程材料
問題：Custom Anchor Block 的使用方法是什麼？
答案：
- 在您想要用戶滾動至的標題或段落中添加
- 在區塊的進階設置中設置HTML錨點ID（例如，“section1”）
- 將Custom Anchor Block添加到您想要出現連結的地方
- 輸入相同的錨點ID
- 選擇文本或按鈕樣式
- 根據需要自定義顏色和外觀
外掛標籤
開發者團隊
原文外掛簡介
Custom Anchor Block enhances your WordPress editor by adding a versatile anchor link block. Create smooth-scrolling anchor links that can be styled as either text or buttons with fully customizable colors and styles.
Key Features:
* Create anchor links as text or buttons
* Fully customize button colors (background, text, and border)
* Choose from different button styles (Primary, Secondary, Outline)
* Select button sizes (Small, Normal, Large)
* Multi-language support (English and Spanish available)
* Easy to use interface integrated with the block editor
* No coding knowledge required
Perfect for:
* Long-form content navigation
* FAQ sections
* Table of contents
* Landing pages
* Product documentation
* Course materials
Usage
Add a heading or paragraph where you want users to scroll to
Set an HTML anchor ID in the block’s Advanced settings (e.g., “section1”)
Add the Custom Anchor Block where you want the link to appear
Enter the same anchor ID
Choose between text or button style
Customize colors and appearance as needed
Development
This plugin is developed using modern JavaScript and build tools. The source code is available in the /src directory.
Build Tools
Node.js and npm are required for development
The plugin uses @wordpress/scripts for building
Development Setup
Clone the repository
Install dependencies:
npm install
For development with auto-rebuild:
npm run start
For production build:
npm run build
Source Files
/src/index.js – Main JavaScript source code for the block editor containing React components and block registration
/src/style.css – Original CSS styles for both editor and frontend display
Build Output
/build/index.js – Compiled and minified JavaScript
/build/index.asset.php – WordPress dependencies and version information
/build/style-index.css – Compiled and optimized CSS
Development Dependencies
The plugin uses the following development tools:
* @wordpress/scripts: Provides build tools and configurations for WordPress block development
* Package configuration in package.json:
json
{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start",
"format": "wp-scripts format",
"lint:js": "wp-scripts lint-js"
},
"devDependencies": {
"@wordpress/scripts": "^26.0.0"
}
}
