InspectorControls 是Gutenberg 開發(fā)中用於在右側(cè)邊欄添加自定義控件的組件，1. 它屬於@wordpress/block-editor 包，2. 常搭配PanelBody、TextControl 等組件使用，3. 使用時(shí)需在edit.js 中引入並合理佈局控件類型如文本框、下拉選擇、開關(guān)、滑動(dòng)條和顏色選擇器等，4. 應(yīng)注意分組設(shè)置、保持簡潔、支持國際化及優(yōu)化性能。
在Gutenberg 開發(fā)中， InspectorControls是一個(gè)非常實(shí)用的組件，它用於在編輯器右側(cè)邊欄（也就是“塊設(shè)置”面板）中添加自定義控件。如果你希望讓用戶能通過側(cè)邊欄調(diào)整塊的屬性，比如顏色、尺寸或佈局選項(xiàng)，那麼InspectorControls就是你要用到的關(guān)鍵工具。
下面是一些常見的使用場景和具體實(shí)現(xiàn)方式，幫助你快速上手。
什麼是InspectorControls？
簡單來說， InspectorControls是WordPress 的@wordpress/block-editor包提供的一個(gè)React 組件。它負(fù)責(zé)將UI 控件插入到Gutenberg 編輯器的右側(cè)邊欄中。通常搭配像PanelBody 、 TextControl 、 SelectControl等組件一起使用。
你不能把它直接放在主編輯區(qū)域（Edit 函數(shù)里其他地方），只能作為InspectorControls的子元素來渲染。
如何添加基本控件
最常見的做法是在你的塊的edit.js文件中引入相關(guān)組件，並在InspectorControls中加入一些控制項(xiàng)。例如：
import { InspectorControls, PanelBody, TextControl } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
export default function Edit( { attributes, setAttributes } ) {
const { customText } = attributes;
return (
<>
<InspectorControls>
<PanelBody title={ __( '設(shè)置', 'my-block' ) }>
<TextControl
label={ __( '輸入文字', 'my-block' ) }
value={ customText }
onChange={ ( value ) => setAttributes( { customText: value } ) }
/>
</PanelBody>
</InspectorControls>
<p>{ customText }</p>
</>
);
}這樣用戶就能在側(cè)邊欄修改顯示的文字內(nèi)容了。
常見控件類型及用途
你可以根據(jù)需求選擇不同的控件類型，以下是一些常用的：
- TextControl ：文本輸入框，適合字符串類型的屬性。
- SelectControl ：下拉選擇框，適合有限選項(xiàng)的設(shè)置。
- ToggleControl ：開關(guān)按鈕，用於布爾值（true/false）。
- RangeControl ：滑動(dòng)條，適合數(shù)值範(fàn)圍調(diào)節(jié)。
- ColorPicker ：顏色選擇器，用於顏色設(shè)置。
舉個(gè)例子，添加一個(gè)顏色選擇器可以這樣寫：
import { ColorPicker } from '@wordpress/block-editor';
<ColorPicker
color={ colorValue }
onChange={ ( value ) => setAttributes( { colorValue: value } ) }
/>這些控件都可以組合使用，構(gòu)建出功能豐富的設(shè)置面板。
注意事項(xiàng)與最佳實(shí)踐
-
合理分組控件：使用多個(gè)
PanelBody把不同類別的設(shè)置分開，提高可讀性。 - 避免過度複雜：不要一次加太多控件，保持界面簡潔。
-
國際化支持：所有文字標(biāo)籤都應(yīng)使用
__()或_x()進(jìn)行翻譯。 - 性能優(yōu)化：如果控件很多，考慮懶加載或按需渲染。
基本上就這些。用好InspectorControls能顯著提升塊的功能性和用戶體驗(yàn)，雖然不復(fù)雜但容易忽略細(xì)節(jié)，建議多參考官方文檔和已有插件的實(shí)現(xiàn)方式。
以上是如何在Gutenberg使用InspectorControls的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何恢復(fù)WordPress核心更新
Jul 02, 2025 am 12:05 AM
要回滾WordPress版本，可使用插件或手動(dòng)替換核心文件，並禁用自動(dòng)更新。 1.使用WPDowngrade等插件輸入目標(biāo)版本號即可自動(dòng)下載替換；2.手動(dòng)下載舊版WordPress並通過FTP替換wp-includes、wp-admin等文件但保留wp-config.php和wp-content；3.在wp-config.php中添加代碼或使用過濾器禁用核心自動(dòng)更新以防止再次升級。操作前務(wù)必備份網(wǎng)站和數(shù)據(jù)庫，確保安全可靠。長期建議保持最新版以保障安全性與功能支持。
如何在WordPress中創(chuàng)建自定義短代碼
Jul 02, 2025 am 12:21 AM
在WordPress中創(chuàng)建自定義短代碼的步驟如下：1.通過functions.php文件或自定義插件編寫PHP函數(shù)；2.使用add_shortcode()將函數(shù)綁定到短代碼標(biāo)籤；3.在函數(shù)中處理參數(shù)並返回輸出內(nèi)容。例如，創(chuàng)建按鈕短代碼時(shí)可定義顏色和鏈接參數(shù)，實(shí)現(xiàn)靈活配置。使用時(shí)可在編輯器中插入類似[buttoncolor="red"url="https://example.com"]點(diǎn)擊這裡[/button]的標(biāo)籤，並可通過do_shortcode()在模
如何診斷WordPress引起的高CPU使用
Jul 06, 2025 am 12:08 AM
WordPress導(dǎo)致服務(wù)器CPU使用率飆升的主要原因包括插件問題、數(shù)據(jù)庫查詢效率低、主題代碼質(zhì)量差或流量激增。 1.首先通過top、htop或控制面板工具確認(rèn)是否為WordPress引起的高負(fù)載；2.進(jìn)入故障排查模式逐步啟用插件排查性能瓶頸，使用QueryMonitor分析插件執(zhí)行情況並刪除或替換低效插件；3.安裝緩存插件、清理冗餘數(shù)據(jù)、分析慢查詢?nèi)照I以優(yōu)化數(shù)據(jù)庫；4.檢查主題是否存在過度加載內(nèi)容、複雜查詢或缺乏緩存機(jī)制等問題，建議用標(biāo)準(zhǔn)主題測試對比並優(yōu)化代碼邏輯。按照上述步驟逐一排查可定位並解
如何在沒有插件的情況下優(yōu)化WordPress
Jul 05, 2025 am 12:01 AM
優(yōu)化WordPress站點(diǎn)不依賴插件的方法包括：1.使用輕量級主題，如Astra或GeneratePress，避免功能堆砌的主題；2.手動(dòng)壓縮和合併CSS、JS文件，減少HTTP請求；3.上傳前優(yōu)化圖片，使用WebP格式並控製文件大??；4.配置.htaccess啟用瀏覽器緩存，並接入CDN提升靜態(tài)資源加載速度；5.限製文章修訂版本並定期清理數(shù)據(jù)庫冗餘數(shù)據(jù)。
如何在WordPress中縮小JavaScript文件
Jul 07, 2025 am 01:11 AM
MinifyingJavaScript文件可通過刪除空白、註釋和無用代碼來提升WordPress網(wǎng)站加載速度。 1.使用支持合併壓縮的緩存插件如W3TotalCache，在“Minify”選項(xiàng)中啟用並選擇壓縮模式；2.使用專用壓縮插件如FastVelocityMinify，提供更精細(xì)控制；3.手動(dòng)壓縮JS文件並通過FTP上傳，適用於熟悉開發(fā)工具的用戶。注意部分主題或插件腳本可能與壓縮功能衝突，啟用後需徹底測試網(wǎng)站功能。
如何使用瞬態(tài)API進(jìn)行緩存
Jul 05, 2025 am 12:05 AM
TransientsAPI是WordPress中用於臨時(shí)存儲(chǔ)可自動(dòng)過期數(shù)據(jù)的內(nèi)置工具，其核心函數(shù)為set_transient、get_transient和delete_transient。相比OptionsAPI，transients支持設(shè)置生存時(shí)間（TTL），適合緩存API請求結(jié)果、複雜計(jì)算數(shù)據(jù)等場景。使用時(shí)需注意key命名唯一性與命名空間、緩存“懶刪除”機(jī)制及對象緩存環(huán)境下可能不持久的問題。典型應(yīng)用場景包括減少外部請求頻率、控制代碼執(zhí)行節(jié)奏和提升頁面加載性能。
如何使用對象緩存進(jìn)行持續(xù)存儲(chǔ)
Jul 03, 2025 am 12:23 AM
對象緩存可輔助持久存儲(chǔ)，適用於高訪問低更新、可容忍短暫丟失的數(shù)據(jù)。 1.適合用緩存“持久化”的數(shù)據(jù)包括用戶配置、熱門商品信息等，能從數(shù)據(jù)庫恢復(fù)但使用緩存可加速訪問。 2.選擇Redis等支持持久化的緩存後端，啟用RDB或AOF模式，並配置合理過期策略，但不能替代主數(shù)據(jù)庫。 3.設(shè)置長TTL或永不過期鍵，採用清晰鍵名結(jié)構(gòu)如user:1001:profile，修改數(shù)據(jù)時(shí)同步更新緩存。 4.可結(jié)合本地與分佈式緩存，本地存小數(shù)據(jù)、Redis存大數(shù)據(jù)並用於重啟後恢復(fù)，同時(shí)注意一致性與資源佔(zhàn)用問題。
如何以編程方式防止評論垃圾郵件
Jul 08, 2025 am 12:04 AM
防止評論垃圾信息最有效的方式是通過程序化手段自動(dòng)識別並攔截。 1.使用驗(yàn)證碼機(jī)制（如GooglereCAPTCHA或hCaptcha）可有效區(qū)分人類與機(jī)器人，尤其適合公眾網(wǎng)站；2.設(shè)置隱藏字段（Honeypot技術(shù)），利用機(jī)器人自動(dòng)填寫特性識別垃圾評論，不影響用戶體驗(yàn)；3.檢查評論內(nèi)容關(guān)鍵詞黑名單，通過敏感詞匹配過濾垃圾信息，需注意避免誤判；4.判斷評論頻率與來源IP，限制單位時(shí)間內(nèi)的提交次數(shù)並建立黑名單；5.使用第三方反垃圾服務(wù)（如Akismet、Cloudflare）提升識別準(zhǔn)確性?？筛鶕?jù)網(wǎng)站
