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 查询回圈区块是什麽?
什麽是区块编辑器?


<<:  Day21-27. Remove Element

>>:  [第二十二天]从0开始的UnityAR手机游戏开发-APP内撷取画面

理解 HTTP(二):Method、Status Code

昨天大致谈了网站内容是怎麽被下载到电脑里的,今天稍微深入一点聊聊关於 HTTP 这个协定的一些简单并...

Day 7:git 版本控制

本篇文章同步发表在 HKT 线上教室 部落格,线上影音教学课程已上架至 Udemy 和 Youtu...

从 JavaScript 角度学 Python(1) - 目录与废话

前言 这是我今年第三次挑战 iThome 铁人赛,除此之外这也是我的第四篇铁人赛系列文章,其实我有点...

NNI执行的流程

一个Experiment的运行逻辑是: • Tuner 接收搜索空间,生成configuration...

【Day 4_ Arm Mali GPU家族究竟是何方神圣_上篇】

前几篇文章中提到Arm与游戏的关系时,总是会提到Arm Mali系列,光是去年,Arm在全球的合作夥...