Kadence 教學(xué):用 Kadence Blocks設(shè)置條件顯示完整教學(xué)

在使用 Kadence Blocks Pro 設(shè)計(jì) WordPress 頁面時(shí),可能會(huì)遇到某些內(nèi)容只在特定情境下展示的需求。例如你根據(jù)特定條件動(dòng)態(tài)控制頁面元素(如區(qū)塊、模塊、內(nèi)容等)的顯示或隱藏。Kadence 的“條件顯示”功能能根據(jù)特定字段或頁面數(shù)據(jù)控制區(qū)塊的可見性,讓頁面更具動(dòng)態(tài)表現(xiàn)力。

圖片[1]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

功能簡(jiǎn)介

條件顯示可以用于多個(gè)核心區(qū)塊,包括:

  • 高級(jí)圖像
  • 高級(jí)文本
  • 區(qū)塊 Section
  • 行布局
  • 單個(gè)圖標(biāo)
  • 圖標(biāo)列表
  • 高級(jí)按鈕
  • 信息框

每個(gè)支持該功能的區(qū)塊都能設(shè)置一條或多條條件,依據(jù)當(dāng)前頁面或文章的數(shù)據(jù)動(dòng)態(tài)控制顯示狀態(tài)。

條件設(shè)置入口

選中支持的區(qū)塊后,在右側(cè)設(shè)置面板中進(jìn)入“高級(jí)”選項(xiàng)卡,展開“條件顯示設(shè)置”,即可開始配置。

圖片[2]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

可選條件

系統(tǒng)提供了大量字段用于設(shè)置條件,比如:

  • 文章標(biāo)題、類型、狀態(tài)、日期、URL
  • 自定義字段
  • 特色圖像 URL
  • 分類信息
  • 作者姓名、字段值
  • 評(píng)論數(shù)量
  • 歸檔標(biāo)題與字段
  • 可重復(fù)字段中的子內(nèi)容
圖片[3]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

這些字段都可作為判斷依據(jù),用來決定某個(gè)區(qū)塊是否展示。

條件數(shù)據(jù)來源

默認(rèn)情況下,數(shù)據(jù)來源為當(dāng)前文章或頁面。如果有特別場(chǎng)景,比如需要從指定頁面抓取字段值,也可以點(diǎn)擊設(shè)置框中的鉛筆圖標(biāo),手動(dòng)修改數(shù)據(jù)源。

圖片[4]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

比較方式說明

條件設(shè)置中可以選用多種比較方式,包括:

  • 字段不為空時(shí)顯示(Not Empty)
  • 字段為空時(shí)顯示(Empty)
  • 值為 truefalse
  • 等于 / 不等于某個(gè)值
  • 大于 / 小于某個(gè)值
  • 大于等于 / 小于等于某個(gè)值
圖片[5]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

靈活組合這些判斷方式,可以實(shí)現(xiàn)多種展現(xiàn)規(guī)則。

應(yīng)用示例:控制特色圖像區(qū)塊顯示

在文章模板中,常常加入一個(gè)特色圖像模塊。若文章未設(shè)置圖片,這個(gè)區(qū)塊可能會(huì)在前端留下空白位置。

此時(shí)可以用條件顯示功能,讓該區(qū)塊只在存在圖像地址的情況下展示。

圖片[6]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

操作步驟:

  • 選中高級(jí)圖像區(qū)塊
  • 打開右側(cè)設(shè)置,進(jìn)入高級(jí)選項(xiàng)卡
  • 添加條件字段為“特色圖像 URL
圖片[7]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示
  • 保持?jǐn)?shù)據(jù)源為當(dāng)前文章
圖片[8]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示
  • 比較方式選擇“Not Empty”
圖片[9]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

完成設(shè)置后,只有在有圖像地址時(shí),圖片區(qū)塊才會(huì)出現(xiàn)在頁面中。反之則不顯示,頁面布局不會(huì)留下空隙。

效果對(duì)比

在沒使用條件顯示時(shí),若文章未設(shè)圖像,前端會(huì)保留空區(qū)域。
啟用該功能后,系統(tǒng)將自動(dòng)忽略這些無效內(nèi)容,展示效果更整潔自然。

圖片[10]-Kadence 條件顯示設(shè)置教程:按字段動(dòng)態(tài)控制區(qū)塊顯示

總結(jié)

Kadence Blocks Pro 中的條件顯示功能,為區(qū)塊編輯帶來了更多靈活性。借助這一工具,WordPress頁面內(nèi)容可以依據(jù)不同條件做出反應(yīng),省去手動(dòng)修改模板的繁瑣操作。

這項(xiàng)功能在展示文章內(nèi)容、控制布局結(jié)構(gòu)、實(shí)現(xiàn)定制化輸出等場(chǎng)景中都非常實(shí)用,建議充分發(fā)揮其作用,讓頁面內(nèi)容更有表現(xiàn)力。


聯(lián)系我們
教程看不懂?聯(lián)系我們?yōu)槟赓M(fèi)解答!免費(fèi)助力個(gè)人,小企站點(diǎn)!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時(shí)間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉(zhuǎn)載聲明
本文作者:賊將鼠膽
THE END
喜歡就支持一下吧
點(diǎn)贊843 分享
評(píng)論 搶沙發(fā)

請(qǐng)登錄后發(fā)表評(píng)論

    暫無評(píng)論內(nèi)容