上周完成 WordPress 安裝與樹莓派的中文輸入法安裝後, LAMP 技術堆疊的網站系統可說骨幹已架設完成, 接下來即屬於 WordPress 網站後台管理設定的工作, 也就是網站的系統與內容管理. 我原本以為兩三天就能搞定, 實際操作卻不時碰壁, 整整花了一周才摸出一些頭緒. 雖然使用 WordPress 架站不需要懂 HTML, CSS, Javascriipt 與 PHP 語言等網頁技術, 但學會怎麼用也是要花時間學習的.
本系列之前的文章參考 :
本篇測試與調校參考書籍如下 :
- WordPress for Dummies 9th edition (John Wiley & Sons, 2021)
- WordPress 5 Cookbook (Packt, 2020)
第一本是按步就班的教科書, 第二本則是問題導向的實戰書.
1. 網站管理快捷列 :
在上一篇測試中已經將 WordPress (v5.7.2) 的網站架好, 開啟瀏覽器於網址列輸入 localhost 或 127.0.0.1 便可瀏覽網站內容, WordPress 在安裝時已將第一篇預設文章寫入資料庫, 因此會出現如下畫面 :
網站最上方的黑邊是管理網站的快捷列, 只有網站管理員登入後才看得到, 其他瀏覽者看不到, 此快捷列有三個選單, 第一個有 "W" 標誌的是關於 WordPress 的連結, 第二個選單可直接進入 "控制台/佈景主題/小工具/選單" 等後台設定頁面, 第三個選單可直接新增 "文章/媒體/頁面/使用者", 最後的 "編輯文章" 連結則可進入目前這篇文章的編輯頁面 :
http://127.0.0.1/wp-admin/
控制台頁面如下 :
WordPress 網站管理就是透過這個控制台.
2. 下載安裝主題佈景 (Theme) :
WordPress v5.7.2 安裝好後預設的主題佈景版面名稱為 twenty twenty-one, 這風格不見得適合所有的網站, 所以管理網站的第一步應該是去挑選一個適合自己網站屬性的主題佈景 (theme) 來套用. WordPress 提供了豐富的免費主題佈景, 網路上也有許多付費的布景, 參考 :
安裝主題佈景可點 "控制台/外觀/佈景主題" 或 "歡迎使用 WordPress" 區塊中的 "更換為另一種佈景主題" 按鈕, 都會進入主題佈景管理頁面 :
按 "安裝主題佈景" 鈕或底下空白區的 "+" 鈕進入布景列表頁面 :
可點左上角的精選, 熱門, 最新上架等分類選單一個一個去挑選, 或者在右方的搜尋框中輸入關鍵字, 例如 personal, food, 或 education 等鎖定特定主題去找 :
經過篩選後, 我覺得 Gillian 與 unlimited 這兩個布景都很適合個人網站之用, 滑鼠移到布景上方時右下角會出現 "安裝" 鈕, 按下即進行安裝 :
不過我最後還是覺得 Gillian 布景最適合做為研究學者的個人網站 :
3. 網站基本設定 :
選好主題佈景之後就可以開始管理網站內容, 首先是網站設定, 其位置在 "控制台/設定" 選單下, 包含 "一般", "寫作", "閱讀", "討論", "媒體", "永久連結", 以及 "隱私權" 等七個設定頁面, 其中目前比較重要的是 "一般" 與 "閱讀" 這兩個設定頁面 :
首先進入 "一般" 設定頁面, 這是網站最基本的設定, 包含網站標題文字, 網址, 管理員 email, 介面語言, 時區, 時間日期格式等欄位, 主要是填 "網站標題" 與 "網站說明" 這兩欄, "網站標題"就是網站的大標題, 而 "網站說明" 則可作為小標題, 此處我填網站的英文名稱. :
第二個需要設定的是 "設定/閱讀" 頁面 :
其中最重要的是第一個欄位 "網站首頁顯示內容", 這是用來決定網站的首頁 (也就是輸入網址例如 127.0.0.1 或 www.mysite.com.tw 時顯示的頁面) 要顯示 "文章 (article)" 還是 "頁面 (page)", 選 "最新文章" 表示首頁是部落格形式, 所寫文章會依發表之先後堆疊顯示於首頁, 適合新聞性的網站; 選後者 "靜態頁面" 表示首頁內容是固定的靜態網頁. 對於學術研究者的個人網站而言, 選擇 "靜態頁面" 較適合, 選好後須按底下 "儲存設定" 鈕才會生效.
關於頁面與文章的差別, 可下面這篇文章 :
總而言之, 兩者主要的差別就是, 文章因為會不斷增加 (版主寫網誌, 發表新聞或心得等), 因此有 "分類" 欄位可以將其分門別類以利搜尋, 另外也具備可增加互動效果的留言功能; 而頁面內容幾乎固定且數量較少 (例如 "首頁", "關於我", "聯絡方式" 等網頁), 有需要才會新增, 因此不需要分類欄位, 也不需要開啟留言功能. 其次是頁面是透過 WordPress 的頁面編輯器設計, 因此有豐富的排版元素, 版面彈性大; 文章則是套用固定版面, 外觀都一樣.
4. 修改頁面與主選單設定 :
做完網站基本設定後就可以來管理網站靜態內容的部分, 也就是上面提到的頁面 (page) 編輯作業, WordPress 安裝完成時已經預先建好幾個預設頁面, 點選 "控制台/頁面" 就會進入頁面列表 :
這些頁面都是網站必要的頁面, 但其內容需要我們自行編輯. 湘雲老師希望網站要有如下頁面 :
- 首頁
- 個人簡介
- 教學
- 研究
- 著作發表
- 論文指導
其中首頁預設已經有了, 個人簡介可以用預設的 "關於我" 來改, 其它頁面則須新增.
首先來改首頁內容, 點選 "首頁" 會進入編輯器頁面, 除了標題外其實沒有內容, 點左上角的 "+" 鈕即可在標題下方新增一個區塊 :
然後到 "控制台/外觀/選單" 將此首頁加入主選單 :
然後按右下角的 "儲存選單" 鈕才生效.
當設定好主選單頁面後, 點選 Gillian 主題佈景網頁左上方的首頁選單連結卻都出現如下找不到網頁的訊息 :
連旁邊的 "關於", "部落格", "聯絡方式" 等連結也是, 回頭檢視前面的選單與頁面設定都沒錯啊! 到底哪裡出問題? 我搜尋 "Oops! That page can’t be found" 找到下面篇文章, 其中 Justina 回覆說這是永久連結設定的問題 :
我按照其說明點開 "控制台/設定/永久連結" 頁面, 似乎不用點選上面 "一般設定", 只要直接按下最底下的 "儲存設定" 鈕就可以, 這會更新資料庫中的頁面連結資訊 :
然後再點網頁中的選單連結, 果然就不再看到 "Oops! That page can’t be found", 順利顯示頁面了.
接下來是把預設的 "關於" 頁面改成 "個人簡介", 在頁面列表中點選 "關於" 進入頁面編輯器 :
編輯好後需按右上角的 "更新" 鈕才會生效. 瀏覽更新後的網頁結果如下 :
嗯, 頁面簡單樸實, 正是學者網站需要的風格.
5. 新增頁面 :
接下來要新增教學, 研究, 著作發表, 論文指導等新頁面, 按頁面列表上方的 "新增頁面", 逐一建立各頁面如下 :
完成後頁面列表如下 :
目前這幾個新增的頁面都只有一個標題與佔位用的內容, 有空再填補真實內容, 點每一個頁面進去開啟頁面編輯器, 裡面可以新增段落, 清單, 自訂 HTML 等區塊, 讓我們可以不需要懂 HTML 就能線上編輯網頁內容, 以預設頁面 "聯絡方式" 為例 :
編輯完畢按右上角的 "更新" 鈕即可.
6. 新增主選單項目 :
接著要將上面新增的頁面新增到網頁最上方的主選單中, 點選 "控制台/外觀/選單" :
新加進來的頁面會排在最後面, 點每一個選單項目右邊的倒三角形 icon 會展開該項目的操作連結, 點 "上移一位" 與 "下移一位" 可上下移動此項目在選單中的位置 :
調整好後必須按右下角的 "儲存選單" 鈕才算數 :
這時瀏覽網站即可看到最上面的主選單已經出現剛新增的項目, 點按即顯示頁面內容 :
這樣網站雛型就架起來了, 慢慢再來補強資料.
6. 安裝外掛 :
既然網站已架起來, 在調校期間想知道測試的流量有多少, 就需要統計每日瀏覽人數, 這功能可以利用 WP-statistics 這個外掛來達成, 參考之前管理學會網站時的紀錄第 6 項 :
點選 "控制台/外掛" 會顯示目前已安裝的外掛列表 :
在列表右上方的輸入框中輸入 WP statistics 搜尋此外掛, 找到後按 "立即安裝" 鈕, 安裝完畢後再按 "啟用" 鈕即可 :
然後到 "控制台/外觀/小工具" 頁面就可以找到 "統計" 這個小工具, 按右邊的倒三角形 icon 會出現選單, 點選統計區塊欲放置的位置 (例如 Default Sidebar), 然後按右下角的 "新增小工具" 鈕 :
這會在右邊的 "Default Sidebar" 區塊內建立一個 "統計" 子區塊, 勾選要顯示的統計項目, 例如 "線上使用者", "今日瀏覽次數", 以及 "總瀏覽次數" 是較常關心的統計數字, 然後按底下的 "儲存鈕" 即完成設定 :
這時瀏覽網站就可以在網頁右下角看到所選的瀏覽統計數字了 :
沒有留言:
張貼留言