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

前言

最新有小伙伴问我一个问题,像辉哥博客有些文章是用的关注微信公众号并回复指定内容后获取验证码才能查看文章的部分内容是怎么实现的,今天辉哥就教你纯代码实现WordPress文章部分内容关注微信公众号后可见,示例如下,验证码为123456

辉哥博客
此处内容已经隐藏,请输入验证码查看内容!
验证码:
请关注“辉哥博客”官方微信公众号,回复关键字“自定义关键字”,获取验证码。

教程开始

  1. 首先打开你所使用的主题文件的function.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 id="showMessg" class="secret-password">'.$content.'</div>';

} else if($_POST['secret_key']!=$key&&$_POST['secret_key']!=""){

return '<div class="post_hide_box"><img class="erweima" align="right" src="你的公众号二维码地址" width="150" height="150" alt="辉哥博客"><div class="post-secret"></i>验证码输入错误,请重新输入!</div><form action="'.get_permalink().'" method="post"><span>验证码:</span><input id="pwbox" type="password" size="19" name="secret_key"><a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a></form><div class="details">请关注“辉哥博客”官方微信公众号,回复关键字“<span>'.$keyword.'</span>”,获取验证码。</div></div>';

}else{

return '<div class="post_hide_box"><img class="erweima" align="right" src="你的公众号二维码地址" width="150" height="150" alt="辉哥博客"><div class="post-secret"></i>此处内容已经隐藏,请输入验证码查看内容!</div><form action="'.get_permalink().'" method="post"><span>验证码:</span><input id="pwbox" type="password" size="19" name="secret_key"><a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a></form><div class="details">请关注“辉哥博客”官方微信公众号,回复关键字“<span>'.$keyword.'</span>”,获取验证码。</div></div>';

}

} add_shortcode('gzh2v', 'lxtx_secret_content');
  1. 将下面的代码加入你的style.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;
}
.post_hide_box .post-secret{
font-size: 18px;
line-height:20px; 
color:#f0503c; 
margin:5px;
}
.post_hide_box form{ margin:15px 5px;}
.post_hide_box form span{ font-size:18px; font-weight:bold;}
.post_hide_box .erweima{ margin: 15px;}
.post_hide_box input[type=password]{
color: #00a0f0;
padding: 5px;
background-color: #fff;
border: 1px solid #24b4f0;
border-radius: 5px;
font-size: 12px;
margin: 6px 7px 6px 0px;
-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: #24b4f0; 
border: none; 
padding: 5px;
width: 88px; 
color: #fff; 
border-radius: 5px; 
font-size: 16px;
font-weight:bold;
}
.details{
color:#123456;
font-size: 16px;
line-height: 30px;
margin: 5px;
padding: 3px;
}
.post_hide_box .details span{color:#e74c3c;}

使用

在你的文章编辑器中加入该短代码即可

【gzh2v keyword="关键字" key="验证码"】【/gzh2v】
说明:将【】换成[]

 
如果复制的代码出现不能用的情况,可以在下方下载完整版的代码

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
文章链接:https://www.haah.net/archives/6545.html
文章标题:纯代码实现WordPress文章部分内容关注微信公众号后可见
文章版权:辉哥博客 (haah.net) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

为TA充电
共{{data.count}}人
人已赞赏
技术文档攻城狮

IDEA配置Git不需要提交的文件或文件夹

2021-5-20 17:04:19

技术文档系统教程

【不忘初心】Windows 21H1 (19043.1055) 纯净精简版(持续更新)

2021-6-16 20:06:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索