注意:此教程仅适用于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';
闪闪闪闪ssss-
这个插件不错,谢谢站长