分類
WordPress

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

Part 5 算是最後一個部份了,從Part 1 到 Part 4 都是在介紹外掛及一些WordPress的設定,當然最後一部分仍是透過外掛處理。這次要講解的是前台燈入的部分,一樣讓使用者都在前台登入,登入完畢之後一樣導回前台網站。

前台登入

在前面Part 2有使用到前台上圖的外掛,這款WP User Frontend有Login的功能,可以調整登入的介面,強制使用者登入完畢之後回到特定頁面,下圖如設定的部分,可以在後台的[User Frontend] > [Settings]找到。

設定完成之後將 [wpuf-login] 填入分頁即可,如下顯示

透過外掛的功能快速達到前台登入的功能,不過如果覺得登入介面不夠華麗,不夠漂亮,可以透過CSS來進行美化。或者使用另一款ProfilePress Lite外掛來達到前台搭入的效果,一樣先從官網的外掛進行下載安裝並且啟用,啟用完畢之後在左側選單會出現ProfilePress的功能清單。裡面有兩的部分,第一個部分是Login Form而另一個部分是Registration Form。

進入Login Form之後可以看到如下的畫面,已經有建立好三種登入樣式,可以快速使用。

接下來將上面隨便一個ShortCode貼入登入的頁面即可,每個登入介面都經過設計,可以直接使用喔!

前台註冊

註冊的填入的表單也是一樣,如下所顯示,將註冊表單的ShortCode填入註冊的頁面即可,這樣就大功告成。

以WordPress為基礎來架設社群的服務基本上都是沒有問題,而是取決要用哪一種方式來達成。艾德覺得市場上的變化很快,用WordPress以最快的速度將服務推出來到市場試水溫更為重要。

以WordPress實作imgur.com的系列文章,講解得很快,有不懂的地方可以發問,也請多多指教!

若對於WordPress有興趣的可以與我聯繫。

edl2000(小老鼠)gmail達康

分類
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 – 前台上圖)

分類
WordPress

SSL憑證更新失敗: dpkg was interrupted 的解決方法

最近收到Let’s Encrypt的通知,要準備更新憑證,原本設定好要自動更新,但是時間到卻沒有自動更新,查看LOG才發現發生了下列的錯誤。

E: dpkg was interrupted, you must manually run ‘sudo dpkg –configure -a’ to correct the problem.

從網路上找到解法,如下:

到dpkg更新的目錄下,將底下的資料都刪除,從新更新一次。更新完畢之後再執行更新憑證的指令就可以囉!更新完畢別忘了重啟Server。

cd /var/lib/dpkg/updates
sudo rm *

sudo apt-get update

分類
WordPress

Let’s Encrypt SSL更新失敗的解決方法

最近把WordPress搬到Digitalocean上,採用最低方案,一個月5美金,當然也安裝了Let’s Encrypt的免費SSL,一次可以用三個月,可以在cornjob上設定自動更新,但是忽然發現不會自動更新了,手動更新發現會跳出錯誤訊息,如下顯示:

 

ImportError: /root/.local/share/letsencrypt/local/lib/python2.7/site-packages/cryptography/hazmat/bindings/_openssl.so: undefined symbol: X509_VERIFY_PARAM_set1_ip_asc

透過谷歌大神找到了兩種方法,我用了第一種就解決了,紀錄一下提供給大家參考。

方法一:

sudo apt-get install --reinstall build-essential python-pip python-dev libssl-dev libffi-dev

方法二:

rm /root/.local/share/letsencrypt -R

執行完畢後記得重新跑  /opt/letsencrypt/letsencrypt-auto renew

這樣就解決無法自動更新Let’s Encrypt SSL的問題囉!

分類
WordPress

站長親授!WordPress 3.0部落格架站十堂課

2008年的11月,WordPress在台灣逐漸受到歡迎,熟WordPress的站長在異塵行者的大力邀約下,共同努力完成了這本WordPress繁體中文書籍: WordPress部落格架設與經營:站長親授的十堂課。然後2010年的10月,也是由異塵行者統籌策劃的另一本WordPress繁體中文書籍:WordPress 3.0部落格架站十堂課,這次邀請了更多更猛的站長一起共同完成這本書,100%鐵定讓讀者可以從頭到尾一次搞定想要自行架設WordPress。一本訂價台幣420元,網路書店購買會享有更多的折扣。

作者簡介

部落格站長群

本次艾德也貢獻一點點的心力在裡面,有問題也歡迎討論!

本次分享的部分:

簡單來說,別人網站有的效果,基本上一定做得出來,怎麼做才是重點。

