iT邦幫忙

2023 iThome 鐵人賽

DAY 6
3
WordPress

暢玩 WordPress 30 天 部署 X 開發 X 上線系列 第 6

Day06: 裝飾 WordPress! 使用 WordPress 設計頁面

  • 分享至 

  • xImage
  •  

我們現在會撰寫文章了,那我們還需要頁面來搭配呈現

我們昨天學到了如何使用編輯器來撰寫文章了,今天我們將會操作編輯器來實現一個頁面。

這邊要注意的是文章與頁面編輯器在 WordPress 沒有安裝外掛的狀態下基本上是一至的,僅有部分的功能與概念不同,因此本文章會與昨日的文章頁面較多相似,如已熟悉使用的讀者可以跳著閱讀差異部分即可,為了保持文章的完整性仍會完整介紹頁面的功能。

https://ithelp.ithome.com.tw/upload/images/20230907/20162570aIuihZ9KBn.png

開始介紹頁面的編輯器

當你對著頁面區塊按下 / 就可以呼叫出這張圖上的選單,我們可以看到支援很多種格式

當我使用編輯器時操作發布時,我的前台頁面會是這樣
由這張圖可以知道,我們的頁面預設被直接加入右上角的選單中(文章也可以加入,差異只是在改變連結)
https://ithelp.ithome.com.tw/upload/images/20230907/20162570n59ZCQmfNj.png

當你點選了某一個段落時,會出現該段落的細節設定,他們有一組共通設定如下
https://ithelp.ithome.com.tw/upload/images/20230906/20162570R2Arxu6gaR.png

  1. 複製:複製該段落到剪貼簿供貼上。
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570BA5NLjfcEj.png

  2. 再製:會在下方複製一個一模一樣的區塊。
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570koBF3xbSvS.png

  3. 與前方插入:在上方插入一個空區塊。
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570JNm66p16Ec.png

  4. 於後方插入:在下方插入一個空區塊。
    https://ithelp.ithome.com.tw/upload/images/20230906/201625703w77yAJgkN.png

  5. 複製樣式:跟複製一樣,但他是複製大小、顏色、連結
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570BA5NLjfcEj.png

  6. 貼上樣式:貼上大小、顏色、連結

  7. 組成群組:可以把文字跟圖片弄成一個區塊,可以直接整體拖曳。
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570XQC3TJTJs8.png

  8. 鎖定:可以禁止移動或刪除
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570NXR6kZ2jRy.png

  9. 建立區塊版面配置/可重複使用區塊:可以將區塊複製並且儲存,在別的地方快速復用
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570k4Oz8jErgM.png

  10. 移至:將所選移至其他區塊

  11. 編輯 HTML 程式碼:WordPress 文章編輯器其實就是 HTML 編輯器,所以可以直接編輯 HTML
    https://ithelp.ithome.com.tw/upload/images/20230906/20162570vNdQr48Wjg.png

  12. 刪除:刪除所選區塊

為文章加入上層頁面

讓我們將現在的頁面加入範例頁面之下,這樣做可以讓前端的選單出現二級選單
https://ithelp.ithome.com.tw/upload/images/20230907/20162570lHFgcoOShh.png

https://ithelp.ithome.com.tw/upload/images/20230907/20162570w7JOnof80D.png

這樣的技巧可以讓你的頁面分類,也可以將文章的連結放於頁面當中!
增加呈現的豐富度與彈性。

總結

我們今天學到了如何修改頁面,頁面編輯器的構成主要如圖:
https://ithelp.ithome.com.tw/upload/images/20230907/20162570aIuihZ9KBn.png

  1. 文章與頁面的架構與操作基本上一樣。
  2. 與文章相比少了標籤與分類。
  3. 與文章相比多了上層頁面與排序功能。
  4. 排序主要用於選單中的上下關係。

明天的預告

我們明天會針對 WordPress 的核心功能「外觀」也就是佈景主題進行介紹,其中也會介紹到頁面編輯器的作用與該如何使用。

期待明日能讓讀者能下載佈景主題並套用在自己的網站之上,透過修改現有的主題實現理想中的網站呈現。


上一篇
Day05: 寫作 WordPress! 如何撰寫文章與設定分類呈現
下一篇
Day07: 修飾 WordPress! 使用佈景主題與外觀編輯器實現理想網站
系列文
暢玩 WordPress 30 天 部署 X 開發 X 上線30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言