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

1、首先我们先改造文章

添加下面代码到文章适当位置，我推荐添加到分享模块下面，位于主题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文件

添加下面代码到网页底部文件中，位于主题下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提交到主题后端处理，建议添加到主题下的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: 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';