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

WordPress   2017年04月19日 21:35  

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

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

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

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

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

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('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<a href=\"$1\"><img src=\"$1\" width=\"40%\" height=\"100\" alt=\"freehao123.com\" . basename("$1") . "\" onerror=\"this.src=\'https://www.freehao123.com/wp-content/themes/inews-v2/image/logo.png\'\" /></a>"', $content);
return $content;
}
add_filter('comment_text', 'embed_images');

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 + '[/img]';
}
}

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

Wordpress评论图片点击插入

6、然后在评论框中就会有[img]xxx[/img]这样,其实手动添加代码也是一样的效果。

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('/\[img=?\]*(.*?)(\[\/img)?\]/',  function($matches) { return "<a href=\"$matches[1]\"><img src=\"$matches[1]\" width=\"40%\" height=\"100\" alt=\"" . basename("$matches[1]") . "\" onerror=\"this.src='https://www.freehao123.com/wp-content/themes/inews-v2/image/logo.png'\" /></a>";  } , $content );
return $content;
}
add_filter('comment_text', 'embed_images');

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

Wordpress评论插入图片升级PHP 7.0

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

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

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

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

Comment Images Reloaded上传图片

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

Comment Images Reloaded后台看到图片

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

Comment Images Reloaded设置方法

四、Wordpress评论附件Comment Attachment

1、Comment Attachment官网:

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

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

Comment Attachment上传附件

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

Comment Attachment显示图片

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

Comment Attachment设置方法

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

Comment Attachment是否允许显示

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

Comment Attachment附件类型

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

Comment Attachment插入视频

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

Comment Attachment播放音频

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

1、Wordpress评论插入图片使用代码法好处就在于少安装了一个插件,缺点就是如果你不想用了的话,那么原来通过[img]标签添加的图片地址还是会留在评论中,且有些用户可能找不到外链相册而放弃了引用图片。

Wordpress评论插入图片附件问题

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

文章出自:免费资源部落 https://www.freehao123.com/ 版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。

域名注册
购买VPS主机

您或许对下面这些文章有兴趣:                    本月吐槽辛苦排行榜

在这个部落村庄里,已经有31 位神马家族成员冒出泡来在农场开始干活了
  • 沙发,试试新功能

    愿 博主 web traffic upupupupup

    这是农场的第 1 块农田,部落批准 [牧羊人] 在[2017-4-19 22:45]开垦完成.
  • Kung 23

    上传上传,图片放在本地吗?

    这是农场的第 2 块农田,部落批准 [Kung] 在[2017-4-19 23:17]开垦完成.
  • Kreen 3

    隨意亂傳圖,會不會很困擾啊!(笑)

    这是农场的第 3 块农田,部落批准 [Kreen] 在[2017-4-19 23:45]开垦完成.
  • RR233CY 18

    php7并没有“放弃”preg_replace 只是不再支持 /e 修饰符

    直接上传图片会被玩坏的吧

    这是农场的第 4 块农田,部落批准 [RR233CY] 在[2017-4-20 07:14]开垦完成.
  • 洛克 14

    测试测试

    这是农场的第 5 块农田,部落批准 [洛克] 在[2017-4-20 13:16]开垦完成.
  • 这段话我看的有点绕口。。

    这是农场的第 6 块农田,部落批准 [极简日记] 在[2017-4-20 14:36]开垦完成.
  • 测试测试

    这是农场的第 7 块农田,部落批准 [benzBrake] 在[2017-4-20 16:17]开垦完成.
  • 感谢freehao123,我新站有免费图床了 http://ml.tn

    RR233CY 回复:

    @benzBrake, 有防盗链的

    benzBrake 回复:

    @RR233CY, js伪造refer读取

    小z博客 回复:

    @benzBrake, 域名不错哦

    k 回复:

    @小z博客, 前段时间一直便宜注册。。。loc上人手一个,要不是域名太多,也去凑凑热闹了

    小z博客 回复:

    @k, so,因此我当时也搞了2个。

    benzBrake 回复:

    @小z博客, 双字母都有,拿出来几个随便玩玩

    benzBrake 回复:

    @小z博客, 叠字母

    qi 回复:

    防盗链失效了?

    这是农场的第 8 块农田,部落批准 [benzBrake] 在[2017-4-20 16:19]开垦完成.
  • 这下服务器要存很多图片了

    这是农场的第 9 块农田,部落批准 [黄良钵博客] 在[2017-4-20 21:32]开垦完成.
  • 感觉有被滥用的风险

    qi 回复:

    没事,就目前的使用情况来看,暂时还没有发现有滥用的情况。

    这是农场的第 10 块农田,部落批准 [李毅哲] 在[2017-4-21 06:17]开垦完成.
  • 试试效果~

    这是农场的第 11 块农田,部落批准 [龙笑天] 在[2017-4-22 17:08]开垦完成.
  • Tokin 2

    这种上传都上传到wp目录了?那备份压力很大啊

    qi 回复:

    @Tokin, 是的,图片太多的话就有问题了。

    这是农场的第 12 块农田,部落批准 [Tokin] 在[2017-4-26 08:23]开垦完成.
  • sf

    试下效果

    这是农场的第 13 块农田,部落批准 [sf] 在[2017-4-27 19:07]开垦完成.
  • 我也上传个图片试试,嘿嘿。

    这是农场的第 14 块农田,部落批准 [simplove] 在[2017-4-29 23:55]开垦完成.
  • MG 7

    测试

    这是农场的第 15 块农田,部落批准 [MG] 在[2017-4-30 21:37]开垦完成.
  • 辣手

    test测试

    这是农场的第 16 块农田,部落批准 [辣手] 在[2017-5-20 15:54]开垦完成.
  • 我想问下,不兼容需要修改哪里呢?我不太懂代码

    万达名品 回复:

    @雨总, 哪里不兼容?

    这是农场的第 17 块农田,部落批准 [雨总] 在[2017-8-4 22:47]开垦完成.
  • 测试一下,为什么我用的主题 显示不出来图片呢

    这是农场的第 18 块农田,部落批准 [雨总] 在[2017-8-4 23:37]开垦完成.
  • hello

    :razz: 风帆股份广告 风格服

    这是农场的第 19 块农田,部落批准 [hello] 在[2017-10-15 09:27]开垦完成.
  • hello

    这个评论牛逼啊,我也想装个

    这是农场的第 20 块农田,部落批准 [hello] 在[2017-10-15 09:27]开垦完成.
看贴要回贴有N种理由!看帖不回贴的后果你懂得的!


评论内容 (*必填):
(Ctrl + Enter提交)   

部落快速搜索栏

各类专题梳理

网站导航栏

X
返回顶部