欢迎光临
小清新博客

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

前一段时间一直有朋友让我为主题增加一个海报分享功能,于是自己在网上找了一下特地写下这个教程,海报分享其实就是利用PHP的GD库来让图片生成,所以你所使用的PHP环境必须支持GD库。

注意:此教程仅适用于本站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、相关文件

回复前请确认账号邮箱已补全否者将不会显示

注意:本段内容须成功“回复本文”后“刷新本页”方可查看!
 收藏 (2) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 为WordPress增加一个分享海报功能

分享到: 更多 (0)

评论 56

评论前必须登录!

立即登录   注册

  1. 48楼

    来看看怎么实现的

  2. 47楼

    网络错误: wp-admin/admin-ajax.php 报 500会是什么原因啊?地址没错

    Owen1周前 (05-16)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
    • 500是你内部通信错误,这不是通用代码,自己仔细看代码块,需要根据自己主题修改的

  3. 46楼

    看看这个行不行,

    Owen1周前 (05-16)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
  4. 45楼

    试试看看效果怎么样

    曦若2周前 (05-12)来自天朝的朋友 谷歌浏览器 Windows 10 登录以回复
  5. 44楼

    看下

    菜贩儿2周前 (05-08)来自天朝的朋友 QQ浏览器 Windows 7 登录以回复
  6. 43楼

    回复看看

    vijay2周前 (05-07)来自天朝的朋友 QQ浏览器 Windows 10 登录以回复
  7. 42楼

    点击生成封面,没有反应是什么意思

    大胡3周前 (04-30)来自天朝的朋友 Safari浏览器 Mac OS X 10_14_4 登录以回复
    • 此方法只针对使用该网站QUX的主题用户,其他主题可根据自己的主题修改相应代码

      中国行3周前 (05-06)来自天朝的朋友 谷歌浏览器 Windows 7 登录以回复
  8. 41楼

    下载看看

    大胡3周前 (04-30)来自天朝的朋友 Safari浏览器 Mac OS X 10_14_4 登录以回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活