为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、相关文件

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

此处内容需要 登录 并发表评论才可查看
阅读全文
 收藏 (5) 打赏

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

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:轻语博客 » 为WordPress增加一个分享海报功能
分享到: 生成海报
qux主题真好用,功能强大,界面美观,还一直在更新.....

热门推荐

评论 116

评论前必须登录!

立即登录   注册

  1. #106

    赞赞赞

    长空3个月前 (12-24)国内网友谷歌浏览器 Windows 10 登录以回复 适度的
  2. #105

    学习到了,感谢楼主的分享,我去搞搞

    长空3个月前 (12-24)国内网友谷歌浏览器 Windows 10 登录以回复 适度的
  3. #104

    学习到了,感谢楼主的分享,我去搞搞

    克洛克达尔9个月前 (06-23)国内网友谷歌浏览器 Windows 10 登录以回复 适度的
  4. #103

    小学学科

    luyuxz1年前 (2022-12-06)国内网友谷歌浏览器 Windows 10 登录以回复 适度的
  5. #102

    点赞
    点赞
    点赞

    haiger2年前 (2022-08-14)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论
  6. #101

    :razz: 点赞

    tianshao2年前 (2022-04-03)国内网友谷歌浏览器 Windows 7 登录以回复 举报评论

本站承接WordPress主题开发,主题定制,功能开发

QQ咨询轻语云
切换注册

登录

忘记密码 ?

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

切换登录

注册

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

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码