創(chuàng)建 Gutenberg 塊的關(guān)鍵在于理解其基本結(jié)構(gòu)并正確連接前后端資源。1. 準(zhǔn)備開發(fā)環(huán)境:安裝本地 WordPress、Node.js 和 @wordpress/scripts;2. 使用 PHP 注冊(cè)塊并用 JavaScript 定義塊的編輯和顯示邏輯;3. 通過(guò) npm 構(gòu)建 JS 文件以使更改生效;4. 遇到問(wèn)題時(shí)檢查路徑、圖標(biāo)是否正確或使用實(shí)時(shí)監(jiān)聽構(gòu)建避免重復(fù)手動(dòng)編譯。按照這些步驟,可以逐步實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Gutenberg 塊。
創(chuàng)建一個(gè)簡(jiǎn)單的 Gutenberg 塊其實(shí)并不難,尤其是如果你已經(jīng)熟悉 WordPress 的基本開發(fā)流程。Gutenberg 是 WordPress 的新編輯器,它通過(guò)“塊”來(lái)組織內(nèi)容,每個(gè)塊就是一個(gè)獨(dú)立的內(nèi)容單元。如果你想自定義一個(gè)自己的塊,可以從最基礎(chǔ)的開始,一步步實(shí)現(xiàn)。
下面是一些實(shí)用步驟和建議,幫你快速上手。
準(zhǔn)備工作:設(shè)置開發(fā)環(huán)境
在開始寫代碼之前,確保你有一個(gè)適合開發(fā)的 WordPress 環(huán)境。你可以使用本地開發(fā)工具(如 Local 或 XAMPP)搭建一個(gè)測(cè)試站點(diǎn)。
- 安裝最新版 WordPress
- 安裝 Node.js 和 npm(用于構(gòu)建 JavaScript 文件)
- 安裝
@wordpress/scripts
包,這是官方推薦的腳本工具集
你可以通過(guò)以下命令安裝必要的依賴:
npm install --save-dev @wordpress/scripts
然后,在你的主題或插件中創(chuàng)建一個(gè)目錄來(lái)存放塊的代碼,比如 /blocks/my-first-block/
。
創(chuàng)建基本結(jié)構(gòu):注冊(cè)塊和編輯組件
一個(gè) Gutenberg 塊通常由兩個(gè)部分組成:PHP 用來(lái)注冊(cè)塊,JavaScript 用來(lái)定義塊的外觀和行為。
PHP 部分(注冊(cè)塊)
在你的主題 functions.php
文件中添加如下代碼,或者在插件中加載:
function register_my_first_block() { wp_register_script( 'my-first-block', get_template_directory_uri() . '/blocks/my-first-block/build/index.js', array( 'wp-blocks', 'wp-element' ) ); register_block_type( 'my-plugin/first-block', array( 'editor_script' => 'my-first-block', ) ); } add_action( 'init', 'register_my_first_block' );
這段代碼告訴 WordPress 這個(gè)塊的 JS 腳本在哪里,并注冊(cè)了一個(gè)新的塊類型。
JavaScript 部分(定義塊)
在 /blocks/my-first-block/src/index.js
中寫入如下內(nèi)容:
const { registerBlockType } = wp.blocks; const { RichText } = wp.editor; registerBlockType( 'my-plugin/first-block', { title: '我的第一個(gè)塊', icon: 'smiley', category: 'common', edit: () => { return ( <RichText tagName="p" placeholder="輸入一些文字..." /> ); }, save: () => { return <RichText.Content tagName="p" value="這是一個(gè)靜態(tài)文本" />; }, } );
這樣你就創(chuàng)建了一個(gè)可以在編輯器中看到的塊了。
構(gòu)建和運(yùn)行:用 npm 編譯 JS 文件
Gutenberg 塊需要將 JavaScript 編譯成瀏覽器可以識(shí)別的格式。你可以使用 WordPress 提供的腳本工具自動(dòng)完成這個(gè)過(guò)程。
在項(xiàng)目根目錄下創(chuàng)建一個(gè) package.json
文件,加入如下配置:
{ "name": "my-first-block", "version": "1.0.0", "scripts": { "build": "wp-scripts build ./blocks/my-first-block/src/index.js" } }
然后運(yùn)行:
npm run build
每次修改完 JS 文件后,都要重新運(yùn)行一次 build
命令,讓更改生效。
小技巧和常見問(wèn)題
圖標(biāo)顯示不出來(lái)? 可以使用 WordPress Dashicons 中的圖標(biāo)名。
塊不顯示? 檢查 JS 是否編譯成功,以及 PHP 注冊(cè)路徑是否正確。
不想每次都手動(dòng)編譯? 可以加上
--watch
參數(shù),實(shí)時(shí)監(jiān)聽文件變化并自動(dòng)構(gòu)建:npx wp-scripts build ./blocks/my-first-block/src/index.js --watch
基本上就這些。從零開始創(chuàng)建一個(gè) Gutenberg 塊,關(guān)鍵在于理解塊的基本結(jié)構(gòu)和如何連接前后端資源。雖然看起來(lái)有點(diǎn)復(fù)雜,但只要一步一步來(lái),很快就能掌握。
以上是如何創(chuàng)建一個(gè)簡(jiǎn)單的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
視覺化網(wǎng)頁(yè)開發(fā)工具

SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)

防止評(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)站

在開發(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控制前端樣式的加載邏輯,確保

在WordPress中添加自定義重寫規(guī)則的關(guān)鍵在于使用add_rewrite_rule函數(shù)并確保規(guī)則正確生效。1.使用add_rewrite_rule注冊(cè)規(guī)則,格式為add_rewrite_rule($regex,$redirect,$after),其中$regex是正則表達(dá)式匹配URL,$redirect指定實(shí)際查詢,$after控制規(guī)則位置;2.需通過(guò)add_filter添加自定義查詢變量;3.修改后必須刷新固定鏈接設(shè)置;4.建議將規(guī)則放在'top'以避免沖突;5.可借助插件查看當(dāng)前規(guī)則便于

robots.txt對(duì)WordPress網(wǎng)站的SEO至關(guān)重要,能引導(dǎo)搜索引擎抓取行為,避免重復(fù)內(nèi)容并提升效率。1.屏蔽如/wp-admin/、/wp-includes/等系統(tǒng)路徑,但避免誤封/uploads/目錄;2.添加Sitemap路徑如Sitemap:https://yourdomain.com/sitemap.xml以幫助搜索引擎快速發(fā)現(xiàn)站點(diǎn)地圖;3.限制/page/和帶參數(shù)的URL以減少爬蟲浪費(fèi),但需注意勿封重要?dú)w檔頁(yè);4.避免常見錯(cuò)誤如誤封全站、緩存插件影響更新及忽略移動(dòng)端與子域名配

WordPressrequiresatleastPHP7.4,thoughusing8.0orhigherisrecommendedforbetterperformanceandsecurity.Olderversionslike5.6areoutdated,unsupported,andposesecurityrisks.UsingupdatedPHPimprovessecurity,enhancesperformance,andensurescompatibilitywithmodernpl

要在WordPress主題或插件中正確引入樣式文件,應(yīng)使用wp_enqueue_style()函數(shù)。1.使用wp_enqueue_style()注冊(cè)并加載CSS文件,基本結(jié)構(gòu)為wp_enqueue_style($handle,$src,$deps,$ver,$media),其中$handle為唯一標(biāo)識(shí)符,$src為CSS文件URL,$deps為依賴樣式,$ver為版本號(hào),$media為媒體類型;2.通過(guò)將enqueue操作放在functions.php文件中并利用wp_enqueue_scrip

InspectorControls是Gutenberg開發(fā)中用于在右側(cè)邊欄添加自定義控件的組件,1.它屬于@wordpress/block-editor包,2.常搭配PanelBody、TextControl等組件使用,3.使用時(shí)需在edit.js中引入并合理布局控件類型如文本框、下拉選擇、開關(guān)、滑動(dòng)條和顏色選擇器等,4.應(yīng)注意分組設(shè)置、保持簡(jiǎn)潔、支持國(guó)際化及優(yōu)化性能。

WordPress中添加安全響應(yīng)頭并不復(fù)雜,可通過(guò)服務(wù)器配置、安全插件或CDN實(shí)現(xiàn)。1.通過(guò)Apache或Nginx配置文件添加如X-Content-Type-Options、X-Frame-Options等頭信息;2.使用Wordfence、iThemesSecurity等插件簡(jiǎn)化設(shè)置;3.利用Cloudflare等CDN平臺(tái)的內(nèi)置功能配置全局頭信息。配置后應(yīng)使用SecurityHeaders.com或ChromeDevTools測(cè)試驗(yàn)證,確保無(wú)誤并獲得至少A級(jí)評(píng)分,同時(shí)注意備份與理解所啟用的
