无插件给WordPress添加密码保护文章的功能

麦子
定制开发20字数 2156阅读7分11秒阅读模式

由于有些内容我们需要隐藏WordPress的部分内容，这里我们可以用一些会员类的主题和插件实现。但是，大部分主题都没有这些功能，而且很多的插件都是付费的。这里，我们可以用WordPress代码实现密码保护。

1、功能模块

  1. // 输入密码查看文章内容
  2. function password_protected_post($atts, $content=null){
  3. extract(shortcode_atts(array('key'=>null), $atts));
  4. if(isset($_POST['password_key']) && $_POST['password_key']==$key){
  5. return '
  6. <div class="password_protected_post_content">'.$content.'</div>
  7. ';
  8. }elseif(isset($_POST['password_key']) && $_POST['password_key']!=$key){
  9. return '
  10. <script>
  11. alert("密码错误，请仔细核对密码后重试！！！");
  12. window.location.href="'.get_permalink().'";
  13. </script>
  14. ';
  15.  
  16. }else{
  17. return '
  18. <form class="password_protected_post_form" action="'.get_permalink().'" method="post">
  19. <input type="password" id="password_key" name="password_key" size="20" placeholder="请输入密码查看隐藏内容"/>
  20. <input type="submit" value="确 定" />
  21. </form>
  22. ';
  23. }
  24. }
  25. add_shortcode('pwd_protected_post','password_protected_post');
  26. // 输入密码查看文章内容快捷按钮
  27. function appthemes_add_pwd_protected_post() {
  28. if (wp_script_is('quicktags')){
  29. ?>
  30. <script type="text/javascript">
  31. QTags.addButton( 'pwd_protected_post', '文章密码保护', '【pwd_protected_post key="保护密码"]','[/pwd_protected_post】' );
  32. </script>
  33. <?php
  34. }
  35. }
  36. add_action('admin_print_footer_scripts', 'appthemes_add_pwd_protected_post' );

2、添加内容

  1. [pwd_protected_post key="保护密码"][/pwd_protected_post]

需要的内容可以在短代码中。

3、CSS样式控制

  1. .password_protected_post_content{
  2. margin: 20px 0;
  3. padding: 20px;
  4. background: #f8f8f8;
  5. }
  6.  
  7. .password_protected_post_form{
  8. margin: 20px 0;
  9. height:52px;
  10. font-size:24px;
  11. text-align: center;
  12. }
  13.  
  14. .password_protected_post_form [type="password"]{
  15. float: left;
  16. width: 70%;
  17. height: 100%;
  18. display: block;
  19. padding: 5px 16px;
  20. line-height: 36px;
  21. color: #777;
  22. background: #FCFCFC;
  23. border: 3px solid #f3f3f3;
  24. border-right: 0px;
  25. border-radius: 3px 0 0 3px;
  26. box-sizing: border-box;
  27. }
  28.  
  29. .password_protected_post_form [type="submit"]{
  30. float: right;
  31. width: 30%;
  32. height: 100%;
  33. display: block;
  34. padding: 5px 16px;
  35. line-height: 36px;
  36. color: #fff;
  37. background: #3498db;
  38. border: 3px solid #3498db;
  39. border-left: 0px;
  40. border-radius: 0 3px 3px 0;
  41. box-sizing: border-box;
  42. cursor: pointer;
  43. }
  44.  
  45. @media (max-width:560px){
  46. .password_protected_post_form{
  47. height:36px;
  48. font-size:14px;
  49. text-align: center;
  50. }
  51. .password_protected_post_form [type="password"]{
  52. padding: 3px 9px;
  53. line-height: 24px;
  54. }
  55. .password_protected_post_form [type="submit"]{
  56. padding: 3px 9px;
  57. line-height: 24px;
  58. }
  59. }

我们也可以用CSS样式控制样式。

投上你的一票
 
  • 本文由 麦子 发表于 2024年12月18日 16:29:21
  • 转载请务必保留本文链接：https://www.zhujipingjia.com/wpprotectedpost.html
  • WordPress设置密码

加载中...