樹莓派架站 (六) : WordPress 網站內容管理 (上)

彩雲颱風昨晚離開國境, 半夜就帶來狂風暴雨, 昨天鋒面讓北部淹水, 這兩天換南部了, 希望能好好解一下這片美麗土地的渴. 外面風雨交加, 正適合繼續趕工將湘雲老師的網站架好. 

本系列之前的文章參考 : 

# 樹莓派架站 (一) : 燒錄 Raspbian 作業系統 (Buster)

# 樹莓派架站 (二) : 安裝 Apache 2 + PHP + MariaDB

# 樹莓派架站 (三) : 安裝 WordPress

# WordPress 網站無法使用 ngrok 連線的問題

# 樹莓派架站 (四) : WordPress 網站基本設定

# 樹莓派架站 (五) : 安裝 phpMyAdmin

1. 在文章中貼上自訂 HTML 碼 :

首先來處理論文指導這部分, 昨日湘雲老師已將歷年所指導的學生論文檔案傳給我, 有 PDF 格式與 WORD 格式兩種, PDF 可以利用線上轉檔服務先轉成 WORD, 例如 https://smallpdf.com/ 提供一天免費轉兩次的服務 : 

既然我有 WORD 格式檔案就不用轉啦! 用 OFFICE 365 開啟後另存成 HTML 檔 :

然後用記事本, NotePad+, EditPlus 之類的純文字編輯器開啟這個 HTML 檔, 將其中的表格內容部分複製起來 (先選取表格開頭, 然後移到表格尾, 按住 Shift 鍵再按一下滑鼠) : 

注意, 不要複製整份 HTML, 因為那含有很多網頁樣式碼, 可能會破壞 WordPress 的版面樣式設定, 只要複製表格內容部分即可. 

接著到 WordPress 後台 "控制台/文章" 中開啟上一篇中已建立的 "論文指導" 這篇文章 :

然後按上面的 "+" 鈕在文章標題底下新增一個區塊, 並於左方區塊內容中點選 "自訂 HTML" :

接著在區塊中按 Ctrl+V 貼上剛剛從記事本複製的 HTML 碼, 最後按右上角的 "更新" 鈕即可 : 

這時瀏覽 "論文指導" 就可以看到一個網頁表格, 這就是原先 WORD 裡面的資料 :

同樣地, 著作發表這個頁面也是用同樣方法將 WORD 轉 HTML, 然後將其中表格內容部分的 HTML 碼貼到文章的 "自訂 HTML" 區塊內即可, 結果如下 :

 

真不錯, 一次解決掉兩個啦!  其實所有自己寫的網頁內容, 包含 CSS 樣式表, Javascript 程式碼這些前端的東西都可以貼到頁面的 "自訂 HTML" 區塊中 (也就說 p5.js 程式碼也可以), 讓前端網頁應用程式也可以在 WordPress 的頁面中執行, 我只能說 : 這真的太棒了! 

所以我順便也把以前改寫的入聲字標註網頁程式透過這種方式放進網站裡了 : 

2. 上傳圖片至媒體庫 :

所謂的媒體是指圖片, 音訊, 視訊而言, 在 WordPress 的媒體庫中可上傳這些媒體 (主要是圖片), 然後於文章或頁面的區塊中可從媒體庫選擇媒體後加入. 注意, 視訊檔因為太大, 最好是上傳到 Youtube 後再將連結網址加入文章或頁面中. 音訊檔也是如此, 可參考之前 mp3 轉成 mp4 影片的方法上傳 Youtube :

# 如何將 mp3 音檔套上單一圖片轉成 mp4

在 WordPress 的控制台點 "媒體" 即可進入媒體庫, 這裡會列出全部已上傳的媒體 :

按 "新增媒體" 鈕會出現上傳媒體頁面, 按 "選取檔案" 鈕挑選檔案, 或直接將檔案拖曳到頁面中即可上傳檔案, 但要注意檔案大小不可超過 2MB : 

上傳完畢後, 該媒體的縮圖會顯示在底下 : 

點底下的縮圖會顯示該圖片詳細資料的頁面, 從中可查知此圖片之解析度等資訊, 按右下角的 "永久刪除" 則可刪除圖片 : 

3. 更改主題佈景頁首圖片 :

由於所選的 Gillian 主題佈景頁首的背景似乎色調太暗, 這可以在主題佈景的自訂功能裡調整. 點選 "控制台/外觀/主題佈景", 按目前主題佈景中的 "自訂" 鈕 :

按 "頁首圖片" 鈕會進入頁首圖片設定頁面 :

按 "新增圖片" 鈕, 注意, 此頁有提示頁首圖片大小為 1920x256 : 

 

