Wordpress 目前是世界上建站使用最多的框架，很多朋友使用 Wordpress 做为自己的博客。慢慢的有些朋友会系那个将流量导入到自己的微信公众号，大家相续搞了一些方案。
甚至还有一个朋友做了一个叫“微信公众号涨粉”插件，基本上实现了涨粉必须关注公号才可以查看隐藏内容的功能。但是随着时间的流逝这个差距也有一个小问题，就是不支持 Wordpress 5，另外还有一个痛点所有的页面秘密都是一样的。
前段时间自己也搭了一个网站，想到达这样的功能，可惜找了很多相关的插件，或者现成的一些解决方案，都不能达到自己的需求，当然也发现了一些好玩的东西，于是在这个基础之上最后实现了预想中的功能。
1、必须在公众号中回复某个关键字，才可以看到隐藏内容（重要信息或者下载资源）。 2、每个页面可以单独定制秘密，也可以统一设置密码。
既然没有现成的解决方案，那就自己来了。
我是在网上查找相关解决方案的时候，看到了这个文章WordPress代码隐藏文章内容 需登录或输入密码可见，再它的基础上实现了相关功能。
废话不多说给大家说如何来实现吧。
在主题 function.php 文件里加入以下代码。
//部分内容输入密码可见
function e_secret($atts, $content=null){
extract(shortcode_atts(array('key'=>null), $atts));
if(isset($_POST['e_secret_key']) && $_POST['e_secret_key'] !='' && $_POST['e_secret_key']==$key){
return '
<div class="e-secret">'.$content.'</div>
';
}elseif (isset($_POST['e_secret_key']) && $_POST['e_secret_key'] !='' && $key =='' && $_POST['e_secret_key']=='123456') {
return '
<div class="e-secret">'.$content.'</div>
';
}
else{
return '
<form class="e-secret" action="'.get_permalink().'" method="post" name="e-secret" >
<div class="e-secret-container">
<div class="e-secret-title-content" >此处内容已经被作者无情的隐藏，请输入验证码查看内容：</div>
<div class="e-secret-code" >
<span>验证码：</span>
<input type="password" name="e_secret_key" class="euc-y-i" maxlength="50" >
<input type="submit" class="euc-y-s" value="确定" >
</div>
<div class="e-secret-tip" >
请关注本站公众号回复“<span>验证码</span>”，获取验证码。
<span>【注】</span>”在微信里搜索“不会笑青年”或者“laughyouth”或者微信扫描右侧二维码都可以关注微信公众号。
</div>
</div>
<img src="http://www.ityouknow.com/assets/images/cartoon.jpg" alt="不会笑青年" >
</form>
';
}
}
add_shortcode('secret','e_secret');
然后注入到主函数中。
上面这段代码比较简单，意思就是页面是否有隐藏代码的标注，如果有的话显示需要验证的页面，如果是提交了页面秘密之后，根据秘密判断是否正确，如果正确展示出隐藏的内容。
自己主题 main.css 或者 style.css 或者 app.css 样式文件里添加下面代码 css 改动如下：
.e-secret {
background: none repeat scroll 0 0 #fcffff;
border: 1px dashed #24b4f0;
color: #123456;
padding: 10px;
border-radius: 9px;
margin: 18px 0px;
overflow: hidden;
clear: both;
white-space: initial;
}
.e-secret img{
float: right;
max-width: 30%;
}
.e-secret input.euc-y-i[type="password"] {
/* float: left; */
background: #fff;
width: 20%;
line-height: 30px;
margin-top: 5px;
border-radius: 3px;
display:inline-block;
}
.e-secret input.euc-y-s[type="submit"] {
margin-top: -47px;
width: 72px;
margin-right: 1px;
border-radius: 3px;
margin-top: 1px;
padding: 10px 8px;
display:inline-block;
}
.e-secret-container{
display: inline-block;
width: 70%;
margin-top: 10px;
}
.e-secret-title-content{
font-size: 18px;
line-height: 20px;
color: #f0503c;
margin: 5px;
}
.e-secret-code{
margin-top: 24px;
}
.e-secret-code span{
font-size: 18px;
font-weight: bold;
margin: 5px;
}
.e-secret-tip{
margin-top: 24px;
}
.e-secret-tip span{
color: #f0503c;
}
以上代码即可实现我们想要的功能，如果在页面中需要隐藏部分内容是，就按照下面这种方式来写。
[secret key="密码"]加密内容[/secret] // 使用页面密码
[secret ]加密内容[/secret] // 使用全局统一密码
如果这里使用了 key 这个关键字，就说明页面定制了自己的秘密，用户需要输入次密码才可以看到隐藏功能；如果没有使用 key 关键字那么系统就会默认使用统一的密码来隐藏内容。
最后的效果如下：
我把完整的代码放到了 不会笑青年公号中，感兴趣的朋友在公号中回复 306 查看。
