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

沃森博客 2017年9月15日19:16:41WordPress评论232阅读模式

只有关注公众号并回复关键字获取验证码后,才能查看到文章中的隐藏内容。但一直没想好怎么用,今天就把它拿起来使用下吧~

1 核心代码

将以下代码放入functions.php中(PS:为了做个DEMO,代码被我隐藏起来了~):

  1. /**
  2. ?*?WordPress文章部分内容关注微信公众号后可见?-?龙笑天下
  3. ?*?http://www.ilxtx.com/view-contents-by-following-wechat-official-accounts.html
  4. ?*/
  5. function?lxtx_secret_content($atts,?$content=null){
  6. ????extract(shortcode_atts(array('key'=>null,'keyword'=>null),?$atts));
  7. ????if(isset($_POST['secret_key'])?&&?$_POST['secret_key']==$key){
  8. ????????return?'<div?class="secret-password">'.$content.'</div>';
  9. ????}?else?{
  10. ????????return
  11. ????????????'<div?class="post_hide_box">
  12. ?????????????<img?class="erweima"?align="right"?src="改为二维码图片的网址"?width="150"?height="150"?alt="你的二维码名字"><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="password"?size="20"?name="secret_key">
  15. ?????????????<a?class="a2"?href="javascript:;"><input?type="submit"?value="提交"?name="Submit"></a>
  16. ?????????????</form>
  17. ?????????????<div?class="details">请关注“你的名字”官方QQ公众号,回复关键字“<span>'.$keyword.'</span>”,获取验证码。【注】用手机QQ扫描右侧二维码都可以关注“你的名字”官方QQ公众号。</div>
  18. ?????????????</div>';
  19. ????}
  20. }
  21. add_shortcode('gzh2v',?'lxtx_secret_content');

注意修改代码中的相关内容!

2 前端CSS样式

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

  1. .post_hide_box,?.secret-password{backgroundWordPress文章部分内容关注微信公众号后可见none?repeat?scroll?0?0?#efe;border-leftWordPress文章部分内容关注微信公众号后可见5px?solid?#e74c3c;colorWordPress文章部分内容关注微信公众号后可见#555;paddingWordPress文章部分内容关注微信公众号后可见10px?0?10px?10px;border-radius:?5px;margin-bottomWordPress文章部分内容关注微信公众号后可见15px;overflow:hidden;?clear:both;}
  2. .post_hide_box?.post-secret{font-sizeWordPress文章部分内容关注微信公众号后可见18px;?line-height:20px;?color:#e74c3c;?margin:5px;}
  3. .post_hide_box?form{?margin:15px?0;}
  4. .post_hide_box?form?span{?font-size:18px;?font-weight:700;}
  5. .post_hide_box?.erweima{?margin-left:20px;?margin-right:16px;}
  6. .post_hide_box?input[type=password]{?colorWordPress文章部分内容关注微信公众号后可见#9ba1a8;?paddingWordPress文章部分内容关注微信公众号后可见6px;?background-colorWordPress文章部分内容关注微信公众号后可见#f6f6f6;?borderWordPress文章部分内容关注微信公众号后可见1px?solid?#e4e6e8;?font-sizeWordPress文章部分内容关注微信公众号后可见12px;-moz-transition:?border?.25s?linear,color?.25s?linear,background-color?.25s?linear;?-webkit-transition:?border?.25s?linear,color?.25s?linear,background-color?.25s?linear;?-o-transition:?border?.25s?linear,color?.25s?linear,background-color?.25s?linear;?transition:?border?.25s?linear,color?.25s?linear,background-color?.25s?linear;}
  7. .post_hide_box?input[type=submit]?{?backgroundWordPress文章部分内容关注微信公众号后可见#F88C00;?borderWordPress文章部分内容关注微信公众号后可见none;?borderWordPress文章部分内容关注微信公众号后可见2px?solid;border-colorWordPress文章部分内容关注微信公众号后可见#F88C00;?border-leftWordPress文章部分内容关注微信公众号后可见none;?border-topWordPress文章部分内容关注微信公众号后可见none;?paddingWordPress文章部分内容关注微信公众号后可见0px;widthWordPress文章部分内容关注微信公众号后可见100px;?heightWordPress文章部分内容关注微信公众号后可见38px;?colorWordPress文章部分内容关注微信公众号后可见#fff;?outline:?0;border-radius:?0?0?2px?0;?font-sizeWordPress文章部分内容关注微信公众号后可见16px;}
  8. .post_hide_box?.details?span{color:#e74c3c;}

3 集成短代码

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

  1. //?后台文本编辑框中添加公众号隐藏简码按钮
  2. function?lxtx_wpsites_add_gzh_quicktags()?{
  3. ????if?(wp_script_is('quicktags')){
  4. ?>
  5. ????<script?type="text/javascript">
  6. ????QTags.addButton(?'gzh2v',?'?公众号隐藏',?'\n[gzh2v?keyword="关键字"?key="验证码"]隐藏内容[/gzh2v]',?""?);
  7. ????</script>
  8. <?php
  9. ????}
  10. }
  11. add_action(?'admin_print_footer_scripts',?'lxtx_wpsites_add_gzh_quicktags'?);

4 使用方法

4.1 在文章中使用短代码

当然,不想写入简码按钮也可以。在写文章的时候,使用以下的输出简码即可:

插入以下简码,修改相关内容即可:

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

4.2 微信公众号

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

5 延伸

其实本文是跟常见的“文章部分内容回复后看见”或“文章部分内容登录后可见”的代码原理一致,只是结合了一下公众号而已。大家可以动动手集成到自己的主题哈!

本程序未测试,收藏待用。

沃森博客
  • 本文由 发表于 2017年9月15日19:16:41
  • 本文来自互利网收集整理,问题反馈联系邮箱:wosnnet@foxmail.com,转载请务必保留本文链接:https://wosn.net/559.html

发表评论