在開發(fā) Gutenberg 塊時(shí),正確 enqueue 資產(chǎn)的方法包括:1. 使用 register_block_type 指定 editor_script、editor_style 和 style 的路徑;2. 在 functions.php 或插件中通過 wp_register_script 和 wp_register_style 注冊資源,并設(shè)置正確的依賴和版本;3. 配置構(gòu)建工具輸出合適的模塊格式,并確保路徑一致;4. 通過 add_theme_support 或 enqueue_block_assets 控制前端樣式的加載邏輯,確保樣式生效且避免沖突。
在開發(fā) Gutenberg 塊時(shí),正確地 enqueue 資產(chǎn)(比如 JavaScript 和 CSS 文件)是確保塊正常運(yùn)行的關(guān)鍵步驟。這不僅僅是把文件加載到后臺(tái)編輯器中,還要考慮前端展示和依賴管理的問題。
1. 使用 register_block_type
正確指定資產(chǎn)路徑
WordPress 提供了 register_block_type
函數(shù)來注冊一個(gè)區(qū)塊類型,并允許你通過參數(shù)指定對(duì)應(yīng)的 JS 和 CSS 文件路徑。
register_block_type( __DIR__, array( 'editor_script' => 'my-block-editor-script', 'editor_style' => 'my-block-editor-styles', 'style' => 'my-block-frontend-styles', ) );
editor_script
:用于區(qū)塊編輯器中的腳本(通常是編譯后的.js
或.jsx
文件)editor_style
:僅在編輯器中加載的樣式,不影響前臺(tái)style
:前后臺(tái)都會(huì)加載的樣式,通常用于區(qū)塊的基本外觀統(tǒng)一
2. 在 functions.php
或插件中注冊腳本和樣式表
你需要先用 wp_register_script
和 wp_register_style
注冊這些資源,這樣 WordPress 才能識(shí)別你在 register_block_type
中提到的 handle。
function my_block_assets() { wp_register_script( 'my-block-editor-script', get_template_directory_uri() . '/blocks/my-block/build/index.js', array( 'wp-blocks', 'wp-element', 'wp-editor' ), filemtime( get_template_directory() . '/blocks/my-block/build/index.js' ) ); wp_register_style( 'my-block-editor-styles', get_template_directory_uri() . '/blocks/my-block/editor.css', array(), filemtime( get_template_directory() . '/blocks/my-block/editor.css' ) ); wp_register_style( 'my-block-frontend-styles', get_template_directory_uri() . '/blocks/my-block/style.css', array(), filemtime( get_template_directory() . '/blocks/my-block/style.css' ) ); } add_action( 'init', 'my_block_assets' );
注意幾個(gè)關(guān)鍵點(diǎn):
- 腳本依賴要寫全,比如
wp-blocks
,wp-element
,wp-editor
- 使用
filemtime()
可以避免瀏覽器緩存舊版本文件 - 如果你使用的是主題目錄結(jié)構(gòu),建議用
get_template_directory
;如果是插件,則用plugins_url()
配合__FILE__
3. 構(gòu)建工具配置注意事項(xiàng)
如果你用 Webpack、Vite 或其他構(gòu)建工具打包區(qū)塊代碼,需要注意以下幾點(diǎn):
- 輸出的 JS 文件應(yīng)該是一個(gè) UMD 模塊,或者被正確打包為適合 WordPress 環(huán)境的格式
- 不要把 React、ReactDOM 單獨(dú)打包進(jìn)你的腳本,而是通過 WordPress 提供的全局變量引用(如
window.React
,window.ReactDOM
) - 確保輸出路徑與 PHP 中注冊的路徑一致
常見做法:
- 把編輯器腳本放在
/src/blocks/your-block/index.js
- 用 Webpack 編譯到
/build/your-block/index.js
- 同時(shí)生成
.asset.php
文件來自動(dòng)獲取依賴項(xiàng)和版本號(hào)(WordPress 默認(rèn)支持)
4. 加載前端樣式的小技巧
默認(rèn)情況下,Gutenberg 區(qū)塊的 style
參數(shù)會(huì)在前臺(tái)自動(dòng)加載樣式。但有時(shí)候你會(huì)發(fā)現(xiàn)樣式?jīng)]生效,原因可能是:
- 主題沒有正確啟用區(qū)塊樣式支持(檢查是否調(diào)用了
add_theme_support( 'wp-block-styles' )
) - 樣式被其他主題樣式覆蓋,建議加一些命名空間類名
- 有些區(qū)塊不會(huì)在前端渲染(比如某些動(dòng)態(tài)區(qū)塊),這時(shí)候可以考慮用
enqueue_block_assets
鉤子按需加載
function my_enqueue_frontend_assets() { if ( has_block( 'my/block-name' ) ) { wp_enqueue_style( 'my-block-frontend-styles' ); } } add_action( 'wp_enqueue_scripts', 'my_enqueue_frontend_assets' );
這種方式更靈活,但也需要判斷區(qū)塊是否實(shí)際存在頁面上。
基本上就這些。只要按照 WordPress 的區(qū)塊注冊規(guī)范走,再注意構(gòu)建和路徑問題,就能順利把資產(chǎn)加載進(jìn)區(qū)塊里了。
以上是如何爭取古騰堡大塊的資產(chǎn)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(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脫衣機(jī)

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版
神級(jí)代碼編輯軟件(SublimeText3)

要回滾WordPress版本,可使用插件或手動(dòng)替換核心文件,并禁用自動(dòng)更新。1.使用WPDowngrade等插件輸入目標(biāo)版本號(hào)即可自動(dòng)下載替換;2.手動(dòng)下載舊版WordPress并通過FTP替換wp-includes、wp-admin等文件但保留wp-config.php和wp-content;3.在wp-config.php中添加代碼或使用過濾器禁用核心自動(dòng)更新以防止再次升級(jí)。操作前務(wù)必備份網(wǎng)站和數(shù)據(jù)庫,確保安全可靠。長期建議保持最新版以保障安全性與功能支持。

在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導(dǎo)致服務(wù)器CPU使用率飆升的主要原因包括插件問題、數(shù)據(jù)庫查詢效率低、主題代碼質(zhì)量差或流量激增。1.首先通過top、htop或控制面板工具確認(rèn)是否為WordPress引起的高負(fù)載;2.進(jìn)入故障排查模式逐步啟用插件排查性能瓶頸,使用QueryMonitor分析插件執(zhí)行情況并刪除或替換低效插件;3.安裝緩存插件、清理冗余數(shù)據(jù)、分析慢查詢?nèi)罩疽詢?yōu)化數(shù)據(jù)庫;4.檢查主題是否存在過度加載內(nèi)容、復(fù)雜查詢或缺乏緩存機(jī)制等問題,建議用標(biāo)準(zhǔn)主題測試對(duì)比并優(yōu)化代碼邏輯。按照上述步驟逐一排查可定位并解

