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

注意:此教程仅适用于QUX主题,其他主题需要自行修改!!

1、首先我们先改造文章

添加下面代码到文章适当位置,我推荐添加到分享模块下面,位于QUX主题single.php文件下找到class=”action-share bdsharebuttonbox”添加到该DIV下

  1. <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>
  2. </div>

2、改造footer文件

添加下面代码到网页底部文件中,位于QUX主题下footer.php文件,建议添加到footer代码结束后

  1. <?php if(is_single()){ ?>
  2. <div class="row-share">
  3. <div class="bigger-image"><?php
  4. $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
  5. }else{
  6. ?><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 } ?>
  7. </div>
  8. <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>
  9. </div>
  10. <div class="btn-close"><i class="fa fa-close"></i></div>
  11. </div>
  12. <?php } ?>

3,添加JS文件

添加下面代码到JS文件,如果非QUX主题需要jQuery支持,因为使用的jQuery的AJAX提交到主题后端处理,建议添加到QUX主题下的main.js文件下

  1. //提交到wordpress自带的ajax处理
  2. $(document).on('click touchstart', '.btn-bigger-cover', function (event) {event.preventDefault();var bigger_cover = $('.bigger-image img'),
  3. btn_bigger_cover = $('#bigger-cover');if (bigger_cover.hasClass('load_bigger_img')) {
  4. $.ajax({
  5. url: um.ajax_url,
  6. type: 'POST',
  7. dataType: 'json',
  8. data: btn_bigger_cover.data(),}).done(function (data) {if (data.s == 200) {
  9. bigger_cover.attr('src', data.src);
  10. $('.bigger_share').attr('href', data.share);
  11. $('.bigger_down').attr('href', data.src);
  12. bigger_cover.removeClass('load_bigger_img');
  13. $('.image-loading').remove();} else {
  14. swal('操作失败', data.m'error');}}).fail(function () {
  15. swal('操作失败', '网络错误,请稍后再试!''error');})}
  16. $('.overlay-login').css('display','block');
  17. $('.row-share').css({'opacity':'1','visibility':'inherit'});
  18.  
  19. });
  20. //关闭窗口
  21. $('.row-share .btn-close').click(function() {
  22. $('.overlay-login').css('display','none');
  23. $('.row-share').css({'opacity':'0','visibility':'hidden'});
  24. });

4、改造CSS文件,增加样式

一下CSS作为参考,可以修改自己喜欢的样式,放到QUX主题的main.css文件下

  1. /*-----share img box-------*/
  2. .share-img{text-align:center}
  3. .share-img a{
  4. padding: 3px 6px;
  5. border: 1px solid #656565;
  6. border-radius: 20px;
  7. }
  8. .share-img a:hover{
  9. color:#656565;
  10. opacity:0.8;
  11. background-color:#eee;
  12. }
  13. .row-share {
  14. position: fixed;
  15. top: 33%;
  16. left: 50%;
  17. margin: -150px 0 0 -333px;
  18. width: 666px;
  19. background-color: #FFF;
  20. padding: 20px 20px 20px;
  21. border-radius: 4px;
  22. box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  23. z-index: 9999;
  24. opacity: 0;
  25. text-align: center;
  26. visibility: hidden;
  27. }
  28. .row-share .bigger-share,.row-share .bigger-image{float:left;
  29. width:50%;
  30. }
  31.  
  32. .row-share .bigger-share{
  33. position: relative;
  34. margin-top: 40%;
  35. }
  36. .row-share .btn-close{
  37. position: absolute;
  38. top: 10px;
  39. right: 10px;
  40. background: #eee;
  41. }
  42. .row-share .btn-close i{
  43. padding:8px 10px;
  44. }

4、最后一步添加下面文件到主题,然后在主题的fonctions.php文件引入

  1. require get_stylesheet_directory() . '/cover.php';

5、相关文件

建站教程

给wordpress文章图片添加Auto-highslide灯箱预览效果

2019-8-28 13:06:16

建站教程

WordPress博客系统主题css美化彩字体闪

2019-8-28 13:18:35

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
  1. dg123

    闪闪闪闪ssss-

  2. moonleo

    这个插件不错,谢谢站长

个人中心
购物车
优惠劵
今日签到
私信列表
搜索