樹莓派架站 (七) : WordPress 網站內容管理 (中)

今晚繼續來增添湘雲老師網站中 "研究" 與 "教學" 這兩部分的內容. 

本系列之前的文章參考 : 

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

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

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

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

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

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

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

6. 頁面跳轉的超連結設定 :

研究成果分成四項, 所以我的構想是在研究頁面中加入一個清單, 填入四個項目標題, 接著再分別建立四個研究成果頁面, 然後在研究頁面的清單中用超連結指向這四個研究項目的頁面網址, 這樣點選項目超連結時就會是跳轉到項目的頁面了. 

四個研究成果的原始資料為四個 WORD 檔案, 除第一項研究成果因為 WORD 表格太寬轉成 HTML 後超出 WordPress 內容區而改用編輯器手動輸入內容外, 其餘三個研究都是用 Office 365 轉成 HTML 檔後, 用純文字編輯器擷取其中的表格內容部分, 複製貼到 "自訂 HTML" 區塊中, 詳細作法參考上一篇 "樹莓派架站 (六) : WordPress 網站內容管理 (上)". 

先分別建立這四個研究成果的頁面 : 

然後在之前建好的空白頁面 "研究" 中新增一個清單方塊, 輸入這四個研究成果項目 : 

回到全部頁面列表, 點選這四個研究成果頁面右下方的 "檢視" 超連結, 

這會開啟新網頁顯示此頁面內容, 複製網址列 "/" 後面的頁面 id 字串, 例如 ?page_id=209 :

回到控制台, 點選頁面列表中的 "研究" 進入頁面編輯器, 選取清單第一項文字內容後按編輯器上的超連結按鈕, 於彈出視窗中貼上剛剛複製的 page_id 字串 :

如此這般依序將四個研究成果項目都加上 page_id 的超連結, 然後按右上角的 "更新" 鈕 : 

點按網頁主選單的 "研究" 顯示其頁面, 會發現四個項目都已經變成超連結, 點每個項目就會跳轉到該項目的頁面 : 

例如按第一項研究成果超連結 : 

7. 上傳 pdf 檔與修改超連結設定 :

接下來是主選單中的 "教學" 部分, 這部分包含一份 WORD 格式的課綱索引以及許多課綱 pdf 檔案, 由於沒有原始 WORD 檔且基於 pdf 檔可保持格式考量, 於是決定課綱的超連結改為開啟新網頁載入已上傳到媒體庫中的 PDF 檔. 

首先是將課綱索引 WORD 檔另存成 HTML 格式, 照前面的做法複製其中的表格部分, 然後貼入 "教學" 頁面裡的 "自訂 HTML" 區塊 : 

返回頁面列表檢視 "教學" 這個頁面 :

原始 WORD 檔案內容為研究所與大學部的兩張課綱表, 其原本超連結都是連結到 PC 本機檔案總管硬碟下的 PDF 檔, 故目前點超連結都無法顯示檔案 (因為現在是在伺服器裡). 只要把這些課綱 PDF 檔上傳到媒體庫, 取得它們在媒體庫中的檔案網址, 然後以此更新 "教學" 頁面中的超連結即可.  

接下來要把各科目課綱上傳到媒體庫, 在 "控制台/媒體" 頁面按 "新增媒體" 鈕依序上傳每一門課的課綱 pdf 檔 : 

上傳完畢後點按 pdf 檔 (例如第一個課綱 "台灣詩學.課綱.pdf") 會出現附件詳細資料頁面, 按右下角的 "複製網址至剪貼簿" 鈕 : 

然後回到 "控制台/頁面" 中點 "教學" 頁面進入編輯器, 因這頁面是 "自訂 HTML" 內容區塊, 預設顯示網頁效果, 要先按右方的 "..." 鈕, 在彈出選單中點選 "轉換成 HTML" : 

這時編輯器原本顯示網頁效果的頁面就變成顯示其 HTML 原始碼, 然後在其中尋找 "台灣詩學.課綱.pdf", 如下圖所示, 這是原始 WORD 檔中所設的超連結 :

