天天看點

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

熟悉oss的基本概念

使用wordpress插件将圖檔存儲到oss

oss首頁和控制台

oss首頁

oss控制台

accesskey擷取頁面

oss文檔和sdk

注意事項:預計耗費的費用

oss是一個按量計費的服務,收費為存儲量加上從oss流出的流量費用,上傳到oss不收費。具體的價格可以檢視oss價格總覽這個頁面來擷取。

目前國内最高0.165元每gb每月的存儲費用加上最高0.75元每gb的下行流量費用,是以在整個實驗過程中使用的費用非常低,使用完成之後清除資料之後也不會繼續收費。

以下是具體的操作步驟:

如果已經安裝插件可以跳過這一步。

插件的下載下傳位址為oss-wordpress插件.

1.首先進入wordpress的儀表盤,然後點選左邊插件那一欄。再點選安裝插件。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

2.然後點選上傳插件。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

3.選中oss的附件插件并點選現在安裝。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

4.安裝完成之後點選啟用插件。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

5.接下來開始設定插件。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

這裡有些需要填寫的選項需要開通oss之後才能填寫。

如果已經安裝好插件的可以直接選擇設定->oss setting進入oss插件的配置頁面。

1.從插件的設定頁面或者oss控制台進入oss的控制台。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

2.點選右上角的建立bucket。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

3.這裡要注意一些配置。bucket名字可以自己取,這是一個全局唯一的名稱。所屬的地域選擇杭州,讀寫權限選擇公共讀,這是因為wordpress在釋出文章的時候需要引用一個圖檔http位址,不設定為公共讀的話是無法直接通路oss的。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

4.這裡可以看到建立完成之後的bucket的界面,紅色框選中的是外網通路oss的域名。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

1.建立完成之後回到設定頁面,将bucket名稱填入之後繼續配置accesskey,同樣可以從設定頁面點選如下連結進入阿裡雲的對應頁面。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

2.将這兩個字元串複制并填入插件的設定頁面。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離
201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

3.接下來配置oss的url,這裡可以使用剛才bucket頁面下的公網通路域名,也可以使用自己綁定的頂級域名。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

4.這裡因為沒有綁定頂級域名,是以使用如下的oss域名。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

這裡需要注意的一點是需要在域名之前加上http://。配置完成之後如下圖

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離
201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

1.配置完成之後我們可以開始試驗,點選左邊欄的媒體庫選項,添加一個圖檔。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離
201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

2.可見已經上傳成功了,我們可以回到oss的控制台檢視檔案是否上傳成功了。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

3.我們再發表一篇文章測試一下,添加媒體,然後從選擇媒體庫中選擇剛才上傳的圖檔。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離

4.這是發表成功之後的界面,可以通過檢視圖檔的連結位址來确定是否已經通過oss通路。

201601上海雲栖大會Workshop - 使用OSS對Wordpress進行圖檔動靜分離