當然艾德也幫過不少客戶透過WordPress建立官方網站,或者是電子商務的部分,當然也純粹幫客戶將Photoshop的檔案轉成WordPress的佈景。目前艾德也成立了EDLIN.CC,專門替客戶量身打造網站,若有需要歡迎前往EDLIN.CC

名片也印好了 XD

http://edlin.cc

分類
WordPress

Windows Live + WordPress.com 擦出新火花

沒錯,微軟齊下的部落格平台Windwos Live Space 將在明年初3月份關閉,因此微軟與WordPress.com的合作會有怎樣的新火花轉而產生,這是非常令人期待。

Windows Live Space的使用者可以透過網路服務將文章轉移到WordPress.com上面,當然也可以下載被份檔案。這樣一來,會有大部份的使用者選擇轉移到WordPress.com上面,WordPress.com的營收應該會提高不少,畢竟不是每個使用者都會自行架設部落格,所以WP的付服務應該會吸引不少部落客。

不過相對的,也有可能有少部分的使用者會選擇自行架設,這對於WordPress來說是件好消息,代表著WordPress是部落格平台的首選。

資料來源: Welcome Windows Live Spaces Bloggers

圖片來源: Welcome Windows Live Spaces Bloggers

分類
WordPress

WordPress 3.0 – Thelonious正式發佈

睽違已久的WordPress 3.0,代號:Thelonious 終於發佈了。

來看看影片介紹:

這次WordPress 3.0更新如下:

  1. 全新的後台管理介面
  2. 新增多個內建函數應用
  3. Twenty Ten為唯一的內建佈景
  4. 可同時設立多個部落格
  5. 自訂管理者帳號
  6. 自訂導行列
  7. 外掛佈景更新更方便
  8. 太多了寫不完 @@

從WordPress 3.0可以看到CMS的架構已經成形,使用者可透過各式各樣的內建函數來達到功能上的需求,這對於佈景設計者來說,整合功能到佈景上將會是功力的大考驗。從2.8版本開始,要透過WordPress來做企業網站或者是任何網站都是沒有問題的。

總而言之,WordPress已經是一個成熟的CMS平台,至於使用者怎麼運用,就看你自己了!

PS: Thelonious 是誰?應該就是Thelonious Monk,他是位爵士鋼琴家。

延伸閱讀:
http://wordpress.org/development/2010/06/thelonious/

分類
WordPress

WordPress新屬性 the_post_image

WordPress打從心底就是要邁向CMS之路,所以新增了the_post_image的功能功能其實跟以前的自訂欄位的功能是大同小異,只要再新增文章的時候,透過內建的Post Thumbnail設定,就可以做出像雜誌一樣的圖文並茂效果了。

首先,需要先將您目前使用的佈景裡,在functions.php裡面新增

以及

讓佈景支援post thumbnail的功能,因為在發表文章的時候會先判斷佈景裡的functions裡面有沒有支援post thumbnail,如果有那麼在發表文章或者修改文章的時候,側邊欄就會多一個 Post Thumbnail的功能。

點選了Set thumbnail則會跳出上傳圖片的功能,你可以重新上傳一張圖片,或者使用之前已經上傳過的圖片做為縮圖,再插入文章的右邊有一個 use as thumbnail的按鈕,按下去則設定此圖片為該篇文章的縮圖。

設定完成後則會變成下圖,側邊欄會顯示本篇文章所使用的縮圖,而下方多了一個移除縮圖的功能

既然後台已經設定好了縮圖,那麼就是要設定前台如何顯示本篇文章縮圖

打開 index.php 在你欲出現縮圖的位置插入

/images/default-thumbnail.jpg” alt=”Post Thumbnail” title=”Post Thumbnail” />’;
?>

存檔之後前台首頁就會出現該篇文章的縮圖,如本站首頁一樣。

這邊提供的是已經寫好判斷,就是當該篇文章有自己的縮圖則顯示縮圖。若該篇文章沒有縮圖,那麼則顯示某一張預設的圖片。預設的圖片路徑為目前所使用的佈景裡images目錄底下的defaukt-thumbnail.jpg

the_post_thumbnail內有三種圖片大小,分別為:


全圖:
中型300寬度:
縮圖150×150

你可以自己手動修改看是要呈現哪一種圖片類型。

雖然WordPress提供了內建的縮圖功能,不過對於已經使用自己設計的佈景來說,要將原縮圖功能改用內建的功能,是很麻煩的
一件事情。我還是喜歡 custom field XD

本文翻譯來自
Everything you need to know about WordPress 2.9’s post image feature加上艾德自己的測試與實作心得分享