前一段时间一直有朋友让我为主题增加一个海报分享功能,于是自己在网上找了一下特地写下这个教程,海报分享其实就是利用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> [/collapse]
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 } ?> [/collapse]
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'}); }); [/collapse]
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; } [/collapse]
4、最后一步添加下面文件到主题,然后在主题的fonctions.php文件引入
require get_stylesheet_directory() . '/cover.php';[/collapse]
5、相关文件
回复前请确认账号邮箱已补全否者将不会显示
© 版权声明
本站文件大多收集于互联网,如有版权问题,请联系ONE HIKER及时删除!未经允许不得转载!网站同时存在HTTP和HTTPS站点,金瓦刀网正全力更新中,浏览时请您注意切换到HTTPS协议的站点!
THE END