WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

经常有不少的朋友在我的博客里咨询与交流空间、域名等相关的问题,有些问题无法直接用语言说个明白,就得贴上图片了,例如一些程序报错、服务器崩溃等就需要贴上问题的截图才能解答了。之前博客评论已经设置插入图片了,但是只能使用外链。

后来升级了PHP 7后,发现原来评论插入图片的preg_replace函数已经被PHP 7给放弃了,就暂时关闭了评论插图。不过,最近发现不少的朋友在留言中对评论插图需求比较强烈,于是就按照官方的建议用preg_replace_callback代替了preg_replace。

同时,又发现了新的问题。因为用的是外链图片,有些相册引用的URL是不带Https的,而博客又都是全站Https,如果某一个页面的评论引用了一个未加密的图片,就会导致浏览器不会显示绿色加锁。于是,想到还不如给评论加上上传图片的功能,图片保存在自己的服务器上就没有什么问题了。

所以本篇文章就不分享一下用Comment Images Reloaded和Comment Attachment使用方法与效果,不想用插件的朋友也可以使用代码法搞定。更多的有关于Wordpress图片与评论加速的方法,还有:

  • 1、WP评论优化:WordPress鼓励评论技巧:高亮作者Admin和添加评论者认证
  • 2、图片:WordPress图片实现真正延迟加载-加快页面打开速度节省服务器资源
  • 3、WordPress性能优化加速五大方法:PHP,MysqL优化和评论,图片静态文件加速

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

一、Wordpress评论插入图片代码法

1、这是在没有升级PHP 7以前用的方法,首先在需要插入图片的地方放入以下代码,一般是在comment.php文件的评论框上方。

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

2、进入到你的主题的functions.php添加以下代码:

1
2
3
4
5
6
//评论贴图
function embed_images($content) {
$content = preg_replace('/\

3、上述代码中的width=\"40%\" height=\"100\" alt=\"freehao123.com\"内容都是可以自己设置的,加了一个onerror=,即当引用的图片不存在时就会显示默认图片。

4、同时,在网站引用的JS文件中或者自己直接新建一个JS文件中,添加在以下代码:

1
2
3
4
5
6
7
function embedImage() {
var URL = prompt('请输入图片 URL 地址:', 'https://');
if (URL) {
document.getElementById('comment').
value = document.getElementById('comment').value + '[img]' + URL + '
	
'; } }

5、这样,当评论者在点击插入图片时,就会弹出对话框,填入图片地址。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

6、然后在评论框中就会有

这样,其实手动添加代码也是一样的效果。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

7、点击提交评论后,就可以看到在评论中显示图片了。为了达到更好的效果,你需要调整好图片的CSS样式。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

二、PHP 7用preg_replace_callback替换preg_replace

1、上面的代码用了preg_replace,但是PHP 7已经放弃使用了preg_replace,官方建议是用preg_replace_callback。如果你用的是PHP 7 以上的,那么你可以使用以下贴图代码:

1
2
3
4
5
6
//评论贴图
function embed_images($content) {
	$content = preg_replace_callback('/\

2、如果还在纠结要不要升级到PHP 7以上,看完了这篇文章也许可以打消你的顾虑:PHP 7安装使用体验:性能大提升,兼容性强,扩展支持不够,升级PHP要谨慎。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

三、Comment Images Reloaded插件安装与使用

1、Comment Images Reloaded是一个支持Wordpress评论从本地上传图片的插件,使用插件有一个好处就是当你卸载插件后,你的评论中的图片就消失了,如果用上面的代码法,评论中会留下[img]\

的字样。

  • 1、插件官网:https://wp-puzzle.com/shop/plugins/
  • 2、项目主页:https://wordpress.org/plugins/comment-images-reloaded/

2、安装了Comment Images Reloaded插件后,你的评论框会出现一个上传按钮,支持GIF, PNG, JPG, JPEG,

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

3、发布评论后,会在后台看到已经成功添加了图片了。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

4、在Comment Images Reloaded的插件设置中,你可以设置缩略图大小、最大图片大小、最多可以上传数量、是否开放放大缩小或者手动添加代码等等。(点击放大)

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

四、Wordpress评论附件Comment Attachment

1、Comment Attachment官网:

  • 1、项目主页:https://wordpress.org/plugins/comment-attachment/

2、Comment Attachment是Wordpress一个支持评论上传图片、文件、视频等附件,你可以用它当作评论插入图片的工具。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

3、用Comment Attachment插入的图片会直接显示一个附件的链接,如果是图片则会直接显示出来。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

4、在Comment Attachment的设置中,你可以设置上传按照显示的位置、最大允许上传大小、是否显示图片缩略图等。(点击放大)

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

5、如果显示图片的话,你可以设置显示图片大小,如果上传的是视频、音乐,是否一起插入视频音乐播放器等。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

6、最下方就是Comment Attachment允许上传的附件类型的,视频、文档、音频、图片等格式都是可以选择的。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

7、这是插入视频效果,可以直接播放。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

8、这是插入音频效果,可以点击播放。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

五、Wordpress评论插入图片附件问题

1、Wordpress评论插入图片使用代码法好处就在于少安装了一个插件,缺点就是如果你不想用了的话,那么原来通过

标签添加的图片地址还是会留在评论中,且有些用户可能找不到外链相册而放弃了引用图片。

WordPress评论插入图片与附件-直接添加代码法和安装评论图片插件法

2、Wordpress两个插件:Comment Images Reloaded和Comment Attachment方便实用,不过可能与你的主题评论存在冲突,如果你发现上传图片与附件按钮不自动出现,就要好好检查一下是不是和你的主题不兼容了。