在客製化區塊中使用 @wordpress/data 找到 site url
2023年10月10日・TungLin・約 1 分鐘閱讀
沒想到有這麼困難... 只是想要動態的找到 site url 而已,花了我整整三小時研究。 在區塊中要使用 wordpress data 可以使用 wp.data,也可以使用 @wordpress/data 官方提供的 npm。 而如果我們要使用資料,並不是使用 {select}...
沒想到有這麼困難... 只是想要動態的找到 site url 而已,花了我整整三小時研究。
在區塊中要使用 wordpress data 可以使用 wp.data,也可以使用 @wordpress/data 官方提供的 npm。
而如果我們要使用資料,並不是使用 {select} 而是要使用 {useSelect}
最終會長這樣:
import { useSelect } from '@wordpress/data';
接著,site url 的資料在這底下,
可以在區塊編輯器的 console log 當中確認。
wp.data.select('core').getSite().url
我們必須要使用
const siteUrl = useSelect(select => {
const site = select('core').getSite();
return site && site.url;
});
最後再將 {siteUrl} 拿去任何想去的地方使用。
因爲頁面載入順序的關係,我們必須要使用
return site && site.url;
我也不知道道理是啥,我是問 gpt 的
希望能有更加精簡的辦法出現。
文章導覽
接著閱讀
相關主題
你可能也會想看
2026年4月29日
AI Coding 新手真正缺的不是工具,而是一套 Vibe Coding 流程
看了很多 AI coding 影片、試過 ChatGPT 和各種工具,卻還是做不出能用的網站或 Web App?你缺的可能不是技術,而是一套能把想法做成產品的方法。
2026年4月29日
AI 不該只停留在聊天視窗:用 n8n 打造真正能做事的 AI Agent
很多人每天使用 ChatGPT,卻發現真正麻煩的工作沒有變少。問題不在 AI 不夠強,而是它還沒有接上你的工作流程。
2024年7月6日
藍新金流在 next.js 轉址失敗解決方法
藍新金流在完成交易後,有個 ReturnURL 參數可以協助轉址,是使用 form submit 的方式來 redirect。 然而直接填入網址後,在 next.js 裡面會發現出現奇怪的錯誤! x-forwarded-host header with value does no...
Comments
留言
有想法、問題或補充都可以留下來,我會整理成後續文章或課程更新的方向。