iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

WordPress 區塊編輯器與區塊套件組合外掛【新手村】系列 第 22

22 | WordPress 查詢迴圈區塊 Query Loop Block

https://ithelp.ithome.com.tw/upload/images/20211006/201163577apgLSZwjs.jpg
查詢迴圈區塊是 WordPress 5.8 新推出的功能,初步使用結論是不錯的,不過部分 UI / UX 可以改善,不然對部分新手可以會做成錯誤的操作,但非常期待這個功能的發展,作為 全站編輯 (Full Site Editing) 重要的組成部分,這次的更新是一個重要的里程碑,希望新手不要閱讀得太辛苦。

引用完整教學:

WordPress 查詢迴圈區塊是什麼?


查詢迴圈區塊 (Query Loop Block) 的目的是什麼?

https://ithelp.ithome.com.tw/upload/images/20211006/20116357uvwtIETzck.jpg

https://ithelp.ithome.com.tw/upload/images/20211006/20116357iNHxF1iADN.jpg

這次教學上半部分是設計一份可以重複套用的「文章範本」,範本內容包含文章標題、精選圖片、內容摘要、發文時間和文章分類等等,然後交給「查詢迴圈」功能執行。所以「查詢迴圈」的角色就是重複執行「文章範本」,而重複次數取決於文章查詢總數,次數的部分站長可以自由控制。

查詢迴圈區塊 能顯示指定參數的文章,與 PHP 迴圈相似但不須撰寫程式碼。這個區塊能顯示指定分類的文章,能達成類似建立作品集或私房食譜頁面的目標,使用者可以將這個區塊類比為功能較為複雜但更為強大的 [最新文章] 區塊。此外,區塊版面配置建議能讓建立指定條件的文章清單變得比以往更容易。


如何新增查詢迴圈區塊 (Query Loop Block) ?

https://ithelp.ithome.com.tw/upload/images/20211006/20116357Gzkyd29aIa.jpg


【單欄式】文章列表「清單檢視 List view」 | 選擇外觀設計流程

https://ithelp.ithome.com.tw/upload/images/20211006/20116357PXVEEl0dYj.jpg


【一欄式】文章列表 | 樣式 01

https://ithelp.ithome.com.tw/upload/images/20211006/201163574YpRg0V8ja.jpg


從「多個」外觀,選擇一款喜歡的樣式

https://ithelp.ithome.com.tw/upload/images/20211006/201163572GZdhtO7wd.jpg


「寬幅寬度」vs「全幅寬度」的差異?

https://ithelp.ithome.com.tw/upload/images/20211006/20116357omszzykQlT.jpg


「清單檢視 List View」和「格狀檢視 Grid view」比較

https://ithelp.ithome.com.tw/upload/images/20211006/20116357aU0TymeGE5.jpg


關於「顯示設定 Display settings」的配置

https://ithelp.ithome.com.tw/upload/images/20211006/20116357wZIthD2fET.jpg


回到「區塊編輯器」的設定

https://ithelp.ithome.com.tw/upload/images/20211006/20116357SRvprWYDdr.jpg


查詢迴圈 | 區塊設定 01

https://ithelp.ithome.com.tw/upload/images/20211006/20116357a2fBHFuZHT.jpg


查詢迴圈 | 區塊設定 02

https://ithelp.ithome.com.tw/upload/images/20211006/20116357jAWldzOuMQ.jpg


開啟「清單檢視 List View」模式

https://ithelp.ithome.com.tw/upload/images/20211006/20116357i39RFwyzT4.jpg


預設標準的「文章範本」結構

https://ithelp.ithome.com.tw/upload/images/20211006/20116357hUFJuS8Qt4.jpg


完成品:接近 WordPress 佈景主題的效果

https://ithelp.ithome.com.tw/upload/images/20211006/20116357k8dA9twtXf.jpg

廷伸閱讀:

WordPress 查詢迴圈區塊是什麼?
什麼是區塊編輯器?


上一篇
21 | WordPress 短代碼區塊 Shortcode Block
下一篇
23 | 【進階教學】瞭解 WordPress「清單檢視 List View」功能
系列文
WordPress 區塊編輯器與區塊套件組合外掛【新手村】30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言