纯代码实现关注微信公众号后可见WordPress文章设置的隐藏内容

网上比较流行的关注公众号代码效果如下图，爱淘资源馆之前用的也是这种。不过按照正常的逻辑，我们应该先告知访客使用方法，访客向公众号发送消息后得到密码，最后再提交密码。也就是说这种密码框在上的布局不太合理，放到操作说明下方更为合适。而且更重要的是，密码框在提示说明上方这种布局，在手机上显示后会发生错位，看着非常别扭。

分享下目前正在使用的代码（还是放到functions.php中），具体效果的话可以看下方演示。

// WordPress免插件开启公众号涨粉代码
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
'
<div class="gzhhide">
<div ><img class="gzhcode" align="right" src="https://ae01.alicdn.com/kf/U9cc05fccc88f4537a8bcf4d13a073aa1p.jpg" alt="微信公众号"></div>
<div class="gzhtitle"><i class="dripicons dripicons-lock"></i> 内容已被隐藏！<i class="fa fa-lock"></i><span></span></div>
<div class="gzh-content">微信扫描二维码或搜索"人须生活着"<button class="itemCopy red_tkl button_tkl" id="TKLS" type="button" data-clipboard-text="人须生活着">点击复制</button>关注公众号,回复关键字“<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('ghide', 'lxtx_secret_content');
// 文章文本编辑器添加自定义按钮，免得每次都要输入短代码
function appthemes_add_quicktags() {
?>
<script type="text/javascript">
QTags.addButton( '公众号隐藏', '公众号隐藏', '【ghide keyword="暗号" key="123456"】','【/ghide】' ); 
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

注意把【】换成[]

css代码见下方，自用代码，花费了很长时间测试才算满意，希望关注公众号多多支持。不同主题可能显示效果会有差异，细微之处，请自行调整。

.post_hide_box, .secret-password{
	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;
	}
.gzhhide span{color:#e74c3c;}
.gzhhide .gzhcode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}
.gzhhide{background:#fcffff;border-radius:10px;padding:20px;margin:15px 0;position:relative;border: 1px dashed #24b4f0}
.gzhhide .gzhtitle{position:relative;font-size:17px;font-weight:700;color:#6c80a7;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:#fff;border: 1px solid #24b4f0;border-radius:4px;
outline:none;float:left;padding:0 10px}
.gzhbox button{width:20%;margin-left:8.8%;
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 110px 15px 0}
.gzhhide .gzhcode{width:110px;height:110px}#vivideo{height:200px}
.gzhhide .gzhtitle i {font-style:normal;}

https://url26.ctfile.com/f/948726-548631241-023f6e（访问密码：7890） 没有安装notepad的话，可以用文本文档打开。