WordPress插件Auto Highslide代碼化折騰小記

編輯：狂族晨曦 來源：WordPress技巧 日期：2016-03-09 閱讀： 2,862 次 搶個(gè)沙發(fā) 百度已收錄

Auto Highslide插件是先森用的燈箱插件，也就是文章中的圖片可以點(diǎn)擊放大，并且文章中的所有圖片可以像幻燈片一樣左右切換查看。

安裝Auto Highslide插件后，鼠標(biāo)放在文章的圖片中，鼠標(biāo)圖案會(huì)變成放大鏡，提示可以放大。發(fā)大這個(gè)在實(shí)際應(yīng)用中很有用。這個(gè)插件的設(shè)定是，點(diǎn)擊圖片放大，放大會(huì)放大到適應(yīng)屏幕的大小，如果查看最大化（實(shí)際大小），需要點(diǎn)擊按鈕或者快捷鍵“F”鍵：

Auto Highslide插件查看實(shí)際大小

認(rèn)識這個(gè)插件，先森也是在免費(fèi)資源部落看到的。搜了一下，在WordPress插件庫里搜索，好像搜不到Auto Highslide插件，所以要看詳細(xì)介紹或下載的，可以去免費(fèi)資源部落看看：

• 免費(fèi)資源部落：WordPress博客網(wǎng)站文章圖片美化技巧:放大、幻燈片播放

本文記錄的是先森將Auto Highslide插件變成主題自帶，也就是代碼化的折騰過程。各個(gè)WordPress的先輩們都在說，WordPress的插件過多，會(huì)影響網(wǎng)站的響應(yīng)速度，所以插件是裝的越少越好。當(dāng)然，這也不是絕對，要看自己的優(yōu)化。

先森最近想實(shí)現(xiàn)的是讓燈箱能夠配合上七牛的圖片處理。目標(biāo)有兩個(gè)：

1.圖片加上水印；

2.沒放大之前，圖片是被七牛裁剪成寬度500px的，點(diǎn)擊圖片后顯示原圖。

但是先森思考了很久，也沒有想出能夠同時(shí)實(shí)現(xiàn)兩個(gè)目標(biāo)的方法。因?yàn)橄壬腤ordPress后臺文章編輯是用的百度UEditor編輯器，所以不能像WordPress自帶的編輯器插入圖片時(shí)選擇切好的大中小三種圖片大小。這就需要七牛、百度UEditor編輯器、Auto Highslide插件三方的協(xié)調(diào)，所以先森有點(diǎn)腦子不夠用。

雖然沒有想出怎么解決，但是卻順便把Auto Highslide插件代碼化給解決了。

將服務(wù)器中的Auto Highslide插件文件夾下載下來，打開“auto-highslide.php”文件。找到文章中的以下代碼：

'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide

已用有3段以上代碼，分別在第23、24、27行，將以上代碼全部替換成以下代碼：

'.get_bloginfo('template_directory').'

插件的代碼也就修改完了，非常簡單。接下來現(xiàn)將修改好的“auto-highslide.php”文件，與插件文件夾中的“highslide”文件夾上傳到你的主題文件夾中。

當(dāng)然，僅僅如此還沒有生效，還需要在你的主題functions.php中添加下面的代碼：

//燈箱插件代碼化
include("auto-highslide.php");

這就完工了。設(shè)置之前先森將插件停用了，看了一下圖片放大失效了。設(shè)置完后再檢查，OK，放大效果又回來了。下面就可以放心的把插件刪除啦：

刪除Auto Highslide插件

重要補(bǔ)丁

要使Auto Highslide插件生效，還需要在日志中插入圖片時(shí)，選擇鏈接到媒體文件，如果不設(shè)置的話，圖片暗箱效果就無法生效。但每次都點(diǎn)擊設(shè)置的話，會(huì)比較麻煩。如果發(fā)布了很多文章之后，才開始啟用燈箱，如果還要將發(fā)布過的文章重新設(shè)置圖片，那就更麻煩了。所以感謝知更鳥博客鳥哥，教了大家一種補(bǔ)救方法，大家可以去原文看看：

• 知更鳥博客：為WordPress文章圖片自動(dòng)添加鏈接到原圖

方法其實(shí)也很簡單，將下面的JS代碼到主題header.php模版文件中：

<script type="text/javascript">
$(function() {
	$('#newsContent img').each(function(i){
		if (! this.parentNode.href) {
			$(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");
		}
	});
});
</script>

該腳本會(huì)檢查文章中的圖片是否包含了鏈接，如果沒有，會(huì)自動(dòng)為圖片添加鏈接到原圖。

修改其中的 #newsContent 為你主題正文的CSS類。

如果你的主題未加載jquery.js庫文件，代碼將無效，可以將這句代碼加到上面

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

歷史上的今天:

• 2017:  最近在忙什么？破解(10)