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;}
.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; right:1px; 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 #AAAAAA; 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;}
input.euc-y-s[type="submit"] {font-size:14px; padding:0 12px; background-color:#AAAAAA; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:8px; 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:#FF5E52;}
@media (max-width:640px) {
.e-secret input.euc-y-s[type="submit"] {width:45%;}
input.euc-y-s[type="submit"] {letter-spacing:4px;}
}
@media (max-width:560px) {
.e-secret input.euc-y-s[type="submit"] {width:50%;}
input.euc-y-s[type="submit"] {letter-spacing:2px;}
}
@media (max-width:450px) {
.e-secret input.euc-y-s[type="submit"] {width:55%;}
input.euc-y-s[type="submit"] {letter-spacing:1px;}
}
@media (max-width:320px) {
.e-secret input.euc-y-s[type="submit"] {width:60%;}
input.euc-y-s[type="submit"] {letter-spacing:0px;}
}

方法一

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

方法二

在文本编辑器的按钮添加编辑器快捷方式，请在主题的functions.php中插入如下代码：

function appthemes_add_quicktags() {
?> 
<script type="text/javascript">
Tags.addButton( '加密', '加密', '[_secret key="','"][/secret_]' );  //须去掉secret前后的下划线“_”
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

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

原创文章禁止转载：技术学堂 » WordPress实现密码访问特定内容