WordPress 快速打造前端 #3

前端來說其實 wordpress 製作是非常方便的,使用 wordpress 上手是非常簡單的,比起自己刻 Html + CSS,因為之前曾經幫某間公司寫過網站前端,但是當時那間公司的人對於網站開發真的是太不熟悉了,也沒有使用甚麼開發框架,一切都是我按照切圖尺寸一個一個刻上去,加上畫 UI 的人還是實習生,從一開始到後來不知道改版了幾次,想到那時候的網頁生活,真的是苦不堪言。

所以當我使用 wordpress 的時候,是很開心的。但是有一些功能還是要摸一下才會適應,所以我就來分享我這段時間所學習到的前端技巧。這一篇的主要是對於 佈景主題、主選單以及側邊欄的 教學。

我們這個 blog 主要目的是希望能夠在每次學習一個新的工具時,能夠透過建立學習筆記來加深印象也重新建構一下所學的東西。所以我們網站會以文章為導向,所以大致上想法首頁是以文章列表為主要頁面。首先,第一步就是選擇喜歡的模板。

第一步 : 選擇模板

外觀 > 佈景主題

進去之後會看到有一些預設的佈景主題,如果都不喜歡也可以到「安裝佈景主題」來選擇其他的樣式。

而在選擇樣式的時候,可以先點選預覽,但尚未安裝的預覽所看到的畫面並不是套用在自己的網站後會呈現的樣子。

還有一點要注意的是,因為在預覽的時候會看到有的網頁首頁很漂亮,就直接點選安裝,但有些主題是沒有頁首設定的,只能自己客製。而像是 Sydney 有包含首頁的主題,可以選擇投影片輪播等功能,所以再找主題的時候先確認好自己的需求與主題所提供的服務是否相符。

選擇好再將主題啟用並發佈,就可以了。

再創建完頁面之後,我想要設定我的 menu。我希望主選單的選單有下拉式選單可以選擇文章分類,並且有一個首頁的母菜單,所以我要先新增頁面與文章分類。

第二步 : 新增頁面

在頁面 > 新增頁面,然後先將這個頁面的名稱命名為關於我們,並且開始編輯頁面內容。

前端

第三步 : 新增分類

文章 > 分類,然後輸入分類的名稱代稱就可以了。

前端

第四步 : 編輯主選單

外觀 > 選單

前端

這個畫面有兩個欄位,左邊欄是現有的頁面、文章、分類等等,而右邊欄位是選單,所以我把剛剛新增的關於我們移到右邊的選單中。

再來,我選擇自訂連結,將網址輸入我們網站 index 的網址,然後文字填入「首頁」,新增至選單。

因為首頁是母項目,而關於我們是子項目,所以點選關於我們,展開後會看到有一個 > 移動選單項目 > 點選 成為 [ 首頁的子項目 ] ,或是直接用滑鼠向右拖曳一格,就可成為上一格的子項目,這個做法也可以做成子子項目。

第五步 : 新增分類彙整頁面

一樣是進入 外觀 > 選單

與上一個做法一樣,將左邊欄的「分類」選擇想要的分類新增至右邊的選單中。

因為 WordPress 有一個分類彙總功能,所以只要直接將分類或是標籤新增至選單,就會直接整理出該分類或包含某標籤的文章彙總,非常方便。

第六步 : 將選單套用至佈景主題

外觀 > 自訂 > 選單 > 點選剛剛創建的選單 ( home menu )

進去之後勾選 primary menu , 等一下預覽看出現的是不是剛剛設定的選單。

第七步 : 側邊欄工具

外觀 > 小工具

前端

WordPress 有很多內建的小工具,可以自行新增至網頁的區塊,因此我們要將 Sidebar側邊欄的地方新增一些近期文章,所以我們在左邊內建的小工具中點選我們要的近期文章,然後會出現一個下拉式選單,點擊 Sidebar 就會將這個項目新增到側邊欄的位置。

以上就可以簡單的刻劃出網站的基礎架構了,之後若有再摸索到更進階的功能,再發表一篇進階教學給大家。

馬上看開發者一定要知道關於wordpre

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。