而對於個人而言，自己本身就是提供者，莫名的流量也可能是個相當困擾的問題，因為如果是以租賃虛擬主機的方式架設部落格，通常虛擬主機商都會限制流量，當你的流量過大時可能導致虛擬主機商暫停你的部落格主機空間，而且也會消耗不必要的頻寬。

今天看了 5 Fun and Practical Htaccess Solutions 這篇文章，覺得其中防止hotlinking那段很有趣，這個技巧同樣適用於wordpress防止圖片被盜連。

什麼是禁止外連圖片？

請嘗試把下面這一張圖片插入到你的部落格文章中，看看是不是能夠顯示？圖片放在我這邊，但是你卻直接在你的文章中使用這張圖片，這就是外連圖片，在此可以預先告訴你，正常情況下是不行的，在IE下將會看到一個俗稱「叉燒包」的東西，而在Firefox將會什麼都看不到。

圖片網址：http://blog.colorbase.tw/images/refuse-hotlink.gif

達成禁止外連圖片的原理

當瀏覽器讀取某網頁時，它會載入並分析該網頁的HTML是否包含額外的檔案，如圖片檔等等，並會向伺服器送出HTTP請求該圖片，而送出的HTTP請求中會包含一個referer請求，其內容就是該網頁的網址，如下圖所示，若網址「http://blog.colorbase.tw/」的網頁內容包含一個圖片，瀏覽器送出請求時referer即為「http://blog.colorbase.tw/」

因此如果我們可以得知該referer並加以判斷是否為我們所接受的網址，就可以阻擋其他網站外連圖片了。

要達成禁止圖片外連的方式有很多種，就我所知的BSP業者使用的方法通常不是本文所要提的方法，在這裡是要利用apache的mod_rewrite的功能以簡易的方式來判斷圖片的要求來源是不是被允許的網址。

wordpress的htaccess設定

如果你使用wordpress架部落格，而且你也在wordpress中「設定 >> 固定網址」中使用非預設網址格式選項，例如我設定為「自訂結構」，那麼恭喜你，這個技巧適合你使用，因為那代表你的主機支援以.htaccess來設定mod_rewrite，如果你原本不是設為自訂的網址，可嘗試向你的虛擬主機商確認是否支援以.htaccess來設定mod_rewrite。

當在wordpress設定固定網址為非預設選項時，wordpress會給你一段.htaccess的內容，如果wordpress有寫入的權限時它會自動幫你寫入，反之你則需要手動建立一個名稱為.htaccess的檔案，然後手動貼上這段內容；或許你使用非預設的格式很久了但你可能還不知道這段內容代表的意義是什麼，以下我為wordpress產生的htaccess內容加上註解。

#設定基準URL路徑
RewriteBase /
#當要求的URL不存在時
RewriteCond %{REQUEST_FILENAME} !-f
#當要求的URL不是目錄時
RewriteCond %{REQUEST_FILENAME} !-d
#交給index.php處理，並終止mod_rewrite的處理
RewriteRule . /index.php [L]

防止外連圖片的的htaccess設定

重點來了，依照原文的描述，我將其稍微修改且附上註解，並插入至wordpress原本的htaccess中，請打開你的.htaccess更改為以下內容。（請將網址更改為你的網址）

#啟動URL重寫引擎
RewriteEngine On

#當有request包含referer時
RewriteCond %{HTTP_REFERER} !^$

#當referer不是由http://blog.colorbase.tw.colorbase.tw來的（即為外連）
RewriteCond %{HTTP_REFERER} !^http://blog.colorbase.tw.colorbase.tw [NC]

#當要求的網址為.jpg或.png或.gif圖片時，送出HTTP 403(被禁止的)的回應給瀏覽器，並終止mod_rewrite的處理
#所以當然就不會被盜連圖片了
RewriteRule \.(jpg|png|gif)$ - [NC,F,L]

#設定基準URL路徑
RewriteBase /
#當要求的URL不存在時
RewriteCond %{REQUEST_FILENAME} !-f
#當要求的URL不是目錄時
RewriteCond %{REQUEST_FILENAME} !-d
#交給index.php處理，並終止mod_rewrite的處理
RewriteRule . /index.php [L]

修改完畢後，你的部落格中所有的圖片將不得被外部直接使用。

只限定某目錄的圖片不被外部使用

雖然前面所提的修改設定已經可以讓部落格中所有的圖片無法被外部使用，但那樣做有個缺點，就是訪客不管要求什麼檔案、網址，都會先經過mod_rewrite的處理，這將可能會增加一些不必要的主機硬體負擔。

