• Home 
  • > Categories > 網絡.博客 > WordPress,非插件實現評論者回復插入圖片功能代碼分享


WordPress,非插件實現評論者回復插入圖片功能代碼分享

公元2011年09月18日博主被111人群毆打醬油看熱鬧的有:14,727 views

WordPress,非插件實現評論者回復插入圖片功能代碼分享

其實這個功能已經加入有一段時間,當時也是為了更完善博客才加入了這個評論者可插入圖片的功能,不過想想也無所謂了,畢竟不影響什麼的,並且引入的圖片都是外鏈的,所以就一直保留著這個功能,今天漠北兄問到了這個,就在此和大家分享下,希望能幫上需要的哥們!

進入正題,本人是代碼小白,至今還沒有自己寫過代碼除了HTML和CSS外,所以代碼是來自網絡傳播,內容參考自知更鳥大蝦和Willin大蝦,在此多謝也希望大家多多支持,如果遇到添加時無法實現的問題,可以多多溝通或者嘗試,因為畢竟主題結構不一樣,有可能實現中會出現個體差異,其實代碼實現挺簡單的,內容如下:

首先打開主題的functions.php在其裏面加入以下代碼:

1
2
3
4
5
6

function embed_images($content) { 
$content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e',
 '"<mg src="\&quot;$1\&quot;" alt="\""" . basename("$1") . "\" />"', $content); 
return $content; 
} 
add_filter('comment_text', 'embed_images');

其次新建立一個JS文件,內容如下

記得,建立JS上傳後在主題的header.php調用上傳的JS

1
2
3
4
5
6
7

function embedImage() {
var URL = prompt('請輸入圖片 URL 地址:', 'http://');
if (URL) {
document.getElementById('comment').
value = document.getElementById('comment').value + '[img]' + URL + '[/img]';
}
}

最後,打開主題comment.php文件,在適當的位置加入

1

<a href="javascript:embedImage();">插入圖片</a>

好了,基本上就是這樣了,完成了,如果對外觀不滿意可以修改css樣式,圖片尺寸較大，在IE下會造成模板變形，可以在主題樣式文件中加入以下代碼限制圖片大小這樣自主性就強了很多,努力的折騰吧!

1
2
3
4
5
6

commentlist p img{ 
max-width:620px; 
} 
.commentlist p img{ 
width:expression(document.body.clientWidth> 620? "620px": "auto" ); 
}

Ps:哎,以前修改的代碼,現在好多都不記得了,以為碼這篇文章很快就能搞定,沒想到碼了這麼久,再回頭看看主題的一些修改,還真的很多都不記得了,就像真的又重新研究了一遍一樣,悲催啊,傷不起的人類啊!

效果如下,看本博客回復框下實例

看看下面這些文章有沒有喜歡的!

如果不是寶貝神經病才推薦呢!

111 位最佳損友留下了真知見解!