为WordPress增加一个分享海报功能

注意：此教程仅适用于QUX主题，其他主题需要自行修改！！

1、首先我们先改造文章

添加下面代码到文章适当位置，我推荐添加到分享模块下面，位于QUX主题single.php文件下找到class=”action-share bdsharebuttonbox”添加到该DIV下

<div class="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:;"><i class="fa fa-paper-plane"></i> <span>生成封面</span></a>
</div>

2、改造footer文件

添加下面代码到网页底部文件中，位于QUX主题下footer.php文件，建议添加到footer代码结束后

<?php if(is_single()){ ?>
<div class="row-share">
<div class="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(); ?> 封面"><div class="image-loading"><i></i></div><?php } ?>
</div>
<div class="bigger-share"><div class="share-btns"><h3><span>分享本文封面</span></h3><p class="text-center"><a href="<?php echo get_post_meta( get_the_ID(), 'bigger_cover_share', true ); ?>" class="btn btn-primary bigger_share"><i class="fa fa-weibo"></i> 分享到微博</a><a href="<?php echo $bigger_cover; ?>" download="<?php the_title();?>-Bigger-cover" class="btn btn-primary bigger_down"><i class="icons icon-cloud-download"></i> 下载封面</a></p></div>
</div>
<div class="btn-close"><i class="fa fa-close"></i></div>
</div>
<?php } ?>

3，添加JS文件

添加下面代码到JS文件，如果非QUX主题需要jQuery支持，因为使用的jQuery的AJAX提交到主题后端处理，建议添加到QUX主题下的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作为参考，可以修改自己喜欢的样式，放到QUX主题的main.css文件下

/*-----share img box-------*/
.share-img{text-align:center}
.share-img a{
    padding: 3px 6px;
    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: -150px 0 0 -333px;
    width: 666px;
    background-color: #FFF;
    padding: 20px 20px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 5px 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:8px 10px;
}

4、最后一步添加下面文件到主题，然后在主题的fonctions.php文件引入

require get_stylesheet_directory() . '/cover.php';

5、相关文件