將 href 屬性中的網址選取後按滑鼠右鍵貼上, 並且在後面添加 target="_blank" 屬性, 目的是點按此超連結時會開啟新分頁來顯示此 pdf 檔 :

其他課綱 pdf 檔依序上傳到媒體庫後也是如法炮製, 複製其在媒體庫中的檔案網址, 然後更新 "教學" 頁面中的原網址並添加 target 屬性, 改完後按更新即可. 

注意, PHP 預設檔案上傳限制為 2MB 以下, 這可呼叫 phpinfo() 函數查得 :

如果超過這個限制可參考下面這篇做法將限制放寬 : 

# WordPress – 上傳檔案 2M 大小限制

似乎改 .htaccess 方式最簡單, 但我對這不熟, 也沒時間研究, 最重要的是我在網站根目錄下沒找到這個檔案 (系統隱藏檔?), 所以我參考了下面 Tsung's Blog 的這篇文章去改 PHP 目錄底下的 php.ini 檔 :

# PHP 檔案上傳 遇到 容量太大 要修改 php.ini 的參數

這個 php.ini 檔位於 /etc/php 目錄下, 底下還要看自己安裝的 PHP 版本 : 

pi@raspberrypi: $ cd /etc/php   

pi@raspberrypi:/etc/php $ ls -ls   

總計 8

4 drwxr-xr-x 3 root root 4096  5月 20 16:19 7.1

4 drwxr-xr-x 5 root root 4096  5月 20 11:17 7.3     

這裡有 PHP 7.1 與 7.3 版本目錄, 我前面安裝的是 7.3 版 (這個 7.1 是何時安裝的?) : 

pi@raspberrypi:/etc/php $ cd 7.3    

pi@raspberrypi:/etc/php/7.3 $ ls -ls   

總計 12

4 drwxr-xr-x 3 root root 4096  5月 20 11:23 apache2   

4 drwxr-xr-x 3 root root 4096  5月 20 11:22 cli

4 drwxr-xr-x 2 root root 4096  5月 20 16:26 mods-available

切換到 apache2 目錄下 : 

pi@raspberrypi:/etc/php/7.3 $ cd apache2      

pi@raspberrypi:/etc/php/7.3/apache2 $ ls -ls   

總計 76

 4 drwxr-xr-x 2 root root  4096  5月 20 16:26 conf.d

72 -rw-r--r-- 1 root root 71958  2月 14 00:31 php.ini   

終於找到 php.ini 了, 以 nano 開啟 (必須用 sudo 權限) : 

pi@raspberrypi:/etc/php/7.3/apache2 $ sudo nano php.ini    

按 Ctrl+W 搜尋 upload_max_filesize 可知其預設值為 2MB, 我將其改成 20MB : 

順便搜尋 post_max_size, 可知其預設為 8MB, 我將其改為 20MB :

按 Ctrl+O 存檔再按 Ctrl+X 跳出後, 以下列指令重新啟動 Apache2 伺服器 : 

pi@raspberrypi:/etc/php/7.3/apache2 $ /etc/init.d/apache2 restart    

這時再用 phpinfo() 去看, 最大上傳限制已改為 20MB 了 :

到 "控制台/媒體" 上傳媒體時, 顯示最大檔案限制為 20MB :

這樣修改後就可以順利上傳 20MB 以下的檔案了. 

8. 頁內錨點設定 :

上面的超連結 (a 標籤的 href 屬性) 目標有下列三種 : 

• 連結到 WordPress 的頁面或文章 (網址例如 ?page_id=xxx)
• 連結到媒體庫中的檔案 (網址例如 /wp-content/xxxx.pdf)
• 連結到外部網頁 (網址例如 http://www.google.com)

其實超連結也可以連到自己網頁內的指定地方 (稱為 Anchor 錨點), 作法如下圖所示 : 

參考 : 

# WORDPRESS 內部連結 的 錨點功能設定~ 目錄設定篇

# 免外掛！利用錨點製作WordPress文章目錄