1、首先我们先改造文章
添加下面代码到文章适当位置，我推荐添加到分享模块下面，位于主题single.php文件下找到class=”action-share bdsharebuttonbox”添加到该DIV下
复制<divclass=“share-img”>
<a class=”btn-bigger-cover” data-nonce=”<?php echo wp_create_nonce(mi-create-bigger-image-.$post->ID );?>” data-id=”<?php echo $post->ID;?>” data-action=”create-bigger-image” id=”bigger-cover” href=”javascript:;”><iclass=“fa fa-paper-plane”></i><span>生成封面</span></a></div>
2、改造footer文件
添加下面代码到网页底部文件中，位于主题下footer.php文件，建议添加到footer代码结束后
复制<?php if(is_single()){?><divclass=“row-share”><divclass=“bigger-image”><?php
$bigger_cover = get_post_meta( get_the_ID(),bigger_cover,true);if( $bigger_cover ){?>
<img class=”load_bigger_img” src=”<?php echo $bigger_cover ?>” alt=”<?php the_title();?> 封面”>
<?php
}else{?>
<img class=”load_bigger_img” src=”<?php echo get_template_directory_uri()./img/loading.gif;?>” alt=”<?php the_title();?> 封面”>
<divclass=“image-loading”><i></i></div><?php }?></div><divclass=“bigger-share”><divclass=“share-btns”><h3><span>分享本文封面</span></h3><pclass=“text-center”>
<a href=”<?php echo get_post_meta( get_the_ID(),bigger_cover_share,true);?>” class=”btn btn-primary bigger_share”><iclass=“fa fa-weibo”></i> 分享到微博</a>
<a href=”<?php echo $bigger_cover;?>” download=”<?php the_title();?>-Bigger-cover” class=”btn btn-primary bigger_down”><iclass=“icons icon-cloud-download”></i> 下载封面</a></p></div></div><divclass=“btn-close”><iclass=“fa fa-close”></i></div></div><?php }?>
3，添加JS文件
添加下面代码到JS文件，如果非QUX主题需要jQuery支持，因为使用的jQuery的AJAX提交到主题后端处理，建议添加到主题下的main.js文件下
复制//提交到wordpress自带的ajax处理
$(document).on(click touchstart,.btn-bigger-cover,function(event){event.preventDefault();var bigger_cover = $(.bigger-image img),
btn_bigger_cover = $(#bigger-cover);if(bigger_cover.hasClass(load_bigger_img)){
$.ajax({
url: um.ajax_url,
type:POST,
dataType:json,
data: btn_bigger_cover.data(),}).done(function(data){if(data.s ==200){
bigger_cover.attr(src, data.src);
$(.bigger_share).attr(href, data.share);
$(.bigger_down).attr(href, data.src);
bigger_cover.removeClass(load_bigger_img);
$(.image-loading).remove();}else{
swal(操作失败, data.m,error);}}).fail(function(){
swal(操作失败,网络错误，请稍后再试！,error);})}
$(.overlay-login).css(display,block);
$(.row-share).css({opacity:1,visibility:inherit});});//关闭窗口
$(.row-share .btn-close).click(function(){
$(.overlay-login).css(display,none);
$(.row-share).css({opacity:0,visibility:hidden});});
4、改造CSS文件，增加样式
一下CSS作为参考，可以修改自己喜欢的样式，放到主题的main.css文件下
复制/*—–share img box——-*/.share–img{text–align:center}.share–img a{
padding:3px6px;
border:1px solid #656565;
border–radius:20px;}.share–img a:hover{
color:#656565;
opacity:0.8;
background–color:#eee;}.row–share {
position:fixed;
top:33%;
left:50%;
margin:–150px00–333px;
width:666px;
background–color:#FFF;
padding:20px20px20px;
border–radius:4px;
box–shadow:01px5px rgba(0,0,0,0.4);
z–index:9999;
opacity:0;
text–align: center;
visibility: hidden;}.row–share .bigger–share,.row–share .bigger–image{float:left;
width:50%;}.row–share .bigger–share{
position: relative;
margin–top:40%;}.row–share .btn–close{
position: absolute;
top:10px;
right:10px;
background:#eee;}.row–share .btn–close i{
padding:8px10px;}
4、最后一步添加下面文件到主题，然后在主题的fonctions.php文件引入
复制require get_stylesheet_directory()./cover.php;
