wordpress文章部分内容输入密码查看

174次阅读
没有评论

在一些博客系统下载软件,经常看到关注公众号,回复信息获取密码,下面提供一种方法:

使用方法:

此方法适用任何主题,根据到自己的主题文件夹添加 class 类和增加 CSS 代码样式修改。

第一步:

添加核心 PHP 代码将代码复制到目录下 themes/ 插件目录 /functions.php 文件尾部,添加下面的 PHP 代码,怎么获取密码按钮。二维码图片请自行更换。

/* Name: 部分内容输入密码可见(短代码)*/
function e_secret($atts, $content=null){extract(shortcode_atts(array('key'=>null), $atts));
if(isset($_POST['e_secret_key']) && $_POST['e_secret_key']==$key){return '<div class="e-secret">'.$content.'</div>';}
else{
return '<div class="gh-wxshow">
<div class="gh-wxshow-main">
<div class="gh-wxshow-content">
<h4> 本内容需要密码可见 </h4>
<div class="gh-wxshow-form">
<form class="post-password-form" action="'.get_permalink().'" method="post" name="e-secret">
<input type="text" class="keyword" name="e_secret_key" placeholder="密码" id="wxpass" value="" >
<button type="submit" class="gh-wxshow-btn"> 查看内容 </button>
</form>
<div class="gh-wxshow-sm">
<p> 关注微信:<span style="color: red"> 绿色软件吧 </span> 微信回复:密码 </p>
</div>
</div>
</div>
<img src="https://www.softzhan.com/wp-content/uploads/2023/01/qrcode_for_gh_621b7409e9ba_258.jpg"> </div>
</div>
';
}
}
add_shortcode('secret','e_secret');

第二步:

添加 CSS 样式代码。将下面的 css 样式代码添加至:wp 后台 - 外观 - 自定义 - 额外 CSS  如果需要修改背景图片在 css 样式里面搜索更换即可。二维码图片自己上传到媒体内。

.gh-postnl {
padding: 0 50px;
margin-bottom: 10px
}
.gh-postnl-main {
width: 100%;
border: 1px solid rgba(0,0,0,.05);
transition: all .3s ease 0s;
border-radius: 3px;
min-width: 290px
}
.gh-postnl-main:hover {box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
border-color: rgba(0,0,0,.1);
transform: translateY(-3px)
}
.gh-postnl-thumbnail {float: left}
.gh-postnl-content {
position: relative;
margin-left: 230px;
min-height: 152px;
overflow: hidden
}
.gh-postnl-readbtn {
text-align: right;
position: absolute;
right: 10px;
bottom: 10px
}
.gh-postnl-img {
position: relative;
float: left;
width: 245px;
overflow: hidden
}
.gh-postnl-img img {
width: 90%;
height: 150px;
vertical-align: top;
border: none!important
}
.gh-postnl-category {
position: absolute;
left: 10px;
top: 10px;
padding: 5px 6px;
font-size:.12rem;
line-height: 1;
color: #fff;
background-color: #000;
background: rgba(0,0,0,.6);
border-radius: 2px;
text-decoration: none
}
.gh-postnl-excerpt {
line-height:.22rem;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
font-size:.15rem
}
.gh-postnl-meta {
position: absolute;
bottom: 0;
color: #999;
font-size:.13rem
}
.gh-postnl-content h4>a {
color: #333;
font-weight: 500;
line-height: 1.4;
overflow: hidden
}
.gh-postnl-excerpt {margin-right: 10px}
@media(max-width:767px) {
.gh-postnl-img {
width: 120px;
height: 75px
}
.gh-postnl-content {
margin-left: 130px;
min-height: 75px
}
.gh-postnl-category {display: none}
.gh-postnl-excerpt {display: none}
.gh-postnl-readbtn {display: none!important}
.gh-postnl {
padding: 0 10px;
margin-bottom: 10px
}
}
.gh-wxshow {
min-width: 200px;
min-height: 150px;
max-width: 500px;
margin: 0 auto;
border: 1px solid rgba(0,0,0,.05);
transition: all .3s ease 0s;
border-radius: 3px;
padding: 10px
}
.gh-wxshow p {margin: 0!important}
.gh-wxshow:hover {box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
border-color: rgba(0,0,0,.1);
transform: translateY(-3px)
}
.gh-wxshow img {
float: right;
width: 100px;
height: auto;
}
.gh-wxshow-content {float: left;}
.gh-wxshow-btn {
color: #fff;
border: 1px solid #64c183;
background-color: #64c183;
height: 46px;
font-size: 14px;
}
.gh-wxshow-form {
float: left;
overflow: hidden;
}
.gh-wxshow-form input {
height: 34px;
padding: 5px 52px 5px 10px;
font-size: 14px;
color: #333;
border: 1px solid #efefef;
outline: 0;
}
.gh-wxshow-form input:focus {border: 1px solid #64c183}
@media(max-width:767px) {
.gh-wxshow {height: 200px}
.gh-wxshow img {
position: relative;
top: -50px
}
}
.gh-wxshow-showcontent {border: 1px solid rgba(0,0,0,.05)
}
.gh-postnl-content .btn:focus {position: absolute!important;}

第三步:

文章内添加代码,文章内将需要加密的内容添加到【secret】块内,将下面代码添加进去,key 后面的 参数 是访问密码。

[secret key="设置的访问密码"]
加密的内容
[/secret]

正文完
 0
绿色软件吧
版权声明:本站原创文章,由 绿色软件吧 于2023-10-29发表,共计3544字。
转载说明:除特殊说明外本站文章皆由绿色软件吧(www.lsrjba.com)发布,转载请注明出处。
评论(没有评论)
验证码