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

分類
Web 2.0

Flickr開放所有用戶上傳影片

Flickr開放讓所有免費的用戶也可以上傳影片了,這項服務開放之後Flickr的地位又更加的穩固。免費的帳號每個月可以上傳兩部影片,影片長度限制為90秒,檔案大小限制為150MB。

現在免費帳號功能為:

  1. 3個相簿,現在沒限制 set數量
  2. 上傳兩部影片(90秒及150MB限制)
  3. 總共200張相片

免費的雖然也不錯,但是還是付費的比較爽啦!都無限XD

一年只要24.95美金…不過最近台幣貶值,囧rz..

flickr

消息來源: Flickr Opens Up Video Uploads for Everyone

分類
食衣住行育樂

[美味]東港櫻花蝦巧克力

上週看到有關於東港櫻花蝦巧克力的試吃活動,馬上報名。在上週六就前往果子咖啡領取,因為下雨天所以開車到那時忘記了把地址抄下來,一時間還想打電話請朋友查地址,囧rz。剛好等紅綠燈時後方停了一台警車,所以直接下車問,沒想到警察也知道果子咖啡在哪邊,哈哈。

繞到慶城街之後很快就找到了果子咖啡,店內擺設很讚,氣氛很好。那時下著雨,拿到東西后就先離開,因為車子暫停在外面,很怕被拖吊 ~”~,店內的人都很客氣,下次要去裡面消摩時光,好久沒泡在咖啡廳寫文章了。

終於拿到了東港櫻花蝦巧克力XD

IMGP1832

包裝簡單精緻

IMGP1834

很有質感

IMGP1836

裝飾用的金黃色繩子讓質感升級

IMGP1837

打開來,呼呼,口水在流了。

IMGP1838

有兩種口味,一種是有灑上芥末粉,超讚的啦!櫻花蝦加上杏仁果片然後配合芥末粉,入口之後就感覺有東西在嘴裡跳動,粉棒的感覺!會讓人有繼續吃下一個的衝動;沒有芥末粉的就比較平淡,一樣可以享受櫻花蝦的美味。

IMGP1841

我老婆已經在旁邊蠢蠢欲動了,因為一開始催我快點打開來拍照。

IMGP1842

試吃活動:

如果想一起參加試吃活動,可以線上報名XD,連結點請點下方的果子咖啡。

GozCafe 果子咖啡
10478台北市中山區民生東路三段140巷11號 (02)8770-5330

分類
Web 2.0

設計師你的作品很棒,可以免費幫我設計嗎?

小故事….

某天….

路人甲經過一間室內設計的店面,被裡面的精美的設計所吸引而到店面看,剛好設計師也在店內。

路人甲看了看,覺得很不錯,於是就…..

路人甲:設計師你的作品很棒,可以免費幫我設計嗎?

設計師:不好意思,我的作品都是要付費的,我可以幫你規劃及設計,不過要收取另外的費用。

路人甲:喔,這樣啊!我再考慮好了。

過了幾小時,路人乙上門。

路人乙:設計得很棒耶!我也想要您幫我設計一個。

設計師:沒問題,只要提供您的需求,可以為您量身打造一個屬於您自己的空間。

路人乙:恩,好。

設計師:那麼等您的需求列出來之後,我再把估價的部分列給您。

路人乙:疑,不是免費的嗎?

設計師:囧,不好意思喔,這是要付費的。

路人乙:喔,那我再考慮看看。

幾小時候,路人丙也進到店內來逛。

設計師:有喜歡的再跟我說,要這些都是要錢的。

路人丙:………….,這些要錢?

轉頭走人

是的,這個小故事情代表了什麼??可以想想看。

最近接到將近10封的佈景主題客製化信件,都認為客製化是免費的。

ㄜ?你認為請設計師幫你家裝潢設計是免費的嗎?

你認為你網路的另一個家(部落格)請人裝潢是不需要花費的嗎?

人家替你花時修改、設計都是應該的?

也許客製化這三個字很難理解,所以現在加上付費兩個字,相信接下來信箱會空一陣子。

分類
WordPress

Revolution Two開站了

之前介紹過Revolution Theme有做出一些令人驚艷的佈景主題,可以看看這篇,原本預計10月底要開的新站昨天好像開站了。Revolution Two,新網站感覺不錯,不過要下載這些新的佈景主題可是要費用的,當然對岸也有一些嘿嘿嘿的網站已經公佈了新的佈景主題下載點(囧)。

