分類
WordPress

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

Part 3的部分處理完圖片網址之後,接下來要將主選單的部分進行權限管理。以免費的圖片空間服務來看,會區分兩種權限。第一種是有登入的情況下上傳圖片,可以自己管理上傳的圖片,也比較好找到資料;而另一種就是不需要登入就可以上傳圖片,未登入的情況下就無法彙整自己上傳過的資料。

W4 Post List外掛使用

首先,要建立個人資料的頁面,也就是顯示已經登入的使用者,可以查看自己上傳過的圖片。本次要使用的外掛是W4 Post List,這外掛是免費的,可以在WordPress官方的Plugin找到,一樣先下載進行外掛安裝並且啟用外掛。啟用之後可以在左側選單找到

點選Add New之後開始新增列表。這邊要注意的是,目前是使用Divi內建的Post Type,所以選擇第一個Post的部分,Preset選擇Post with Thumbnail,也就是有使用縮圖做顯示。

再來切換到List Type下方的Posts,因為使用內建的Post Type,所以就要選擇對應的名稱,請將Projects打勾。Post Status為文章狀態,將Publish(發佈)的打勾,好了之後發佈即可。

接下來再W4 Post List的列表頁上面可以取得ShortCode

複製ShortCode的內容,然後點選左側的[頁面] > [新增頁面],再內容的部分填入剛剛複製的ShortCode。

如此一來就完成囉!前台的頁面您可以透過CSS定義樣式即可。

接下來要處理主選單的部分,這裡講到的權限是有登入的情況下可以看到我的圖片,也就是剛剛透過W4 Post List做的頁面。基本上那一個頁面已經有判斷是否有登入狀態了,所以未登入的情況下點進去是顯示全部的圖片,有登入的情況下則是顯示自己的圖片。不過在選單上我們還做些處理,接下來將使用if Menu這套外掛來進行設定。

if Menu外掛使用

介紹一下這款外掛,外掛名稱看起來大概就知道這功能是甚麼,if 在程式裡面都是做判斷用的,menu就是要顯示的選單(廢話 XD)。一樣到WordPress的官網外掛區進行下載,再進行外掛安裝並且啟用外掛。

外掛啟用之後在外觀裡面可以找到設定,這邊設定是調整管理者是否要看到隱藏的選項。打勾,那麼管理者就會在前台看的到隱藏項目,不打勾則無法看到,就只是測試用而已。

接下來就是主要的部份,直接到[外觀] > [選單 ],下方用imgnow.cc的做展示設定。

可以看到我的圖片這個選單,有一個Change menu item visibility,也就是改變選單項目的可見度,點選之後可以有不同的條件搭配。

第一個下拉選單有Show 跟 Hide

第二個下拉選單有很多,可以參考畫面顯示。

這邊設定Show > User is logged in,也就是只有在登入狀況下才會顯示這個選項。

好了存檔即可,接下來測試看看前台畫面,上方為登入情況下顯示,下方為未登入的時候顯示。

這樣就完成了查詢使用者上傳圖片的功能以及選單判斷登入顯示!

Part 5: 以WordPress實作imgur.com網站為例 (Part 5 – 前台登入)

分類
WordPress

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

上一篇提到了前台上傳圖片的部分,接下來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 – 圖片管理及選單權限)

分類
WordPress

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

分類
WordPress 艾德分享

以WordPress實作imgur.com網站為例 (Part 1 – 淺談架構)

艾德最近以WordPress打造了一個仿imgur.com的免費圖片空間服務,這部分應該可以讓更多人知道WordPress不再只是一個CMS系統,而是可以任意轉換成不同的網站,滿足創業者的需要,以WordPress為基底快速將產品做出進入市場去驗證是否可以執行。

imgnow.cc 是目前以WordPress為架構做出來的免費圖片空間服務,從有這個idea到網站上線,實際的工作時間大約為一週左右,每天以8小時計算。當然有使用一些付費外掛,來減少寫Code的時間,這部分可以隨自己高興來使用,當然能力夠的其實可以少用外掛。

目前 imgnow.cc上面的功能有

  1. 社群登入 (Facebook / Google)
  2. 前端上傳圖片 (免登入/登入均可上傳)
  3. 訪客留言
  4. 社群分享
  5. 一鍵複製網址

目前這些功能看起來大概符合imgur.com上的了。

不過還是先回過頭來分析一下imgur.com上面有那些功能

首頁:

  • 登入
    帳號密碼、社群帳號登入
  • 註冊
    帳號密碼、社群帳號登入
  • 圖片列表
    一排五張圖片
  • 上傳圖片
    登入後可上傳、訪客也可以匿名上傳
  • 搜尋功能
    關鍵字搜尋(作者/標題/標籤等等)

單篇圖片頁:

  • 圖片顯示
  • 社群分享 (Facebook / Twitter等等)
  • 圖片網址取得 (Embed Post)
  • 下載圖片 (Download Post)
  • 上下一則圖片

以上是初步分析,當然imgur.com不只有這些功能,我們先以這些功能透過WordPress來實作。當然會先建議架設一台VPS或者有虛擬主機可以執行,架設主機的部分不多說,艾德是使用DigitalOcean的VPS服務,採用LEMP進行架設。

以上是Part 1的初步分析,接下的Part 2將會開始講解實作的部分。

先到這邊囉~

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

分類
Android Web 2.0

SugarSync – 5GB免費網路硬碟

SugarSync是一個網路的免費空間,免費帳號可擁有5G的空間,可以上傳檔案到自己的空間進行管理。當然官方也很貼心的提供各種平台的程式與網路空間進行同步。支援PC、Mac、Android、iPhone、Symbian、Windows Mobile。

Web介面支持五種語言(英文、西班牙文、簡體中文、日文及德文),如果使用Firefox或者Chrome可以選用簡體中文在翻譯成繁體中文,在操作介面上沒有語言的問題。

申請SugarSync 5G 免費空間

另外可以上傳mp3檔案到免費空間,這時候Web介面提供了撥放的功能

點選之後會出現一個播放視窗,這樣在任何一台電腦上也可以享受聽音樂的樂趣

Android下載SugarSync也能同步空間上的檔案,也能撥放音樂,音樂跟手機帶著走

還沒有申請SugarSync這樣的服務嗎?改快註冊一個吧!

PS: 每邀請一位朋友使用就會免費增加500MB的空間!!