以WordPress實作imgur.com網站為例 (Part 2 – 前台上圖)

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 – 圖片網址)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *