為Wordpress加上ThickBox 3漂亮的顯示網誌圖片

Posted in 七月 30th, 2008 by 阿育 | Filed under WordPress | Comments (10)

用WordPress的文章編輯器插入圖片，WordPress會很貼心的產生縮圖並將此縮圖連到原圖，不過美中不足的是WordPress就只是傻傻的連結圖片，所以為它加個plugin，讓傻傻的連圖變成漂亮的Show圖。

效果範例

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秀圖了

Tagged : ,

你可能會感興趣

“為Wordpress加上ThickBox 3漂亮的顯示網誌圖片” 目前共有 10 則迴響

  1. 萌 Says:
    十二月 31, 2008 at 7:31 下午

    抱歉 我啟動完插件之後，我的圖片還是一樣按下去會開新視窗的大圖
    請問有哪個步驟不對嗎?

    回覆
  2. 阿育 Says:
    十二月 31, 2008 at 9:46 下午

    嗨 你可能沒有照我的方式做後續的修改
    如果只是安裝的話就必須要在插入圖片後，切換到HTML編輯原始碼，在連結的class中加入thickbox
    例如 class=』thickbox』，這麼做還蠻麻煩的

    回覆
  3. 小白 Says:
    一月 16, 2009 at 10:48 上午

    你的教學很棒唷～～ ^^
    請問一下
    我第一種方法有用出來了
    可是用第三種方法
    還是一次開一張圖片
    需要加什麼設定嗎？

    回覆
  4. 阿育 Says:
    一月 16, 2009 at 11:30 上午

    嗨 小白

    第三種方法是設置圖片群組，也就是必須定義圖片的群組，是第一種方法的延續，群組的設定方式為多加一個rel屬性，例如： rel=』群組名稱』

    //在[wordpress目錄]\wp-admin\includes\media.php 中找到下面這行

    $html = ‘$html『;

    //第一種方法加入只需加入class=』thickbox』改成下面這樣

    $html = ‘$html『;

    //如果要用第三種方法，則必須改為如下

    $html = ‘$html『;

    //其中的group1可以自訂，但必須為英文

    這個方法是設定自動模式，如果你使用群組圖片的機率不高，也可以將自動的設為第一種方式，然後在有需要的文章切換到HTML編輯模式，找到class=』thickbox』 在後面手動加入 rel=』群組名稱』即可

    wordpress的文章編輯器，或許是為了簡化操作介面，刪除掉許多自訂的設置，有時反而更麻煩 XD

    回覆
  5. 小白 Says:
    二月 2, 2009 at 6:43 下午

    瞭解.多謝你的教學和回答唷^^

    回覆
  6. 阿育 Says:
    二月 11, 2009 at 10:37 上午

    嗨 小白

    不客氣

    回覆
  7. [Wordpress]Shutter Reloaded-看片箱效果 | 馬丁の映像攝區 Says:
    六月 27, 2009 at 11:44 下午

    [...] http://blog.colorbase.tw/uncategorized/334 以上兩個都可以在Wordpress官網中找到, 網路上也有很多教學分享, [...]

    回覆
  8. czp568 Says:
    三月 8, 2010 at 1:04 上午

    加载网页的时候出现2个关闭按钮是咋回事~？请教请教

    回覆
  9. czp568 Says:
    三月 8, 2010 at 1:05 上午

    帮忙看看吧http://www.indetime.com/2010/03/07/green-day-last-night-on-earth-live-in-tokyo-ep-2009-itunes-plus-aac/

    回覆
  10. 阿育 Says:
    三月 8, 2010 at 5:24 下午

    Hi czp568

    我看到的很正常

    回覆

留下迴響





CAPTCHA 驗證圖片
*