鹿泽鹿泽  2024-06-20 09:46:01 鹿泽笔记 隐藏边栏  1 

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>

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

function boxmoe_comment_upload_img($content) {
$content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/i', '<a href="$1" 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:'图床接口',   //图床接口,需要更换成图床接口
        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> 上传失败,重新上传');
        }
    });
  }
});	
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505