WordPress关注微信公众号查看隐藏内容教程[优化版]

最近接到客户需求:网站要增加一个关注微信公众号查看隐藏内容的功能,客户说网上其实有很多教程,但是他按照做了,效果不太理想,于是就找到我们进行优化这个功能。

我们进行优化的细节点:网上的都是千篇一律没有注重交互,插件也是只能设置一个固定的验证码和固定的关键字,这样非常LOW,我们进行优化使用的是自动获取文章ID为关键字,验证码就是我们手动在微信公众号里设置自动回复,做到每一个关键字对应一个验证码,做好交付到客户手上他们也一致认可了我们的构思。

为了让更多站长少走弯路,NAZ.CN教大家一步一步实现这个小功能。

第一步:将以下代码复制到你主题的functions.php文件中

//关注微信公众号获取查看验证码 
   function gzh_content($atts, $content=null){
		extract(shortcode_atts(array('key'=>null,'keyword'=>null), $atts));
	    global $post;   
        $keyword = $post->ID; 
		if(isset($_POST['secret_key']) && $_POST['secret_key']==$key){
			return '<div class="hide-t">隐藏的内容</div><div class="secret-password">'.$content.'</div>';
		} else if(isset($_POST['secret_key']) && $_POST['secret_key']!=$key){
			return'<div class="post_hide_box">
			<img class="erweima" align="right" src="http://qj.naz.cn/wp-content/themes/pc/images/qrcode_wx.jpg" width="150" height="150" alt="你的二维码名字"><div class="post-secret"><i class="iconfont icon-tishi"></i>验证码错误!请重新输入</div>
			<form action="'.get_permalink().'" method="post">
			<span>验证码:</span><input id="pwbox" type="password" size="20" 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="http://qj.naz.cn/wp-content/themes/pc/images/qrcode_wx.jpg" width="150" height="150" alt="你的二维码名字"><div class="post-secret"><i class="iconfont icon-tishi"></i>输入验证码即可查看内容</div>
			<form action="'.get_permalink().'" method="post">
			<span>验证码:</span><input id="pwbox" type="password" size="20" 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('gzh', 'gzh_content');
// 后台文本编辑框中添加公众号隐藏简码按钮,下面的【】符号注意要修改为[]
function gzh_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
    QTags.addButton( 'gzh', ' 关注公众号查看隐藏内容短代码', '\n【gzh key="验证码"]隐藏内容[/gzh】', "" );
    </script>
<?php
    }
}
add_action( 'admin_print_footer_scripts', 'gzh_quicktags' );

第二步:将以下代码复制到你主题的style.css样式文件中

/*关注微信公众号获取查看验证码*/
.post_hide_box, .secret-password{background: rgba(216,184,121,.08);color: #666;padding: 10px 0 10px 10px;border-radius: 5px;margin-bottom: 15px;overflow: hidden;clear: both;border: 1px solid rgba(216,184,121,.3);}
.post_hide_box .post-secret{font-size: 18px;line-height: 20px;color: #e74c3c;margin: 5px;}
.post-secret i{margin-right: 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;height: 25px;}
.post_hide_box input[type=submit]{background: #1478f0;border: none;padding: 0px;width: 100px;height: 37px;color: #fff;outline: 0;border-radius: 0 0 2px 0;font-size: 15px;}
.post_hide_box .details span{color: #e74c3c;}
.hide-t{position: relative;color: #999;font-size: 13px;text-align: center;margin-bottom: 20px;}
.hide-t::before{content: "";position: absolute;top: 13px;left: 0;height: 1px;width: 42%;border-bottom: 1px dashed #ddd;}
.hide-t::after{content: "";position: absolute;top: 13px;right: 0;height: 1px;width: 42%;border-bottom: 1px dashed #ddd;}

第三步:最关键的一步,在公众号里设置关键字自动回复验证码(这里为了给大家测试这个功能,隐藏了,大家关注一下我们公众号测试就看到效果哟~)

你的二维码名字
输入验证码即可查看内容
验证码:
打开微信扫一扫,关注“共享源码”官方微信公众号,回复关键字“1860”,获取验证码。

综上所述:纯代码实现WordPress关注微信公众号查看隐藏内容功能非常简单,如果你想整合到网站里面可以付费找我们帮你整合即可。

相关文章

WordPress添加分类筛选功能教程

阅读 8

第一步:将以下代码复制到你的主题functions.php文件中: //获取当前分类ID function get_category_root_id($cat) { $this_category = get_category($cat...博文来自:技术博客

WordPress添加自定义QQ分享、微博分享功能教程

阅读 29

使用到的接口: 1.分享到QQ空间接口:https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的...博文来自:技术博客

WordPress邀请码功能开发教程

阅读 31

开发网站过程中需要对用户注册增加一个邀请码功能,以下是邀请码功能开发详细教程 第一步:需要新建一个数据表来保存邀请码 code:邀请码、max:邀请码使用次数...博文来自:技术博客

WordPress登录后才能查看网站内容,未登录跳转登录页面教程

阅读 34

实现代码很简单,找全站执行的钩子,这里选了template_redirect钩子,这个动作钩子在加载模板时执行,当然其它很多都可以用。 <?php //template_redire...博文来自:技术博客

网信办要求网站4月3日起设置黑白主页教程,代码兼容ie、firefox、chrome、opera、safari

阅读 1,857

根据国务院文件,4月3日起为为全国哀悼日期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。NAZ.CN将整站换成素装。...博文来自:技术博客

我约微博上传文件存放绝对路径设置

阅读 21

后台–系统设置–网站信息–上传文件存放绝对路径 例如: 末尾不带 / 或 \,目前网站根目录绝对路径:D:\phpstudy_pro\WWW\www.woyue.cn/ 我们填写的时候...博文来自:技术博客

源码下载

NAZ.CN官方主题旗舰版V1.0.0,正版完全开源,带整站源码,带数据

阅读 356

NAZ.CN官方主题旗舰版V1.0.0已经上线,现在官网已经升级至旗舰版 购买后我们有专门的售后一对一服务,小白也能轻松驾驭! 为什么要卖这个主题? 疫情期间,待...博文来自:WordPress

微商城包含小程序商城,公众号商城,H5商城,基于Thinkphp开发的商城系统

阅读 318

微信公众号商城和小程序商城数据同步,带积分、优惠券、秒杀、砍价、分销等功能,更是一套方便二次开发的框架 2020.03.03独家更新: 1.接入支付宝支付接口(...博文来自:Thinkphp

NAZ.CN官方主题运营版V1.0.0限量发售-正版完全开源,带整站源码,不带数据,无需授权,支持模板扩展,可二次开发!

阅读 651

NAZ.CN官方主题运营版V1.0.0限量发售啦,一套真正运营起来就能赚钱的系统,不需要授权!完全开源!我们是真正的为站长和用户着想,买回去搭建就能正常使用,也...博文来自:WordPress

我约任务悬赏系统完全开源版不断更新,抖音/快手关注点赞任务平台源码

阅读 298

这款源码会不断更新,适合做抖音/快手关注点赞任务平台,也可以二次开发适合各行各业,具体大家可以看演示站 测试会员账号:test 密码:test 更新记录 2020-...博文来自:Thinkphp

赶快加入我们吧~注册一个账号

NAZ.CN 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录