但我們知道，如果在wordpress中使用插入圖片的功能將會預設上傳至 /wp-content/uploads/ 中，因此可以另外建立一個.htaccess的檔案，其內容如下，將此檔案放置於/wp-content/uploads/ 中，變可針對此目錄進行禁止外連的處理，如此一來就可以減少一些主機硬體的負擔。（請將網址更改為你的網址）

#啟動URL重寫引擎
RewriteEngine On

#當有request包含referer時
RewriteCond %{HTTP_REFERER} !^$

#當referer不是由http://blog.colorbase.tw.colorbase.tw來的（即為外連）
RewriteCond %{HTTP_REFERER} !^http://blog.colorbase.tw.colorbase.tw [NC]

#當要求的網址為.jpg或.png或.gif圖片時，送出HTTP 403(被禁止的)的回應給瀏覽器，並終止mod_rewrite的處理
#所以當然就不會被盜連圖片了
RewriteRule \.(jpg|png|gif)$ - [NC,F,L]

進階的禁止外連圖片做法

首先，先製作一個禁止外連的圖片提示圖（警告圖），例如下圖：

此圖的網址為：http://blog.colorbase.tw/refuse-hotlink/001.gif

將上一個禁止外連圖片的htaccess設定改為以下的內容（請將網址更改為你的網址）

#啟動URL重寫引擎
RewriteEngine On

#當有request包含referer時
RewriteCond %{HTTP_REFERER} !^$

#當referer不是由http://blog.colorbase.tw.colorbase.tw來的（即為外連）
RewriteCond %{HTTP_REFERER} !^http://blog.colorbase.tw.colorbase.tw [NC]

#當要求的網址為.jpg或.png或.gif圖片時
#置換為指定圖片，告知對方請勿外連圖片(請換為你指定的圖片網址)，並終止mod_rewrite的處理
RewriteRule \.(jpg|png|gif)$ http://blog.colorbase.tw/refuse-hotlink/001.gif [NC,L]

再嘗試把下面這一張圖片插入到你的部落格文章中，看看會有什麼結果。

圖片網址：http://blog.colorbase.tw/img_temp/refuse-hotlink.gif

參考文章：

• 5 Fun and Practical Htaccess Solutions

方法就是在文章中加入一個超連結，網址格式為：

http://www.plurk.com/?qualifier=shares&status=文章URL (文章標題)

• shares代表轉噗時的「修飾詞」為「推」，也可以改成其他的修飾詞，如says(說)、likes(喜歡)等等。
• 文章URL (文章標題) ，這格式如同在噗文時用的超連結格式。

在原文中提到加入wordpress的連結網址為：

http://www.plurk.com/?qualifier=shares&status=http://你的部落格網址/?p=<?php the_ID(); ?> (<?php the_title(); ?>)

其實網址的部份可以利用wordpress提供的the_permalink()函數來取得目前文章的網址，並不需要自己輸入wordpress會自動取得，因此網址應為以下即可：

http://www.plurk.com/?qualifier=shares&status=<?php the_permalink(); ?> (<?php the_title(); ?>)

所以在wordpress中可以把以下簡短語法加入樣板中，以後發文就會自動出現轉噗按鈕了：

<a title="把這篇文章分享到你的噗浪中" href="http://www.plurk.com/?qualifier=shares&status=<?php the_permalink(); ?> (<?php the_title(); ?>)" target="_blank">
	<img src="你的圖片網址" alt="把這篇文章分享到你的噗浪中" />
</a>

效果範例

1. 顯示單一圖片，點選下圖觀看效果

2.以對話框的方式顯示某網站，點選下面網址觀看效果

http://wordpress.org

3.顯示多個圖，點選下方任一圖，顯示後可按「Next」或「Prev」跳下、上一張。

相關連結

1. 下載ThickBox 3 for WordPress
2. ThickBox 3 for WordPress官方網頁

讓Wordpress文章編輯器自動加入ThickBox的單一圖片顯示效果

由於ThickBox並沒有與Wordpree編輯器完全整合，如果要讓圖片都能夠用ThickBox顯示，每次都手動加入太麻煩了，所以需要稍微改一下WordPress的編輯器，讓每次插入圖片的時候，把原本傻傻的連結圖片變成漂亮的Show出圖片

步驟1.
在「[wordpress目錄]\wp-admin\includes\media.php」中搜尋以下文字

function get_image_send_to_editor

步驟2.

找到後繼續往下面找…

//找到下面這行
$html = '$html";
//加入class="thickbox"改成下面這樣
$html = '$html";

改完之後，下次再插入圖片就會自動以ThickBox秀圖了