haiyang457 综合资源 2023-12-23

给WordPress评论框加个上传图片功能

WordPress 开启评论功能是为了更好的交互，但默认只能显示文字，如果加上一个上传图片功能，能评论时加上图片，看起来交互更好。具体效果见下图：
要实现这个功能可以用以下方法，具体可以参见：

1、先在 wordpress 评论模板 comments.php 加上一个上传代码，css 请自行美化：

```
<div class="upload_img">
```
```
 <span>
```

 <input id="upload_img_api" type="file" accept="image/*">

 <label class="custom-file-label upbtn" id="upload_img_label" for="upload_img_api" ><i class="fa fa-picture-o"></i>传图</label>

```
 </span>
```
```
</div>
```

WEEX交易所已上线平台币 WEEX Token (WXT)。WXT 作为 WEEX 交易所生态系统的基石，主要用于激励 WEEX 交易平台社区的合作伙伴、贡献者、先驱和活跃成员。

新用户注册 WEEX 账户、参与交易挖矿及平台其他活动，均可免费获得 WXT 空投奖励。

点此注册 WEEX 账户，即刻领取 1,600 WXT 新用户专属空投

2、在 wordpress functions.php 如如下函数，处理评论图片的短代码，第二行代码里 a 链接可以自己处理，我是加了 fancybox 插件点击放大图片：

function boxmoe_comment_upload_img($content) {

 $content = preg_replace('/[img=?]*(.*?)([/img)?]/i', '<a href="$1" rel="external nofollow"  data-fancybox="images" data-fancybox-group="button"><img src="$1" alt="评论" /></a>', $content);

```
 return $content;
```
```
}
```

add_filter('comment_text', 'boxmoe_comment_upload_img');

3、加入 js 代码 json post 上传图片，下面代码可以放在主题的模块页面：

jQuery('#upload_img_api').change(function() {

```
  window.wpActiveEditor = null;
```

 for (var i = 0; i < this.files.length; i++) {

```
 var f=this.files[i];
```
```
 if (!/image/w+/.test(f.type)) {
```

      alert('请选择图片文件(png | jpg | gif)');

```
 return
```
```
 }
```
```
 var formData=new FormData();
```

    formData.append('pic',f); // pic 属于formData对象，这个根据图床的api不同可能需要更换

```
    jQuery.ajax({
```
```
      async:true,
```
```
      crossDomain:true,
```

      url:'https://img.jploc.jsmoe.com/up.php', //图床接口，这是我自己的图床，需要更换成你的图床接口

```
      type : 'POST',
```
```
      processData : false,
```
```
      contentType : false,
```
```
      dataType: 'json',
```
```
      crossDomain: true,
```
```
      data:formData,
```
```
      beforeSend: function (xhr) {
```

        jQuery('#upload_img_label').HTML('<i class="fa fa-spinner rotating"></i> Uploading...');

```
 },
```
```
      success:function(res){
```

        $('textarea[name="comment"]').val($('textarea[name="comment"]').val()+'[img]'+res.data.url+'[/img]').focus();

        jQuery("#upload_img_label").html('<i class="fa fa-check"></i> 上传成功,继续上传');

```
 },
```
```
      error: function (){
```

        jQuery("#upload_img_label").html('<i class="fa fa-times"></i> 上传失败，重新上传');

```
 }
```
```
 });
```
```
 }
```
```
});
```

主题方法模板

本站资源均来源于网络或网友投稿，部分资源未经测试，难免存在BUG，所有资源只限于学习研究，不得商用。如使用本站下载的资源造成任何损失或发生侵权行为，均与本站无关。如不接受本声明请勿下载！本站资源如有侵权，请联系QQ：497149677核实后立即删除！
最客资源网 » 给WordPress评论框加个上传图片功能

haiyang457 普通

分享到：

haiyang457 普通

相关推荐