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="post_hide_box"> <div class="post-img1"><img class="erweima" align="right" src="图片地址" alt="Wordpress纯代码实现关注公众号获取隐藏内容查看密码" alt="公众号"></div> <div class="post-secret"><i class="fa fa-exclamation-circle"></i> 此处内容已经隐藏,请输入验证码查看内容!</div> <form action="'.get_permalink().'" method="post"> <span>验证码:</span><input id="pwbox" type="input" size="20" name="secret_key"> <a class="a2" href="javascript:;"><input type="submit" value="提交" name="Submit"></a> </form> <div class="details">请关注newwordpress官方微信 公众号,回复“<span>'.$keyword.'</span>”,获取验证码。</div> <div class="post-img2"><img class="erweima" src="图片地址" alt="Wordpress纯代码实现关注公众号获取隐藏内容查看密码" alt="公众号"></div> <div class="tips">微信搜索“###”或扫描右侧二维码都可以关注官方微信 公众号。</div> </div>'; } } add_shortcode('gzh2v', 'lxtx_secret_content');// 为了方便使用,在后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可: function lxtx_wpsites_add_gzh_quicktags() { if (wp_script_is('quicktags')){ ?> <script type="text/javascript"> QTags.addButton( 'gzh2v', ' 公众号隐藏', '\n[gzh2v keyword="关键字" key="验证码"]隐藏内容[/gzh2v]', "" ); // 实际使用请把 上一行的【】改为[] </script> <?php } } add_action( 'admin_print_footer_scripts', 'lxtx_wpsites_add_gzh_quicktags' );
CSS样式文件修改
将下面的代码添加到主题的 style.css 文件中去即可,如果放进 style.css 里边无效的话,可以放进“外观——自定义——额外css”里边。
代码如下:
/* 网站添加公众号涨粉功能样式代码 */ .post_hide_box, .secret-password{ background: none repeat scroll 0 0 #efe; border:1px solid #e74c3c; border-left: 5px solid #e74c3c; color: #555; padding: 10px; border-radius: 5px; margin: 15px 2px 15px 30px; overflow: hidden; clear: both; } .post_hide_box .post-secret { font-size: 16px; line-height: 20px; color: #e74c3c; margin: 5px; } .post_hide_box .post-secret i{margin:0px;} .post_hide_box form { margin: 12px 5px; line-height:36px; } .post_hide_box form span { font-size: 18px; font-weight: 700; } .post_hide_box .erweima { margin: 10px; } .post_hide_box input[type=input] { color: #9ba1a8; padding: 6px; background-color: #f6f6f6; border: 1px solid #AAA; font-size: 12px; border-radius: 5px; width:100px; height:36px; -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: #F88C00; border: none; border: 1px solid; border-color: #F88C00; border-left: none; border-top: none; padding: 0px; width: 80px; height: 36px; color: #fff; outline: 0; border-radius: 5px; font-size: 16px; } .post_hide_box .details {padding-left:5px;} .post_hide_box .details span {color: #e74c3c;font-weight:bold;} .post_hide_box .tips {font-size:14px;padding-left:5px;} .post_hide_box .post-img2 { display:none;} @media screen and (max-width:479px) { .post_hide_box .post-img1 { display:none;width:100%;} .post_hide_box .post-img2 { display:block;width:100%;} .post_hide_box .post-img2 img{ margin:0 auto;} .post_hide_box .post-secret { display:block; width:100%;} .post_hide_box input[type=submit] {width:50px;} }
常见问题FAQ
- 美化包支持最新版本吗?
- 最新美化支持永久更新!