謎之音: 才剛開站付費的載點就被知道了,賺屁啊!

不過裡面的主題還真的不錯,不過是付費下載。對岸有提供下載了 @_@

連結要低調,怎麼個低調呢?請愛用滑鼠 XD

http://riku.me/2008/10/30/revolution_themes_free.html

分類
音樂介紹

六款線上收聽音樂網站

Deezer – 原BlogMusik 音樂網站,後來更名為 Deezer ,可線上搜尋及收聽音樂,目前不支援中文歌曲搜尋。對於喜歡的歌曲可以使用內建的撥放器放在 Blog 分享給其他人。

Songza.com – 可以搜尋歌曲名稱,完全支援中文,英文也可以。找到歌曲之後可以線上欣賞,分享給其他人,也可以針對歌曲評分,算非常完整的功能。

Grooveshark – Flash 介面的搜尋音樂服務,搭配特效讓使用者可以感到非常的順暢。目前不支援中文歌曲,如果您是西洋音樂愛好者就不能錯過囉!

SoundPedia, 一個線上音樂平台,大多是比較舊的音樂,不過音樂感覺算蠻齊全的,艾德蠻喜歡聽 Michael Jackson 的歌,輸入歌手名稱,直接跑出一大串的歌曲清單,真是爽啊。目前 SoundPedia 支援很多語言,也包含了繁體中文及簡體中文,非常方便使用。在音樂播放的部份,這個網站做的非常好,播放器的上方會自動有歌詞出現,可以邊聽邊看,當然還可以邊唱 XD 。

Seeqpod, 這個音樂網站非常獨特,其實該平台並沒有提供任何的音樂檔案,一切都是透過內建的搜尋引擎來尋找全世界的音樂檔案,有可能透過 google ,也可能透過 yahoo ,這些並不是很重要,重要的是找到的音樂可以往播放器丟,就可以自動播放了,不管是音樂還是影片都可以線上欣賞,而該網站所找到的音樂檔案竟然還有列出網 址,如果把網址記下來的話,嘿嘿,後續就不知道了。

Streamzy ,一個線上搜尋音樂的播放平台,整個網站用 Flash 所建置,前台的介面簡單操作,很容易就可以找到音樂且立即線上欣賞,不知道音樂量是否夠多,以艾德喜愛聽的 way back into love 來說,只有五個分享點。不過沒有支援中文搜尋,希望可以支援中文搜尋,不然就有點可惜了。當然有多一個新的音樂平台,對於喜愛音樂的人來說是個很好的選擇。

分類
Web 2.0

Bluehost 的新服務 SimpleScripts

剛剛收到來自 Bluehost 的信,信中提到他們提供了一個全新的服務叫做 SimpleScripts 這個服務看起來很不錯,系統將會自動替您安裝您想要的程式,從服務名稱就可以知道,將會是 Free 1-Click Installs 的服務。艾德還沒有時間來測試,從後台可以看到有很多程式可以安裝,而且都是最新版的程式,像是 WordPress 2.5 、 PHPBB 3.0 等等….

當然沒有使用 Bluehost 服務的人也可以直接到 SimpleScripts 的官網看看,不過就不清楚是不是免費了。

不過在 BH 的官方討論區,有看到管理員說。

Simplescripts is a brand new addition made by BlueHost just in the last day or so.

分類
架站相關

lefora forum 免費討論區

hung 的網站看到一個免費的討論區介紹,lefora 是一個討論區的架構,不過看起來是有點像是 Blog 的模式,只是透過 Forum 的模式來運作,整個架構很完整,可以匯入 Blog 的 Rss 來當作分類。支援中文輸入,不論是繁體字還是簡體字都 OK,只可惜後台與前台還沒有中文語系,若有的話會更棒。另外也提供幾個 Theme 可以選擇,不過色系上就不是很棒,只有一兩個還可以,其他的艾德認為真是突兀 @@。

若您現在想要申請討論區,可以試試看 lefora 這個免費的喔~~

對於 lefora 的評語:骨子是個 Blog ,換上了 Forum 的皮 ,效果很不錯~

http://eduardo.lefora.com/

lefora.png