WordPress教程

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

也想出现在这里?联系我们
创客云

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

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

也想出现在这里?联系我们
创客主机
  1. <div class="upload_img">
  2.   <span>
  3.     <input id="upload_img_api" type="file" accept="image/*">
  4.     <label class="custom-file-label upbtn" id="upload_img_label" for="upload_img_api" ><i class="fa fa-picture-o"></i>传图</label>
  5.   </span>
  6. </div>

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

  1. function boxmoe_comment_upload_img($content) {
  2.   $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/i', '<a href="$1" data-fancybox="images" data-fancybox-group="button"><img src="$1" alt="评论" /></a>', $content);
  3.   return $content;
  4. }
  5. add_filter('comment_text', 'boxmoe_comment_upload_img');

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

  1. jQuery('#upload_img_api').change(function() {
  2.   window.wpActiveEditor = null;
  3.   for (var i = 0; i < this.files.length; i++) {
  4.     var f=this.files[i];
  5.     if (!/image\/\w+/.test(f.type)) {
  6.       alert('请选择图片文件(png | jpg | gif)');
  7.       return
  8.     }
  9.     var formData=new FormData();
  10.     formData.append('pic',f); // pic 属于formData对象,这个根据图床的api不同可能需要更换
  11.     jQuery.ajax({
  12.       async:true,
  13.       crossDomain:true,
  14.       url:'https://img.jploc.jsmoe.com/up.php', //图床接口,这是我自己的图床,需要更换成你的图床接口
  15.       type : 'POST',
  16.       processData : false,
  17.       contentType : false,
  18.       dataType: 'json',
  19.       crossDomain: true,
  20.       data:formData,
  21.       beforeSend: function (xhr) {
  22.         jQuery('#upload_img_label').HTML('<i class="fa fa-spinner rotating"></i> Uploading...');
  23.       },
  24.       success:function(res){
  25.         $('textarea[name="comment"]').val($('textarea[name="comment"]').val()+'[img]'+res.data.url+'[/img]').focus();
  26.         jQuery("#upload_img_label").html('<i class="fa fa-check"></i> 上传成功,继续上传');
  27.       },
  28.       error: function (){
  29.         jQuery("#upload_img_label").html('<i class="fa fa-times"></i> 上传失败,重新上传');
  30.       }
  31.     });
  32.   }
  33. });
资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表回复

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!