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

WP教程 绿色软件吧 8个月前 (10-29) 158次浏览 0个评论

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

使用方法:

此方法适用任何主题,根据到自己的主题文件夹添加 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 后面的 参数 是访问密码。

本内容需要密码可见

关注微信:绿色软件吧 微信回复:密码

喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址