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
无觅

代码如下：

1
2
3

<div class="watermark">
<img class="logo" src="http://picture.jpg" />
</div>

CSS 部分：

1
2
3
4
5
6
7

.watermark {
background:transparent url(http://watermark.png) no-repeat;
}
img.logo {
filter:alpha(opacity=75);
opacity:.75;
}

您可能也喜欢：
CSS3 Color Names	CSS属性中常见的缩写格式	css实现网页内容180度翻转	CSS属性列表	CSS3具有动画效果的一些属性
无觅

既然如此，我们只需要知道这些表情的代码就可以用啦。归纳如下：

　咧嘴笑　’:D’　’:-D’　’:grin:’
　忧伤　’:(‘　’:-(‘　’:sad:’
　惊讶　’8O’　’8-O’　’:shock:’
　耍酷　’8)’　’8-)’　’:cool:’
　冷笑　’:P’　’:-P’　’:razz:’
　自然的表情　’:|’　’:-|’　’:neutral:’
　笑脸　’:)’　’:-)’　’:smile:’
　吃惊　’:o’　’:-o’　’:eek:’
　困惑　’:?’　’:-?’　’:???:’
　抓狂　’:x’　’:-x’　’:mad:’
　眨眼　’;)’　’;-)’　’:wink:’
　大笑　’:lol:’
　右箭头　’:arrow:’
　感叹　’:!:’
　红脸　’:oops:’
　恶魔　’:evil:’
　疑问　’:?:’
　哭泣　’:cry:’
　痛苦　’:twisted:’
　好主意　’:idea:’
　绿脸先生　’:mrgreen:’
　转眼珠　’:roll:’

要记住这些代码可不容易，所以写下这篇归纳性文章，需要用时自己看看，呵呵。扩展一下，因为这些表情都是 WordPress 自带的，在 /wp-includes/images/smilies 文件夹下可以找到这些表情图片，把你自己喜欢的表情图片以原文件名覆盖就可以 DIY 属于你的表情图片了。

原文地址：http://www.life-studio.cn/wordpress-emotion-images.html

您可能也喜欢：
WordPress无插件添加表情	WordPress 短代码（简码）收藏	WordPress自带的图片显示功能Thickbox	WordPress升级3.2	WordPress的object-cache缓存
无觅