從跳出的 "選取圖片" 頁面中勾選圖片, 可從媒體庫中挑選先前已上傳之圖片, 也可以按 "上傳檔案" 在此處直接上傳, 所上傳之檔案同樣是放進媒體庫內 :

按右下角的 "選取並剪裁" 鈕進入剪裁圖片頁面 : 

按右下角的 "剪裁圖片" 鈕可線上進行剪裁, 若不需要剪裁可直接按 "略過剪裁" 鈕, 就會回到頁首圖片設定頁面, 這時所選定的頁首圖片已經套用到右側的預覽頁面 : 

如果剪裁時出現 "剪裁圖像時發生錯誤", 這是 wp-content 這個目錄權限不足所致, 須到 WordPress 根目錄下用 chmod 指令打開權限, 參考 :

# WordPress 提示"在裁剪您的图像时发生了错误"解决方案_最新亲测可行+原因说明

pi@raspberrypi:~ $ cd /var/www/html  

pi@raspberrypi:~ $ sudo chmod -R 777  wp-content/   

注意, 更改檔案目錄存取權限須用 sudo 才可以. 

按上方的 "發布" 鈕即完成設定, 重新整理網頁即可看到頁首圖片已經更換了 :

哇, 俗話說佛要金裝人要衣裝, 所言確實不虛, 換成這張圖後整個網站變得精神多了! 

不過後來湘雲老師認為網站標題似乎太偏左, 應該挪中間一點, 但因為 Gillian 頁首主標題與副標題是以網頁文字方式固定靠左放在頁首, 我在 "自訂" 裡面找不到任何欄位可設定其位置, 唯一的辦法就是把網站標題內化到圖檔裡面去, 這樣也可避免網頁文字在不同的瀏覽器會以不同預設字型顯示的問題. 

使用 Picpick 將上面上傳到媒體庫的客家門樓圖假以剪裁, 加上主標題與副標題文字後更新頁首圖片, 嘗試了很多次終於試出以 1920x336 大小的屋頂照, 配上 28 號主標題與 14 號副標題的微軟正黑體, 剪裁時選擇 "略過剪裁" 讓 WordPress 自行剪裁可得到較滿意的成果, 如下面檔名為 yun-wordpress-theme-header-12.jpg 的圖片 :

編輯頁首圖片花了我很多時間, 因為原圖的尺寸通常不符所需, 必須先選取所要用的區域複製起來, 然後新增圖片貼上, 這時 PicPick 最上面的選單會多出一個 "格式" 選單, 調整下方功能列中的高度與寬度就可以對圖片進行縮放, 例如 WordPress 要求頁首圖片尺寸為 1920x256, 就可以調整成這個大小, 也可以直接拉圖片右下角的控點直接縮放 : 

當然縮放後的圖片會有點變形, 所以複製圖片時要選好大小, 盡量與目標尺寸不要差太大. 

上傳這張已打上網站主副標題的頁首圖片後還有一件事要做, 就是到 Gillian 主題佈景的 "自訂/網站識別" 中取消顯示網站標題與說明 : 

這樣才不會重複顯示網站標題. 

4. 更改次要選單連結 :

WordPress 有主要與次要兩個選單, 主要選單位於 Gillian 主題佈景的最上方, 而次要選單預設則位於頁首圖片下方 (也可以設定為放在頁尾) :

次要選單預設有 Facebook, Twitter, Instagram, 以及 email, 安裝時已預先設定為 WordPress 的連結, 但可以進入 "控制台/主題佈景/自訂/選單/次要選單" 去更改 :

按 "選單" 進去後再按 "次要選單" 就可以看到預設的四個項目, 點 "自訂連結" 右邊的倒三角形會展開設定頁面 :

修改 "網址" 框中的預設值為我們自己的連結 :

 

然後按右上方的 "啟用並發布" 鈕即可.

5. 更改頁面與文章之背景顏色 :

因為 Gillian 主題佈景的文章與頁面背景色預設為白色, 但可以在 "控制台/主題佈景/自訂/色彩/背景顏色" 頁面中更改 :

點選 "色彩" 後再點選 "背景顏色" :

按 "選取顏色" 鈕會出現調色盤與色碼輸入框, 可以在調色盤中點選一個適合的顏色, 也可以直接輸入色碼, 然後按上面的 "發布" 鈕, 這背景顏色即套用到所有頁面與文章 :

有一些顏色是在所有瀏覽器都支援的, 參考 W3school :

# https://www.w3schools.com/cssref/css_colors.asp

參考 :

# WordPress 主題客製化 的第一堂課

# WORDPRESS如何設定底圖背景？

# WordPress 後台教學：給新手的操作教學（全指南）

# WP-01 設定 wordpress logo 外觀、顏色、樣式