技术学堂
一直希望Wordpress能有自带加密文章内容的功能，类似论坛的[hide]一样……我觉得Wordpress开发者肯定欠大家这个功能，如今看来，这个功能得自己实现了。
修改主题的functions.php，加入以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//凭密码阅读隐藏内容 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，加入以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*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;} } |
方法一
手动输入代码，输入密码“1234”即可查看调用方法：
方法二
在文本编辑器的按钮添加编辑器快捷方式，请在主题的functions.php中插入如下代码：
|
1 2 3 4 5 6 7 8 |
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实现密码访问特定内容
