OXYGEN Builder是WordPress中的邏輯大師-Inner Content

|發布於:
2022-01-06
❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

Last updated at — 2022-01-27 02:34

Inner Content,中文可理解成網頁的「內在內容」!那麼,既然有「內在的內容」,是否也該有個「外在內容」?

嗯!這是個好問題!
不過,很抱歉,在網頁的HTML架構中,沒有這麼複雜,只要是「內容」,通常都是寫在<body>這個標籤裡,沒有區分什麼內在或外在的內容。

至於在HTML架構中的<head>標籤,也不是我們在佈景主題裡面的「Header」,因為,佈景主題裡面所設定的「Header」,也是寫在<body>這個標籤裡。

1-Inner Content2-HTML3-header-footer-in-body
⇦左右滑動看其他圖片⇨

擔心文字說明太抽象,我還錄了影片說明(Sorry,聲音可能有點大...)

Inner Content之於OXYGEN

header-and-footer-in-body

「Inner Content」這個說法,我目前只發現於OXYGEN Builder;但是,在WordPress的架構中,或許可以將「佈景主題」的框架,理解成「外在內容」,而我們在「Post/單一文章」或「page/單一頁面」中,透過區塊編輯器所編輯的內容,則是可以理解成所謂的「Inner Content」。
所以,當我們在佈景主題裡面設定的「Header」和「Footer」,都是寫在<body>這個標籤裡。

於是,衍伸到OXYGEN Builder中,這個「外在內容」則是我們自己創建,用來取代一般佈景主題架構的「Templates」;而「Inner Content」之於OXYGEN Builder,則是包覆在「Templates」裡面的「內在內容」。

4-where-is-Inner Content5-Inner Content-in-OXYGEN6-free-OXYGEN
⇦左右滑動看其他圖片⇨

和一般佈景主題最大的差別在於,OXYGEN Builder比一般佈景主題還要更自由!
因為你可以創建無限的「外在內容/Templates」和「內在內容/Inner Content」。也就是說,你可以為一個網頁頁面(包含文章、頁面,甚至是自訂的Post Type)創建無數個「外在內容/Templates」,去包覆無數個「內在內容/Inner Content」。

而這個OXYGEN Builder所謂的「Inner Content」,它可以由OXYGEN編輯而產生,也可以由WordPress內建的區塊編輯器而產生,當然也可以由WordPress舊版的「Classic Editor」所產生。

學習OXYGEN Builder的過程中,不但摸索到HTML框架、WordPress架構、CSS、Java Script的,更是一段邏輯解密的旅程...

Inner Content的特色

7-about-Inner Content
  • 外面一定會被一個透過OXYGEN builder所創建的「Templates/模板」包覆。
  • 任何一個「Templates/模板」也可以透過「INHERIT DESIGN FROM OTHER TEMPLATE」,而成為別的「Templates/模板」的「Inner Content」。
  • OXYGEN builder會為「文章/Post」、「頁面/Page」...等等的這些在WordPress稱為「Post Types」的「Inner Content」創建「ct-inner-content」這個CSS Selector。

Inner Content在哪裏?

8-Inner Content-in-OXYGEN

前面提過,在OXYGEN builder中,「Inner Content」一定是被包覆在「Templates」裡面,但是,更厲害的是,某個「Templates」也可以是別的「Templates」的「Inner Content」。

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

有套用其他「Template」的「Template」

template-in-template-1

Templates這東西,在WordPress中,可以理解成佈景主題、頁面編輯器所提供的可一鍵套用的範本(模板),而這些模板,可以套用在Header、Footer以及頁面中各區塊所需要的樣式和功能。

在OXYGEN builder中,也有提供預建好的網站模板,以及各區塊所需的模板;但是,OXYGEN builder最自由的則是,所有的Templates可以自由設計,不只是Header、Footer以及頁面中各區塊,甚至是「單一文章」、「分類彙整」、「404頁面」、「搜尋結果頁面」...等等的版面設計和功能規劃,都可以自由設計和規劃,可謂是真正完整的全自由。

