WP 用久了, 你對後台上傳/插入媒體, 或主題預覽所出現的那個黑色透明背景應相當眼熟吧!

它叫做 Thickbox, 現在要把它從後台抓到前台來當演員, 讓它有個機會表現.
Thickbox 是基於 jQuery 所開發的擴展, 文件很小, js 未壓縮只有 12k, css 4k, 一定比 Lightbox 快多了.

它的功能除了展示圖片, 也可用 iFrame 或 Ajax 來開啟其它網頁, 現在來試一下它的功能.

如果你主題都還沒有掛上 jQuery, 在 header.php 的 ＜？php wp_head(); ？＞ 之前加入:

<link rel="stylesheet" href="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />
<?php wp_enqueue_script('thickbox'); ?>

請注意第二行是會同時載入 ‘thickbox’ 和 ‘jquery’,

順便檢查一下 footer.php 有沒有 wp_footer(); 這種方式掛 thickbox.js 是會出現在 wp_footer();

如果你早已掛上 jQuery, 改用下面方法:

<link rel="stylesheet" href="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-includes/js/thickbox/thickbox.js"></script>

第一行是 Thickbox 的 css, 第二行是 jQuery, 第三行是 Thickbox.
　
然後, 準備好幾張要上傳的圖片.
演員到齊, 開工!

在編輯文章的時候, 上傳/插入圖片, 選擇 “中等” 縮圖, 鏈接 URL 選擇 “文件鏈接”, 在 HTML 源代碼編輯器中, 將 class=”thickbox” 加到 a href 之間, 完成的樣子如下:

<a class="thickbox" href="http://...(圖)..."><img src="http://...(縮圖)..." /></a>

到前台預覽看看, 點擊圖片就有 Thickbox 效果了!　(提醒: 鼠標點擊黑色透明背景或按 “ESC” 也可跳脫)

如果是多圖, 除了加 class=”thickbox” 另外還要定義 rel=”….” 群組名稱自己取, 幾張圖都要用同一組名.

<a class="thickbox" rel="group1" href="http://...(第一張圖)..."><img src="http://...(第一張縮圖)..." /></a>
<a class="thickbox" rel="group1" href="http://...(第二張圖)..."><img src="http://...(第二張縮圖)..." /></a>
<a class="thickbox" rel="group1" href="http://...(第三張圖)..."><img src="http://...(第三張縮圖)..." /></a>

有了群組, 在 Thickbox 的左下角會自動出現翻頁鏈接.在這裏, 我選擇 “小尺寸” 縮略圖

上面是圖片效果, 現在試試 iFrame 網頁鏈接的效果:

<a class="thickbox" href="http://willin.heliohost.org/?TB_iframe=true">Willin Kan 的博客</a>

如果覺得尺寸不對, 還可定義框架的大小:
TB_iframe=true&height=600&width=900 就是框架高600x寬900.
這裏的尺寸是px, 不能用百分比的方式, 如: 90%.
如果要用百分比, 就用 js 偵測視窗尺寸再轉 px. 這教程很多, google 得到.

評語:
WP 內置的 Thickbox 的圖片展示效果不錯, 又不用插件, 程式也不大, 就別留它在後台打瞌睡了.

後記:
又留了一手, 現在補充:
用 jQuery 為每張圖片鏈接自動加上 class=”thickbox”
假設你主題 single.php 發佈內容的 id=”content”
網頁鏈接除了加 class=”thickbox” 另外還要開 TB_iframe:

$('#content p a').each(function(){
var a_href = $(this).attr('href').toLowerCase();
var file_type = a_href.substring(a_href.lastIndexOf('.'));
if (file_type == '.jpg'){$(this).addClass('thickbox')};
});

把上面放在 jQurey 裏面就行了, 但只有圖片鏈接有效, 網頁鏈接較麻煩就沒寫了.
如果是多圖的鏈接, 上面會幫你加 class=”thickbox” 但群組還是要自己加, 偷懶不得啊!

圖片是設 .jpg, 如果有其它格式, 自己再加吧! 總要讓你也動動腦~

2009.12.24更新 感謝阿士發現 WordPress 2.9 的 Thickbox 有了修改: thickbox.js 增加了 “thickboxL10n” 變量, 找不到這變量 thickbox 就失效了. 修正方式就是采用 WP 掛 script 的標準方式, 也就是上面所教的第一種方法, 用 wp_enqueue_script(‘thickbox’) 掛上就可解決了.

具体图片效果见这里：http://willin.heliohost.org/?p=1283

您可能也喜欢：
非插件wp标题个性化字体图片显示	首页自动调用日志第一张图片	WordPress 自带表情代码	WordPress图片插件Thumbnails Anywhere	WordPress升级3.2
无觅