WordPress文章设置隐藏内容关注公众号可见

前言

最近有小伙伴找文章设置隐藏内容关注公众号才可见，今天满心博客就把代码发出来了，代码是在原代码改进而来，不会影响图片灯箱。

自定义CSS

/**  关注公众号可见 开始*/ 
.post_hide_box, .secret-password{padding: 10px;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{background:#fff;border-radius:10px;padding:20px;margin:15px 10px;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:140px;height:140px;right:20px;top:50%;margin-top:-50px}
#vivideo{height:200px}
.gzhhide .gzhtitle i {font-style:normal;}
.hidden-box.show {padding-top: 35px;}
.hidden-box {padding: 10px;margin: 20px 0;border: 1px dashed var(--focus-color);border-radius: var(--main-radius);position: relative;}
.hidden-box.show .hidden-text {padding: 3px 10px;font-size: 13px;top: 0;border-radius: 0 0 8px 0;line-height: 1.4;z-index: 1;left: 0;position: absolute;border-bottom: 1px dashed var(--focus-color);border-right: 1px dashed var(--focus-color);}
.hidden-text {color: var(--focus-color);padding: 10px;text-align: center;display: block;}
/*手机适配*/
@media (max-width: 520px){
.gzhhide .gzhtitle{padding:9px 0 0 30px;overflow:hidden;font-size:14px;}
.gzh-content{padding:0;font-size:12px;}
.gzhhide .gzhcode{width: 70px;height: 70px;top: 80%;}
.gzhbox{padding: 12px 90px 0 0;}
.gzhbox button{width: 40%;padding: 2px;}
.gzhbox input{height: 32px;}};
/**  关注公众号可见 结束*/ 

CSS我做了一些微调，可以根据自己实际情况调整

使用

我们可以直接在文章中使用，如下

• keyword：关键词，比如，用户在公众号填写的内容
• key：文章的密码，用户在公众号回复keyword内容后，公众号将key回复给用户，用户输入key，显示隐藏内容

keyword和key你自己设置好，然后在后台>>用户&互动>>第三方登录>>微信登录(公众号模式)中，填写公众号自动回复配置

例如设置的参数为：keyword：id12345，key：666666

那么用户关注公众号后，发送id12345，那么公众号回复给用户：666666，用户将666666输入到输入框就可以显示内容了

感谢您的来访，获取更多精彩文章请收藏本站。