2021年6月13日 星期日

樹莓派架站 (八) : WordPress 網站內容管理 (下)

端午連假在家繼續進行湘雲老師教學研究網站的內容建構, 預計月中大致完工後要停機備份資料庫與製作系統映像檔, 然後購買 Pi 4 來安裝實際運轉的系統, 到時將備份的映像檔燒錄到新的 SD 卡上插到 Pi 4 上驗證看看映像檔是否充分保證系統的回復能力. 

湘雲老師之前的研究計畫曾建立了三個客語文網站, 希望能將其放在教學研究網主選單中, 名之曰 "客家語文網頁建置", 放在 "入聲字標註" 後面 :

1. 客家歇後語(海陸腔客語朗誦)

2. 客家對句理諺(海陸腔客語朗誦)

3. 客話唐詩(海陸腔客語朗誦)

這就是典型子選單的架構, 作法是先在主選單中新增一個 "自訂連結" 的項目, 其超連結網址為目前頁面 (即 #) 的項目, 標題名稱就是主選單上面要顯示的 "客家語文網頁建置", 然後再新增三個同樣是 "自訂連結" 的項目, 但其超連結網址與標題為上述三個網站, 然後將這後面三個項目都設定為 "客家語文網頁建置" 的子項目即可. 

首先進入 "控制台/外觀/選單" 頁面, 如果不是在 "主要選單" 就按 "選取" 鈕選取主要選單 : 




選單頁面左邊用來新增選單項目之用, 右邊則是顯示此選單目前有哪些項目, 先在左邊新增 "自訂連結" 項目, 連結文字為 "客家語文網頁建置", 網址欄要填 "#" 表示此項目是要做子選單用, 而非實際連結 : 




按 "新增至選單" 鈕後會立刻在右邊 "選單結構" 區塊的項目列表最後面出現這個新增項目 :




接著繼續新增三個 "自訂連結" 項目, 就是上面所列的三個對外連結, 這三個的網址就不是 "#", 而是上面所指定的三個網址 : 






完成後右邊選單結構最底下就有四個 "自訂連結" 項目了 : 




依序點選其中第 2, 3, 4 個右邊的倒三角形展開選單, 再點其中的 "成為客家語文網站建置的子項目" 超連結 : 


 


完成後會發現這三個有連外網址的項目都向右內縮, 變成第一個自訂連結項目 "客家語文網站建置" 的子項目了 : 




最後按右下角的 "儲存選單" 即完成子選單設定, 重新整理網頁就可看到效果了 : 




不過子選單連結無法設定 target 屬性 (開啟目標), 所以點選子選單項目後會在目前這個分頁開啟目標網頁, 亦即目前的網頁會被取代, 如果不想被取代, 則要用在滑鼠移到項目上時要按右鍵, 然後點選 "在新分頁開啟連結" :




參考 :

WP 管理員中的選單


10. 部落格文章設定 :

經過這兩周的努力耕耘, 網站的內容已經很豐富, 現在主選單的選項只剩下 "部落格" 是空白的內容, 這個 "部落格" 其實是 WordPress 在安裝時就預先寫入資料庫的一個預設頁面, 因為尚未指定其內容來源, 所以其內容就是標題  "部落格" 三個字而已 : 





這個部落格頁面名稱後面是空白, 表示尚未指定文章來源. 點 "編輯" 進去, 其內容就只是 "部落格" 的標題文字而已 : 



不要在此頁面做任何編輯, 保持原樣退出即可. 

事實上 WordPress 的部落格指的就是將 "控制台/文章" 中所發表的文章依照時間先後順序由下而上堆疊起來的頁面結構, 只要在 "設定/閱讀" 設定將文章頁面丟到此 "部落格" 頁面, 則所發表的文章就會以部落格形式自動排版導入此"部落格" 頁面中了. 

由於目前文章列表中只有安裝時系統預先寫入的第一篇文章而已, 所以我先到 "控制台/頁面" 中新增兩篇湘雲老師之前發表過的文章 :




再到 "控制台/設定/閱讀" 頁面, 首頁我們採用靜態網頁沒錯, 但 "文章頁面" 這一欄卻沒有選擇目的地是哪個頁面 : 




在文章頁面的下拉式選單中選取 "部落格" 頁面作為目的地 : 




最後按左下角的 "儲存設定" 鈕即可. 

這時再去點主選單中的 "部落格" 就會顯示文章堆疊了 :




Bingo ! 終於搞定主選單上的最後一塊拼圖啦! 

參考 :


11. 使用者設定 :

既然部落格功能設定已經完成, 那湘雲老師就可以登入網站開始貼文了, 但前提是必須要有使用者帳號, 這可以在 "控制台/使用者" 中進行設定 : 




按 "新增使用者" 鈕, 填寫使用者資料 : 




其中最重要的是底下的 "使用者角色" 欄位, 每一個角色的權限不同, 越底下的權限越高 (管理員可以掌控整個網站), 各角色權限可參考下面這篇的說明 :


填好後按左下角的 "新增使用者" 鈕即可. 

網站至此大致是完工了, 唯一剩下的問題是在文章與頁面上傳或從媒體庫取用的圖檔, 在瀏覽時都無法顯示, 只秀出一個破裂的圖案, 例如首頁底下貼的圖檔 :




但是在樹莓派上瀏覽則無問題. 安裝了 relative url 等外掛並無效果, 或許跟使用 ngrok 有關, 等停機備份後拿回鄉下用家裡的固定 IP 試試看, 或有空參考下面這篇再測試 :

[WordPress]解決媒體庫與文章破圖的7種技巧

另外是實際佈署伺服器時的網路設定問題, 有點類似目前鄉下那台 Pi 3 做法, 可參考 :


OK, 忙網站架設與管理到今天已三周, 沒想到我居然成功地在樹莓派上憑空弄出個可以運作又長得蠻好看的網站, 這實在出乎我預料之外 (原先預計用 hard coding 的, 版面設計就會拖很久), 而且 WordPress 也不像以前想的三兩天就搞定那麼容易, 還是得花一段時間摸索. 

但 WordPress 經過千錘百鍊之後也真是設計得既簡約又完善, 管理者要上手不外就是把文章, 頁面, 選單, 媒體庫, 以及主題佈景這五項搞清楚就可以了, 難怪全世界網站有三成以上是利用 WordPress 架設的, 真的是很棒的架站軟體. 


2021-06-18 : 補充 :

今天檢查了一下安裝到現在 32GB 的 MicroSD 卡使用情形 :

pi@raspberrypi:/var/www/html $ df -h
檔案系統        容量  已用  可用 已用% 掛載點
/dev/root        29G   11G   18G   37% /
devtmpfs        430M     0  430M    0% /dev
tmpfs           463M   47M  416M   11% /dev/shm
tmpfs           463M   47M  416M   11% /run
tmpfs           5.0M  4.0K  5.0M    1% /run/lock
tmpfs           463M     0  463M    0% /sys/fs/cgroup
/dev/mmcblk0p1  253M   48M  205M   19% /boot
tmpfs            93M  8.0K   93M    1% /run/user/1000

含系統才用掉 11GB (37%), 還剩下 18GB 可用, 看來 32GB 應該夠用啦! 

用 du -sh 檢查網站根目錄下檔案所占大小 : 

pi@raspberrypi:/var/www/html $ du -sh    
207M  

複製整個網站目錄要 207MB, 這裡面也包括上傳的媒體檔案. 

參考 :


沒有留言 :