纯代码实现WordPress文章设置隐藏内容公众号可见

  Whoa!~ 此文章已被收录至钻芒精选·美好的事物带来好心情!请享用。

55555555555555

公众号的胃口,需要更多的粉丝才能喂饱它。
网上找了一圈找到了龙笑天下博主写的一篇文章:WordPress 文章部分内容关注微信公众号后可见
可以实现文章设置部分内容隐藏,引流用户到公众号关注并回复关键字。来获取隐藏内容
正好下午看见一个比较看好的样式,就移植过来了

最终效果

55555555555555

6666666666666

科技小新
抱歉!隐藏内容,请输入密码后可见!
请打开微信扫描右边的二维码回复关键字“3304”获取密码,也可以微信直接搜索“科技小新”关注微信公众号获取密码。

正文开始

此项目基于龙笑天下博客,教程大部分源自龙笑天下

1 核心代码

将以下代码放入 functions.php 中(钻芒修改版):

注:将代码中二维码链接文字等介绍替换成自己的
/**
* WordPress文章部分内容关注微信公众号后可见
* 钻芒博客移植美化www.zmki.cn 项目基于https://www.ilxtx.com/view-contents-by-following-wechat-official-accounts.html
*/
function lxtx_secret_content($atts, $content=null){
extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
return '<div class="secret-password">'.$content.'</div>';
} else {
return
'<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="gzhhide">
<div ><img class="gzhcode" align="right" src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" width="130" height="130" alt="科技小新"></div>
<div class="gzhtitle">抱歉!隐藏内容,请输入密码后可见!<i class="fa fa-lock"></i><span></span></div>
<div class="gzh-content">请打开微信扫描右边的二维码回复关键字“<span><b>'.$keyword.'</b></span>”获取密码,也可以微信直接搜索“科技小新”关注微信公众号获取密码。</div>

<div class="gzhbox"><form action="'.get_permalink().'" method="post">
<input id="pwbox" type="password" size="20" name="secret_key">
<button type="submit">立即提取</button></form></div></div>';
}
}
add_shortcode('gzh2v', 'lxtx_secret_content');

2 前端 CSS 样式

2020年1月5日更新  之前有很多小伙伴反映css链入错误。已经修正,直接把下边的css丢到主题的style.css即可。本次还修复了 小锁图标倾斜的问题

/**  纯代码实现WordPress文章设置隐藏内容公众号可见*/ 
/**  by:zmik.cn  不会吃你家一碗大米饭。请保留版权。*/
.post_hide_box, .secret-password{background: none repeat scroll 0 0 #efe;border-left: 5px solid #e74c3c;color: #555;padding: 10px 0 10px 10px;border-radius: 5px;margin-bottom: 15px;overflow:hidden; clear:both;}
.post_hide_box .post-secret{font-size: 18px; line-height:20px; color:#e74c3c; margin:5px;}
.post_hide_box form{ margin:15px 0;}
.post_hide_box form span{ font-size:18px; font-weight:700;}
.post_hide_box .erweima{ margin-left:20px; margin-right:16px;}
.post_hide_box input[type=password]{ color: #9ba1a8; padding: 6px; background-color: #f6f6f6; border: 1px solid #e4e6e8; font-size: 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;}
.post_hide_box input[type=submit] { background: #F88C00; border: none; border: 2px solid;border-color: #F88C00; border-left: none; border-top: none; padding: 0px;width: 100px; height: 38px; color: #fff; outline: 0;border-radius: 0 0 2px 0; font-size: 16px;}
.post_hide_box .details span{color:#e74c3c;}
.post_hide_box .details 
span{color:#e74c3c;}
.gzhhide .gzhcode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}
.gzhhide{background:#fff;border-radius:10px;padding:20px;margin:15px 0;position:relative;box-shadow:0 0 20px #d0d0d0}
.gzhhide .gzhtitle{position:relative;font-size:17px;font-weight:700;color:#6c80a7;padding:6px 140px 0 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gzhhide .gzhtitle .fa{position:absolute;left:0;font-size:35px;top:0}
.gzh-content{padding:20px 140px 15px 0;font-size:14px;color:#777}
.gzhbox{padding:0 140px 10px 0}
.gzhbox input{
	width:45%;
	border:none;
	color:#737373;
	font-size:13px;
height:35px;line-height:35px;background:#f2f2f2;border-radius:4px;
outline:none;float:left;padding:0 10px}
.gzhbox button{width:20%;margin-left:15%;
border:none;background:#3b8cff;color:#fff;padding:5px 0;font-size:14px;border-radius:5px}
.gzhhide .gzhcode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}
.gzhbox{padding:0}.gzh-content{padding:20px 90px 15px 0}
.gzhhide .gzhcode{width:80px;height:80px}#vivideo{height:200px}
.gzhhide .gzhtitle i {font-style:normal;}

3 集成短代码

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

由于wordpress会自动转义文章里的代码造成冲突,请复制后删除下面代码中第6行的两个“把我删掉”
// 后台文本编辑框中添加公众号隐藏简码按钮
function lxtx_wpsites_add_gzh_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'gzh2v', ' 公众号隐藏', 'n[把我删掉gzh2v keyword="关键字" key="验证码"]隐藏内容[/gzh2v把我删掉]', "" );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' );

4 使用方法

4.1 在文章中使用短代码

20190503201628

4.2 微信公众号

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

科技小新
抱歉!隐藏内容,请输入密码后可见!
请打开微信扫描右边的二维码回复关键字“演示验证码: hello”获取密码,也可以微信直接搜索“科技小新”关注微信公众号获取密码。

%title插图%num

文章最后更新于 2021-06-12

给TA买糖
共{{data.count}}人
人已赞赏
WordpressWordPress优化WordPress插件

【WP插件】火箭缓存加速-WP Rocket3.3汉化版

2019-5-3 15:57:13

WordpressWordPress优化wordpress美化前端

为wordpress文章添加额外功能[移植自DUX主题]

2019-5-4 10:55:15

18 条回复 A文章作者 M管理员
  1. Fatal error: Uncaught Error: Call to undefined function add_shortcode() in
    提示这个错误呢

    • 代码插入问题

  2. 能在后台控制关键字吗,不然每个页面都需要添加,需要修改就很麻烦啊

    • 不可以直接所有密码统一,每一个文章密码都是添加的时候单独设置的。你如果要全部密码一样,简单修改下源码即可实现

  3. 还有评论名字显示站长怎么弄的,我也想弄个,有代码吗

  4. 可以自定义短代码吗?因为我之前用了插件 WeChat Fans,而且网站文章有点多,改短码很麻烦。

  5. 核心代码贴上之后报错,然后。。。没然后了,小白表示不知道应该删除哪一段,不懂CSS怎么搞。。

  6. 这么说每次都要手动去公众号写自动回复

    • 是的,每篇文章只需要写一次

  7. 正好需要一个好看的样式,谢谢啦! :mrgreen:

    • 既然把原来文字的class名由post_hide_box为gzhhide,后面.post_hide_box的css样式可去掉。经测试确实如此 :mrgreen:

  8. 这个很有用

    • 收到谢谢

    • Alextao

      :mrgreen: :mrgreen: 嗯嗯

  9. 感谢分享哈哈哈哈!

  10. 一下

    • 恭喜楼主喜提沙发