在WordPress中实现密码访问部分文章内容的功能

一直希望Wordpress能有自带加密文章内容的功能,类似论坛的[hide]一样……我觉得Wordpress开发者肯定欠大家这个功能。

幸而,在学习了网上通用的加密方案后,我自己进行了一些优化,形成新版本,现分享给大家。

以后抽点时间,再把这个功能集成到编辑器中去。

修改主题的functions.php,加入以下代码:

//凭密码阅读隐藏内容
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 '
<form class="e-secret" action="'.get_permalink().'" method="post" name="e-secret"><div class="euc-cont"><input type="password" name="e_secret_key" class="euc-y-i" maxlength="50"><input type="submit" class="euc-y-s" value="凭密码阅读隐藏内容"></div></form>
';
}
}
add_shortcode('secret','e_secret');

修改主题的CSS,加入以下代码:

/*e-secret*/
.e-secret {margin:20px 0; padding:10px 20px; background:#f8f8f8;}
.e-secret .euc-cont {clear:both; height:32px; line-height:30px; width:100%; position:relative;}
.e-secret input.euc-y-i[type="password"] {width:100%; left:0; top:0; border-radius:3px; background:#fff; position:absolute;}
.e-secret input.euc-y-s[type="submit"] {width:40%; top:1px; left:60%; border-radius:0 2px 2px 0; overflow:hidden; position:absolute;}
input.euc-y-i[type="text"], input.euc-y-i[type="password"]{font-size:18px; padding:0 16px; margin:0; border:1px solid #ff5e52; color:#777; display:block; background:#FCFCFC; border-radius:16px; transition:all .5s ease 0; outline:0; box-sizing:border-box; -webkit-border-radius:16px; -moz-border-radius:16px;}
input.euc-y-i[type="text"]:hover,input.euc-y-i[type="password"]:hover{border:1px solid #ff5e52; box-shadow:0 0 4px #ff3333;}
input.euc-y-s[type="submit"]{font-size:14px; padding:0 12px; background-color:#ff5e52; text-align:center;word-break:keep-all;white-space:nowrap;letter-spacing:4px; color:#fff; margin:0; border:0; cursor:pointer; border-radius:16px; box-shadow:none; outline:medium; transition:.4s; -webkit-backface-visibility:hidden; -webkit-transition:.4s; -moz-transition:.4s; -o-transition:.4s; -webkit-box-shadow:none; -moz-box-shadow:none;}
input.euc-y-s[type="submit"]:hover{background-color:#ff3333;}
@media (max-width:640px) {
.e-secret input.euc-y-s[type="submit"] {width:45%; left:55%}
input.euc-y-s[type="submit"] {letter-spacing:4px;}
}
@media (max-width:560px) {
.e-secret input.euc-y-s[type="submit"] {width:50%; left:50%}
input.euc-y-s[type="submit"] {letter-spacing:2px;}
}
@media (max-width:450px) {
.e-secret input.euc-y-s[type="submit"] {width:55%; left:45%}
input.euc-y-s[type="submit"] {letter-spacing:1px;}
}
@media (max-width:320px) {
.e-secret input.euc-y-s[type="submit"] {width:60%; left:40%}
input.euc-y-s[type="submit"] {letter-spacing:0px;}
}

使用方法一

手动输入代码,输入密码“1234”即可查看调用方法:

使用方法二

编辑器快捷按钮,请在主题的functions.php中插入如下代码:

function appthemes_add_quicktags() {
?> 
<script type="text/javascript">
QTags.addButton( '加密', '加密', '['secret key=""']','[/secret]' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

保存后便可在编辑器的“文本”界面看到刚才添加的按钮。

赞 (1) 打赏

评论 0

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

感谢您的支持与帮助

支付宝扫一扫打赏

微信扫一扫打赏