優(yōu)化WordPress站點(diǎn)不依賴插件的方法包括:1.使用輕量級(jí)主題,如Astra或GeneratePress,避免功能堆砌的主題;2.手動(dòng)壓縮和合并CSS、JS文件,減少HTTP請(qǐng)求;3.上傳前優(yōu)化圖片,使用WebP格式并控制文件大小;4.配置.htaccess啟用瀏覽器緩存,并接入CDN提升靜態(tài)資源加載速度;5.限制文章修訂版本并定期清理數(shù)據(jù)庫冗余數(shù)據(jù)。

MinifyingJavaScript文件可通過刪除空白、注釋和無用代碼來提升WordPress網(wǎng)站加載速度。1.使用支持合并壓縮的緩存插件如W3TotalCache,在“Minify”選項(xiàng)中啟用并選擇壓縮模式;2.使用專用壓縮插件如FastVelocityMinify,提供更精細(xì)控制;3.手動(dòng)壓縮JS文件并通過FTP上傳,適用于熟悉開發(fā)工具的用戶。注意部分主題或插件腳本可能與壓縮功能沖突,啟用后需徹底測試網(wǎng)站功能。

TransientsAPI是WordPress中用于臨時(shí)存儲(chǔ)可自動(dòng)過期數(shù)據(jù)的內(nèi)置工具,其核心函數(shù)為set_transient、get_transient和delete_transient。相比OptionsAPI,transients支持設(shè)置生存時(shí)間(TTL),適合緩存API請(qǐng)求結(jié)果、復(fù)雜計(jì)算數(shù)據(jù)等場景。使用時(shí)需注意key命名唯一性與命名空間、緩存“懶刪除”機(jī)制及對(duì)象緩存環(huán)境下可能不持久的問題。典型應(yīng)用場景包括減少外部請(qǐng)求頻率、控制代碼執(zhí)行節(jié)奏和提升頁面加載性能。

對(duì)象緩存可輔助持久存儲(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í)注意一致性與資源占用問題。

PluginCheck是一個(gè)幫助WordPress用戶快速檢查插件兼容性和性能的工具,主要用來識(shí)別當(dāng)前安裝的插件是否存在與最新版本W(wǎng)ordPress不兼容、存在安全漏洞等問題。1.如何開始檢查?安裝激活后,在后臺(tái)點(diǎn)擊“RunaScan”按鈕即可自動(dòng)掃描所有插件;2.報(bào)告包含插件名稱、檢測類型、問題描述及解決方案建議,便于優(yōu)先處理嚴(yán)重問題;3.建議在更新WordPress前、網(wǎng)站異常時(shí)或定期運(yùn)行檢查,提前發(fā)現(xiàn)隱患,避免未來出現(xiàn)重大問題。
