wordpress blog setting

WordPress部落格參數超清楚對照,讓你不再霧煞煞

最後更新:November 28, 2022

左圖 / Header、Content、Footer位置。右圖 / Container區域

如果你和我一樣使用Astra當作主題,那可以參考下面的解說。

每個網站的架構其實大同小異,下面將一一解說,讓各位小白省下碰壁的時間。首先網站三要素(如上圖左):

  1. Header:主要放置Logo和有要切換置其它頁面的超連結選單,通常為單層或下拉式。也可以放按扭或是社群Icon
  2. Body:放置內容的位置
  3. Footer:放置copyright,或是其它超連結選項,也可以放社群Icon

Header & Footer

為符合整體性,網站內的Header和Footer只會有一種型式,不論你切換置哪個分頁,但你可以選擇是否顯示。Astra提供Header builder和Footer builder讓我們可以客製風格,包含Logo位置、大小、header背景顏色、選單間距和位置、選單字型、字體大小、字體顏色,以及當鼠標在超連結字體上時,字體的變化。由下圖可見相關設定的展開。

Header和Footer就是這麼單純,記住一個原則,這兩個區域是獨立於內容區域(body)之外,裡頭的原素一定要從builder選項去設定,不論是位置、字體、顏色。

Header和Footer設定位置

Container

現在螢幕多為寬版螢幕,因此內容也會變的相當發散不易閱讀,為使讀者不必像掃雷般左右移動眼球,可以使用Container將重點內容集中於中間方便閱讀(如上圖右),這也是Container的主要用途。其設定需從Global進入,首先你可以由四種樣式選擇預設。另外在page和blog,你可以選擇繼承也可以另外選擇其它樣式。四種樣式分別為boxed, content boxed, Full width/contained 和 Full width/stretched,其效果如下圖所示。

另外提醒一下,Global裡面的選項效果只限於content區域(body),在這裡改變button樣式是不會套用到header和footer。不要像我傻傻的改了半天看不到效果而挫折。

Container設定位置
四種不同layout格式

Page & Sidebar

接下來介紹Page和Sidebar。一個網站除了入口網頁外(home page or landing page),還會有其它各種特殊用途的網頁,如關於我、聯絡我們、或是產品頁面,這些頁面通常需要獨立設計,你可以選擇你要的Layout和是否有sidebar,sidebar是左是右。一般sidebar會放一些分類、最新文章或是置入廣告也很常見。

Page 預設layout和Sidebar選擇

Blog & Post

page可以依其功能客製設計,但一篇篇post如果都需要製作成page,那可定會累死一堆創作者。所以wordpress也很貼心的將兩者分開,讓我們更容易分別去維護設計和文章內容。另外在blog/Archive或single post你也可以自行選擇layout和決定是否有sidebar,有時候考慮閱讀體驗,有些人會在single post把sidebar拿掉。

Blog / Archive設定
Single Post設定

Typography

請記得Global裡的設定只會套用在content。接下來我們來介紹Typography,主要是選擇字型和設定字體大小和行高。字體主要分為heading和body。heading又可分為H1~H6,數字越小字體越大,且SEO效果越好。我們一般用到H3;body也稱為paragraph,就是一般非highlight的敘述文體,下圖有針對字體做詳細介紹。

字型設定

Color

要設定用體的顏色,也是從Global中的Color去設定。為求網站整體性,你可以先選擇預設配色,也就是你網站想要呈現什麼樣的風格,如果工業風就可以選擇黑白配色,如果喜歡北歐清新溫暖的顏色就可以選擇原木等低彩度顏色。如果你沒有想法或是對色彩沒有概念,也可以透過 Colors 參考網路上的配色讓你輕鬆變達人。

主題顏色設定
COLORS

Homepage setting & Menu

Homepage setting可以是放blog archive也可以另外做一個炫麗的landing page。Menus讓你將已做好的page納進來,可以有很多Menu分別放在不同的區域,例如primary menu放在header,而secondary則放在footer。

CSS

最後的最後,就是超級好用的additional CSS,使用時機為當你有些字體或是樣式需要修改,但你不知道要去哪改,甚至是有些根本沒有選項讓你選,那就直接修改CSS即可。現在絕大部分網頁架構都是HTML,但它是枯燥的內容和架構,通常需要CSS來潤飾才有辦法吸引我們的目光,如果想再加點動畫特效,就得仰賴Java,也許可以另外出一篇文章介紹三者關係,以及如何找到內容元素的ID或Class並使用CSS改變其特徵。

HomePage setting、Menu和CSS