WordPress实现文章部分内容关注微信公众号后可见

2020年02月7日23:39:55 发表评论 热度605 ℃

WordPress实现文章部分内容关注微信公众号后可见

第一步:核心代码

  1. /**
  2.  * WordPress文章部分内容关注微信公众号后可见 
  3.  */
  4. function lxtx_secret_content($atts$content=null){
  5. extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
  6. if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
  7. return '<div class="secret-password">'.$content.'</div>';
  8. else {
  9. return
  10. '<div class="post_hide_box">
  11. <div class="post-img1"><img class="erweima" align="right" src="https://www.guapizhu.com/wp-content/uploads/2020/01/gongzhonghao.jpg" alt="瓜皮猪博客" width="150" height="150" alt="瓜皮猪博客"></div>
  12. <div class="post-secret"><i class="fa fa-exclamation-circle"></i> 此处内容已经隐藏,请输入验证码查看内容!</div>
  13. <form action="'.get_permalink().'" method="post">
  14. <span>验证码:</span><input id="pwbox" type="input" size="20" name="secret_key">
  15. <a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a>
  16. </form>
  17. <div class="details">请关注“瓜皮猪博客”官方微信公众号,回复“<span>'.$keyword.'</span>”,获取验证码。</div>
  18. </div>';
  19. }
  20. }
  21. add_shortcode('gzh2v', 'lxtx_secret_content');

PS:注意修改代码中的相关内容!将代码放入 主题目录下的functions.php 文件中

第二步:前端CSS样式

将以下代码放到你主题的style.css文件中:

  1. /* 网站添加公众号涨粉功能样式代码 */
  2. .post_hide_box, .secret-password{
  3. background: none repeat scroll 0 0 #efe;
  4. border:1px solid #05EFFE;
  5. border-left: 5px solid #05EFFE;
  6. color: #555;
  7. padding: 10px;
  8. border-radius: 5px;
  9. margin: 15px 2px 15px 30px;
  10. overflow: hidden;
  11. clear: both;
  12. }
  13. .post_hide_box .post-secret {
  14. font-size: 16px;
  15. line-height: 20px;
  16. color: #e74c3c;
  17. margin: 5px;
  18. }
  19. .post_hide_box .post-secret i{margin:0px;}
  20. .post_hide_box form {
  21. margin: 12px 5px;
  22. line-height:36px;
  23. }
  24. .post_hide_box form span {
  25. font-size: 18px;
  26. font-weight: 700;
  27. }
  28. .post_hide_box .erweima {
  29. margin: 10px;
  30. }
  31. .post_hide_box input[type=input] {
  32. color: #000000;
  33. padding: 6px;
  34. background-color: #FFFFFF;
  35. border: 1px solid #e4e6e8;
  36. font-size: 12px;
  37. border-radius: 5px;
  38. width:100px;
  39. height:36px;
  40. -moz-transition: border .25s linear,color .25s linear,background-color .25s linear;
  41. -webkit-transition: border .25s linear,color .25s linear,background-color .25s linear;
  42. -o-transition: border .25s linear,color .25s linear,background-color .25s linear;
  43. transition: border .25s linear,color .25s linear,background-color .25s linear;
  44. }
  45. .post_hide_box input[type=submit] {
  46. background: #24B4F0;
  47. border: none;
  48. border: 1px solid;
  49. border-color: #24B4F0;
  50. border-left: none;
  51. border-top: none;
  52. padding: 0px;
  53. width: 80px;
  54. height: 36px;
  55. color: #fff;
  56. outline: 0;
  57. border-radius: 5px;
  58. font-size: 16px;
  59. cursor:pointer;
  60. }
  61. .post_hide_box .details {padding-left:5px;}
  62. .post_hide_box .details span {color: #e74c3c;font-weight:bold;}
  63. .post_hide_box .tips {font-size:14px;padding-left:5px;}
  64. .post_hide_box .post-img2 { display:none;}
  65. @media screen and (max-width:479px) {
  66. .post_hide_box .post-img1 { display:none;width:100%;}
  67. .post_hide_box .post-img2 { display:block;width:100%;}
  68. .post_hide_box .post-img2 img{ margin:0 auto;}
  69. .post_hide_box .post-secret { display:block; width:100%;}
  70. .post_hide_box input[type=submit] {width:50px;}

第三步、集成短代码

为了方便使用,在后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可:

  1. function lxtx_wpsites_add_gzh_quicktags() {
  2. if (wp_script_is('quicktags')){
  3. ?>
  4. <script type="text/javascript">
  5. QTags.addButton( 'gzh2v', ' 公众号隐藏', '\n[gzh2v keyword="关键字" key="验证码"]隐藏内容[/gzh2v]', "" );
  6. // 实际使用请把 上一行的【】改为[]
  7. </script>
  8. <?php
  9. }
  10. }
  11. add_action( 'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' );

第五步:使用方法

5.1、在文章中插入以下简码,修改相关内容即可:

  1. [gzh2v keyword="关键字" key="验证码"]隐藏内容[/gzh2v]

5.2、微信公众号

这里以微信公众号为例(QQ公众号应该也是这样),在微信公众号的“自动回复-关键字自动回复”中设置好关键字(对应上面代码中的keyword)及验证码(对应上面代码中的key)。

效果图展示

WordPress实现文章部分内容关注微信公众号后可见

本文最后更新于:2022-07-14 22:35
瓜皮猪

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: