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

前言

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

教程开始

  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');

2. 将下面的代码加入你的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】

说明:将【】换成[]

​​​​​​​


如果复制的代码出现不能用的情况,可以点击下方链接查看源文章下载

源文链接:https://www.haah.net/archives/6545.html

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辉哥博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值