而且,每一個「Template」裡面,都還可以放其他的「Template」,而這個裡面的「Template」,就是外面的「Template」的「Inner Content」...

何時需要「Template」裡面的「Template」?

template-in-template

寫到這裡,大概有人會想問,為什麼?何必呢?
這就是OXYGEN builder邏輯運用的開端!

打個比方吧!在我的網站中,區分成「一般文章」和「攝影集文章」,這二類文章的Header與Footer相同;但是,「攝影集類型」的文章不需要目錄,此外,內容的排版也完全不同。
於是,我需要先製作一個能共用的「Template」,裡面是Header與Footer,再製作二個不同的「Template」,分別給「一般文章」和「攝影集文章」使用。
而這2個分別給不同文章套用的「Template」,就成了共用的「Template」的「Inner Content」囉!

Template」包覆另一個「Template」的方式

在要成為另一個Template的「Inner Content」的那個「Template」的WordPress編輯頁面中,在「INHERIT DESIGN FROM OTHER TEMPLATE」下方的下拉選單中,選擇要被哪個「Template」包覆。

操作步驟:

  1. OXYGEN Builder
  2. Templates 
  3. Add New Template或Edit「被包覆」的那個
  4. INHERIT DESIGN FROM OTHER TEMPLATE
  5. 從下拉選單中選擇「負責包覆」的那個

有繼承模板的Singular

singular

Singular這個名詞,在OXYGEN Builder中,意指WordPress裡面內建的Post Types,像是「Post」、「Pages」、「Medias」...等等,或者像是使用CPT UI(Custom Post Type UI)自創的Post Types,這些Post Types就是OXYGEN Builder所謂的Singular。

這些被稱為Singular的「Post Type」,如果有套用「在OXYGEN Builder中所創建的Templates」,那麼,這些Singular,在WordPress的編輯頁面(區塊編輯器或Classic Editor)中所放入的內容,對於OXYGEN Builder來說,就叫做「Inner Content」,而且,在;反之,如果這些Singular,沒有套用任何透過OXYGEN Builder創建的任何「模板/Template」,那麼,也就不會獲得「ct-inner-content」這個CSS的selector。

Singular繼承模板的方式

在「Templates」中指定

在OXYGEN Builder的「Templates」的編輯頁面中(未進入OXYGEN編輯前),在「WHERE DOES THIS TEMPLATE APPLY?」欄位選擇「Singular」,再選擇要套用到哪一種「Post Type」,甚至再選擇只套用到特定分類(Categories)或標籤(Tags)的「Post Type」。

操作步驟:

  1. OXYGEN Builder
  2. Templates
  3. Add New Template或Edit「負責包覆」的那個Template
  4. 「WHERE DOES THIS TEMPLATE APPLY?」欄位選擇「Singular」
  5. 再選擇要套用到哪一種「Post Type」
  6. 甚至再選擇只套用到特定分類(Categories)或標籤(Tags)的「Post Type」

在「個別頁面或文章頁面」中設定

在單一文章或頁面的WordPress編輯器中,找到OXYGEN的欄位,在「RENDER PAGE USING TEMPLATE」下方選擇要套用的「Templates」。

操作步驟:

  1. 在單一文章或頁面的WordPress編輯器中
  2. 找到OXYGEN的欄位
  3. 在「RENDER PAGE USING TEMPLATE」下方選擇要套用的「Templates」

OXYGEN Builder中的Inner Content就介紹到這囉!有任何問題歡迎在下方的留言板討論٩(^ᴗ^)۶

好嘛好嘛...臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手。
最多可以按5下,那就幫我按5下吧!
算我求你啦啦啦~~~
謝謝你、我愛你❤
臉書或Google帳號就可以快速登入喲...
最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
Cloudways專屬折扣☞註冊輸入折扣碼
MMM8
,獲得首四月6折優惠!
Cloudways專屬折扣☞輸入折扣碼
享首四月6折優惠!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x
()
x