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

本文教程要实现的在文章内隐藏某些指定内容,让访客必须关注微信公众号后,回复指定获得密码才可以查看隐藏的内容,有开通微信公众号的可以体验一下,对公众号涨粉有一定的好处!

看到展示的效果有没有心动,下面就开始折腾!

第一步把下方的代码添加到functions.php中:

/*** WordPress文章部分内容关注微信公众号后可见* 钻芒博客移植美化www.zmki.cn 项目基于https://www.ilxtx.com/view-contents-by-following-wechat-official-accounts.html*/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'<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"  ><div class="gzhhide"><div ><img class="gzhcode" align="right" src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" width="130" height="130" alt="科技小新"></div><div class="gzhtitle">抱歉!隐藏内容,请输入密码后可见!<i class="fa fa-lock"></i><span></span></div><div class="gzh-content">请打开微信扫描右边的二维码回复关键字“<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('gzh2v', 'lxtx_secret_content');

把下方代码添加到style.css里面

/**  纯代码实现WordPress文章设置隐藏内容公众号可见*/ /**  by:zmik.cn  不会吃你家一碗大米饭。请保留版权。*/.post_hide_box, .secret-password{background: none repeat scroll 0 0 #efe;border-left: 5px solid #e74c3c;color: #555;padding: 10px 0 10px 10px;border-radius: 5px;margin-bottom: 15px;overflow:hidden; clear:both;}.post_hide_box .post-secret{font-size: 18px; line-height:20px; color:#e74c3c; margin: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;}.post_hide_box input[type=submit] { background: #F88C00; border: none; border: 2px solid;border-color: #F88C00; border-left: none; border-top: none; padding: 0px;width: 100px; height: 38px; color: #fff; outline: 0;border-radius: 0 0 2px 0; font-size: 16px;}.post_hide_box .details span{color:#e74c3c;}.post_hide_box .details span{color:#e74c3c;}.gzhhide .gzhcode{position:absolute;width:100px;height:100px;right:20px;top:50%;margin-top:-50px}.gzhhide{background:#fff;border-radius:10px;padding:20px;margin:15px 0;position:relative;box-shadow:0 0 20px #d0d0d0}.gzhhide .gzhtitle{position:relative;font-size:17px;font-weight:700;color:#6c80a7;padding:6px 140px 0 40px;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:#f2f2f2;border-radius:4px;outline:none;float:left;padding:0 10px}.gzhbox button{width:20%;margin-left:15%;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 90px 15px 0}.gzhhide .gzhcode{width:80px;height:80px}#vivideo{height:200px}.gzhhide .gzhtitle i {font-style:normal;}

为了方便使用,在后台文本编辑器中集成该短代码。将以下代码放入 functions.php 中即可: 由于wordpress会自动转义文章里的代码造成冲突,请复制后删除下面代码中第6行的两个“把我删掉”

// 后台文本编辑框中添加公众号隐藏简码按钮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' );

在文章中使用短代码

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

原文链接:https://www.hwfans.cn/738.html,转载请注明出处。 本站解压密码默认为:www.hwfans.cn

0
封面图
没有账号? 注册  忘记密码?

社交账号快速登录