動(dòng)態(tài)的Gutenberg塊使用服務(wù)器端渲染每次加載時(shí)顯示最新內(nèi)容。與靜態(tài)塊不同，加載頁(yè)面時(shí)，動(dòng)態(tài)塊執(zhí)行PHP代碼，允許使用最新帖子或用戶特定內(nèi)容的實(shí)時(shí)數(shù)據(jù)。關(guān)鍵步驟包括：1）使用block.json，edit.js，save.js和php渲染文件設(shè)置基本塊結(jié)構(gòu)； 2）在PHP中使用Render_Callback注冊(cè)塊； 3）使用從編輯器傳遞的屬性生成動(dòng)態(tài)輸出； 4）通過(guò)edit.js中的控件來(lái)處理用戶輸入，以更新PHP查詢中使用的塊屬性。這種方法可確保靈活性和實(shí)時(shí)數(shù)據(jù)，而無(wú)需犧牲與塊編輯器的兼容性。
構(gòu)建動(dòng)態(tài)的Gutenberg塊與制造常規(guī)塊沒(méi)有太大的不同，但它增加了服務(wù)器端渲染的扭曲。如果您希望每次查看塊（例如最近的帖子或特定于用戶的內(nèi)容），這就是您所需要的。
是什么使塊“動(dòng)態(tài)”
動(dòng)態(tài)塊不會(huì)將其輸出作為帖子內(nèi)容中的靜態(tài)HTML保存為靜態(tài)HTML。相反，每次加載帖子時(shí)，它都會(huì)運(yùn)行PHP代碼，從而使其顯示最新信息。這對(duì)于諸如：
- 最近發(fā)布的小部件
- 顯示用戶配置文件
- 現(xiàn)場(chǎng)評(píng)論很重要
在前端，WordPress僅存儲(chǔ)塊元數(shù)據(jù)和屬性，而不是在帖子內(nèi)容中看到RAW HTML。當(dāng)頁(yè)面加載時(shí)，而不是編輯時(shí)，實(shí)際的標(biāo)記將生成。
設(shè)置塊結(jié)構(gòu)
首先使用@wordpress/create-block軟件包創(chuàng)建基本塊或手動(dòng)設(shè)置您的block.json 。無(wú)論哪種方式，主要區(qū)別在稍后您注冊(cè)塊的渲染回調(diào)。
這是通常包含的內(nèi)容：
- 定義元數(shù)據(jù)（名稱，標(biāo)題，類別等）
block.json。 - 編輯器接口的
edit.js文件 - 一個(gè)
save.js文件 - 即使它返回null，因?yàn)檎鎸?shí)內(nèi)容將呈現(xiàn)服務(wù)器端 - 渲染邏輯壽命的PHP文件
您無(wú)需在PHP中寫所有UI，只需定義保存的內(nèi)容以及渲染時(shí)的行為。
用渲染回調(diào)注冊(cè)塊
這是魔術(shù)發(fā)生的地方。在您的插件的PHP文件中，使用register_block_type()并提供render_callback參數(shù)。
register_block_type（__dir__，數(shù)組（
'render_callback'=>'my_dynamic_block_render_callback'，
）;然后定義該功能。它收到塊的屬性，應(yīng)返回要顯示的HTML：
函數(shù)my_dynamic_block_render_callback（$屬性，$ content，$ block）{
//在這里獲取動(dòng)態(tài)數(shù)據(jù) - 例如，最近的帖子
$ erash_posts = get_posts（array（'numberposts'=> 3））;
$ output ='<ul>';
foreach（$ erstan_posts as $ post）{
$ output。='<li> <a href =“'。get_permalink（$ post）。''>'。 $ post-> post_title。 '</a> </li>';
}
$輸出。='</ul>';
返回$輸出；
}注意：您還可以通過(guò)wp_localize_script將數(shù)據(jù)從PHP傳遞到JavaScript，尤其是如果您的塊在加載后需要客戶端的交互性時(shí)。
處理屬性和用戶輸入
即使最終輸出是在服務(wù)器上構(gòu)建的，用戶仍然在編輯器中設(shè)置選項(xiàng)，例如要顯示多少個(gè)項(xiàng)目或從哪個(gè)類別中刪除。
因此，在您的edit.js文件中，使用TextControl ， SelectControl或RangeControl等組件創(chuàng)建控件。這些更新塊屬性，然后將其傳遞到您的PHP渲染函數(shù)中。
例如：
- 在您的
block.json中添加count屬性。 - 在編輯器中使用
RangeControl來(lái)讓用戶選擇要顯示多少帖子 - 在PHP中，讀取
$attributes['count']并在查詢中使用它
這樣，一切都保持靈活性，而無(wú)需全頁(yè)重新加載或Ajax呼叫只是為了預(yù)覽更改。
一旦所有內(nèi)容連接起來(lái)，您的動(dòng)態(tài)塊都可以像其他任何人一樣工作 - 只有更聰明。它根據(jù)實(shí)時(shí)數(shù)據(jù)進(jìn)行更新，同時(shí)仍然與Block Editor一起播放?；旧暇褪沁@樣。一旦降低流動(dòng)，還不錯(cuò)。
以上是如何構(gòu)建動(dòng)態(tài)的Gutenberg塊的詳細(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
視覺(jué)化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何診斷WordPress引起的高CPU使用
Jul 06, 2025 am 12:08 AM
WordPress導(dǎo)致服務(wù)器CPU使用率飆升的主要原因包括插件問(wèn)題、數(shù)據(jù)庫(kù)查詢效率低、主題代碼質(zhì)量差或流量激增。1.首先通過(guò)top、htop或控制面板工具確認(rèn)是否為WordPress引起的高負(fù)載；2.進(jìn)入故障排查模式逐步啟用插件排查性能瓶頸，使用QueryMonitor分析插件執(zhí)行情況并刪除或替換低效插件；3.安裝緩存插件、清理冗余數(shù)據(jù)、分析慢查詢?nèi)罩疽詢?yōu)化數(shù)據(jù)庫(kù)；4.檢查主題是否存在過(guò)度加載內(nèi)容、復(fù)雜查詢或缺乏緩存機(jī)制等問(wèn)題，建議用標(biāo)準(zhǔn)主題測(cè)試對(duì)比并優(yōu)化代碼邏輯。按照上述步驟逐一排查可定位并解
如何在WordPress中縮小JavaScript文件
Jul 07, 2025 am 01:11 AM
MinifyingJavaScript文件可通過(guò)刪除空白、注釋和無(wú)用代碼來(lái)提升WordPress網(wǎng)站加載速度。1.使用支持合并壓縮的緩存插件如W3TotalCache，在“Minify”選項(xiàng)中啟用并選擇壓縮模式；2.使用專用壓縮插件如FastVelocityMinify，提供更精細(xì)控制；3.手動(dòng)壓縮JS文件并通過(guò)FTP上傳，適用于熟悉開發(fā)工具的用戶。注意部分主題或插件腳本可能與壓縮功能沖突，啟用后需徹底測(cè)試網(wǎng)站功能。
如何在沒(méi)有插件的情況下優(yōu)化WordPress
Jul 05, 2025 am 12:01 AM
優(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ù)庫(kù)冗余數(shù)據(jù)。
如何使用瞬態(tài)API進(jìn)行緩存
Jul 05, 2025 am 12:05 AM
TransientsAPI是WordPress中用于臨時(shí)存儲(chǔ)可自動(dòng)過(guò)期數(shù)據(jù)的內(nèi)置工具，其核心函數(shù)為set_transient、get_transient和delete_transient。相比OptionsAPI，transients支持設(shè)置生存時(shí)間（TTL），適合緩存API請(qǐng)求結(jié)果、復(fù)雜計(jì)算數(shù)據(jù)等場(chǎng)景。使用時(shí)需注意key命名唯一性與命名空間、緩存“懶刪除”機(jī)制及對(duì)象緩存環(huán)境下可能不持久的問(wèn)題。典型應(yīng)用場(chǎng)景包括減少外部請(qǐng)求頻率、控制代碼執(zhí)行節(jié)奏和提升頁(yè)面加載性能。
如何使用插件檢查插件
Jul 04, 2025 am 01:02 AM
PluginCheck是一個(gè)幫助WordPress用戶快速檢查插件兼容性和性能的工具，主要用來(lái)識(shí)別當(dāng)前安裝的插件是否存在與最新版本W(wǎng)ordPress不兼容、存在安全漏洞等問(wèn)題。1.如何開始檢查？安裝激活后，在后臺(tái)點(diǎn)擊“RunaScan”按鈕即可自動(dòng)掃描所有插件；2.報(bào)告包含插件名稱、檢測(cè)類型、問(wèn)題描述及解決方案建議，便于優(yōu)先處理嚴(yán)重問(wèn)題；3.建議在更新WordPress前、網(wǎng)站異常時(shí)或定期運(yùn)行檢查，提前發(fā)現(xiàn)隱患，避免未來(lái)出現(xiàn)重大問(wèn)題。
如何以編程方式防止評(píng)論垃圾郵件
Jul 08, 2025 am 12:04 AM
防止評(píng)論垃圾信息最有效的方式是通過(guò)程序化手段自動(dòng)識(shí)別并攔截。1.使用驗(yàn)證碼機(jī)制（如GooglereCAPTCHA或hCaptcha）可有效區(qū)分人類與機(jī)器人，尤其適合公眾網(wǎng)站；2.設(shè)置隱藏字段（Honeypot技術(shù)），利用機(jī)器人自動(dòng)填寫特性識(shí)別垃圾評(píng)論，不影響用戶體驗(yàn)；3.檢查評(píng)論內(nèi)容關(guān)鍵詞黑名單，通過(guò)敏感詞匹配過(guò)濾垃圾信息，需注意避免誤判；4.判斷評(píng)論頻率與來(lái)源IP，限制單位時(shí)間內(nèi)的提交次數(shù)并建立黑名單；5.使用第三方反垃圾服務(wù)（如Akismet、Cloudflare）提升識(shí)別準(zhǔn)確性?？筛鶕?jù)網(wǎng)站
如何爭(zhēng)取古騰堡大塊的資產(chǎn)
Jul 09, 2025 am 12:14 AM
在開發(fā)Gutenberg塊時(shí)，正確enqueue資產(chǎn)的方法包括：1.使用register_block_type指定editor_script、editor_style和style的路徑；2.在functions.php或插件中通過(guò)wp_register_script和wp_register_style注冊(cè)資源，并設(shè)置正確的依賴和版本；3.配置構(gòu)建工具輸出合適的模塊格式，并確保路徑一致；4.通過(guò)add_theme_support或enqueue_block_assets控制前端樣式的加載邏輯，確保
如何向用戶添加自定義字段
Jul 06, 2025 am 12:18 AM
要添加自定義用戶字段需根據(jù)平臺(tái)選擇擴(kuò)展方式并注意數(shù)據(jù)驗(yàn)證與權(quán)限控制。常見做法包括：1.利用數(shù)據(jù)庫(kù)額外表或鍵值對(duì)結(jié)構(gòu)存儲(chǔ)信息；2.在前端加入輸入框并與后端集成；3.對(duì)敏感數(shù)據(jù)進(jìn)行格式校驗(yàn)和訪問(wèn)權(quán)限限制；4.更新接口及模板以支持新字段展示與編輯，同時(shí)兼顧移動(dòng)端適配和用戶體驗(yàn)。
