標籤: WordPress

上一篇提到了前台上傳圖片的部分，接下來Part 3的部分是要調整WordPress的圖片路徑及其他相關設定，這部分主要是優化網址結構以及讓他更像imgur.com。

調整圖片網址結構：

以WordPress的架構來看，上傳圖片到媒體(Media Library)後取得的圖片路徑一般都是看的出來為WordPress的路徑，如下顯示：

https://網域/wp-content/uploads/2018/03/xxxxxxx.png

如果提供使用者過長的圖片網址，在使用上較為不便，因此可以透過 wp-config.php 的設定進行媒體庫的路徑調整。

打開WordPress根目錄的wp-config.php，新增下列語法

define(‘UPLOADS’, ‘go’);

修改完成後存檔，再來到[設定] > [媒體] > 上傳檔案，請不要將這個設定打勾，若已經打勾請取消掉，並按下儲存變更。

完成之後可以看到圖片網址變短啦！少掉了 wp-content/upload/年/月 這串落落長的部分。

https://網域/go/xxxxxxx.jpg

隨機命名檔案名稱：

縮短完圖片位置的長度之後，再來要將上傳的圖片進行亂數命名，以避免使用者上傳奇怪的圖片檔名。也能更貼近imgur.com XD。這部分在不寫程式的情下可以找到外掛進行處理，目前找到一款WP Upload Rename ，雖然已經三年多沒有更新，不過實際在 WordPress 4.9.5的版本上進行測試也沒有問題的，當然也可以找其他外掛代替。

上傳外掛並啟用。接著到[設定] > [Upload Rename] > 來進行設定，可以參考艾德設定的方式，命名方式是隨機的英文字母，長度為八個字，好了就存檔完成。

實測結果：

實際上傳一張圖片到媒體庫，可以取得實際的圖片路徑。

https://imgnow.cc/go/9U6mTtlz.jpg

這樣Part 3的部分先到這邊啦！

Part 4 : 以WordPress實作imgur.com網站為例 (Part 4 – 圖片管理及選單權限)

Part 2 的部分要來說明一下先前所提到的東西。

事前作業準備：

1. 主機架設
2. SSL憑證安裝
3. WordPress安裝
4. 佈景主題選擇
5. 外掛選擇
6. 佈景設定及修改
7. 發佈內容測試
8. 完成

主機架設：

其實這部分我並不專業，但是在做類似的圖片免空這種服務建議使用VPS，一般的虛擬主機Share Hosting頂多拿來做試驗用，請不要在Share Hosting上面經營，很容易會被主機商因為各種理由給停權。至於要挑選哪一間VPS可以多找幾間，最低規格就可以，未來可以慢慢在提高規格應付需求，這邊艾德就不多說了。

SSL憑證安裝：

免費的憑證服務商有很多，目前 imgnow.cc 是採用Let’s Encrypt，主要讓網站可以使用https及http 2 的架構，加快讀取。

安裝WordPress：

請自行解決 XD，如果您不會安裝WordPress，建議您先從頭開熟悉WordPress會比較適合一些。

佈景主題選擇：

降低開發時間，減少Coding的部分，建議可以挑選一些付費優質的佈景主題，這次艾德使用DIVI這個主題作為imgnow.cc的佈景，另外DIVI也有不少好用的外掛可以使用，也加速網站的開發時程。

接下來開始實作的部分

調整背景顏色：

DIVI主題啟用之後，佈景主題會是白色的，先調整成按灰色，可以透過[外觀] > [自訂] > [General Settings] > [Background] > 設定想要的Background Color，存檔即可。這邊設定深灰色 #202020

選單的部分目前只用到Primary Menu，所以請到[外觀] > [自訂] > [Header & Navigation] > [Primary Menu Bar] > 設定想要的Background Color，這邊設定#404040，淺色一點。

新增Post Type：

DIVI主題內建Projects的Post Type，這對於製作免費圖片空間來說再好不過了，這樣就省去了自己去新增Post Type的部分，當然也可以自行新增Post Type，詳細的Post Type用法可以參閱WordPress官網上的設定。解決了Post Type之後接下就是要處理前台上傳圖片的部分。

前台上傳圖片：

前台讓使用者新增文章及上傳圖片的部分，採用了外掛來WP User Frontend來製作，可以從WordPress官網所提供的外掛服務進行下載，安裝外掛後直接啟用即可。啟用後出現了WPUF的設定的畫面，可以直接點選Not Right Now直接略過。

好了之後會使用到的部分是Post Form，達到客製化發文的介面。

點選Post Form之後，這邊目前完全沒有表單，所以要點選Add Form來進行製作。

新增之後會出現讓你選擇的部分，這邊選擇Blank Form

接下來就會看到設定的畫面，這功能支援拖曳，可以從右邊的選項拖曳到左邊的區塊，也可以直接點選。這邊會使用到的部分有三個Post title、Feature Image、Tags。點選後新增至左側的區塊，在來針對每一個選項進行設定，可以設定是否為必填，Advanced Options裡面還能夠設定輸入的字串長度，設定輸入框內的預設字樣。

好了之後切換到第二個Tab Settings的部分進行設定，Post Type選擇剛剛自行新增的選項，或者選擇主題內建的Project。底下還有Post Status / Post Format 及 Default Post Category 等設定選項，依照個人需求進行調整即可。

再來切換到左側的Submission Restriction，這邊因為之後要考量到不登入的情況下也可以上傳圖片，所以可以透過此功能進行設定。Guest Post，將Enable Guest Post打勾即可啟用。其他英文的顯示內容可以自行成中文。

譬如: This page is restricted. Please Log in / Register to view this page.

設定完成之後記得要點 Save Form 的按鈕

回到Form List的地方可以看到剛剛新增的表單，然後最右邊有一個Shortcode可以使用，請複製這個ShortCode。

然後新增一個頁面，標題命名為上傳圖片，在文章內容輸入Shortcode即可，接下來就可以在前台上傳圖片了！

Part 2的部分先到這邊~~~~

Part 3 : 以WordPress實作imgur.com網站為例 (Part 3 – 圖片網址)