在《25+自定义WordPress顶部管理工具条的技巧》已经介绍了定制 WordPress 顶部管理工具条的诸多方法,今天介绍一下在 WordPress 顶部管理工具条显示登录表单的方法。
在当前主题的 functions.php 加入下面的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/** * 在 WordPress 顶部管理工具条显示登录表单 * https://www.wpdaxue.com/admin-bar-login.html */ add_action( 'show_admin_bar', '__return_true', 999 ); //对未登录用户显示工具条 add_action( 'template_redirect', 'admin_bar_login' ); function admin_bar_login() { if ( is_user_logged_in() ) return; add_action( 'admin_bar_menu', 'admin_bar_login_menu' ); } function admin_bar_login_menu( $wp_admin_bar ) { $form = wp_login_form( array( 'form_id' => 'adminloginform', 'echo' => false, 'value_remember' => true ) ); $wp_admin_bar->add_menu( array( 'id' => 'login', 'title' => $form, ) ); $wp_admin_bar->add_menu( array( 'id' => 'lostpassword', 'title' => __( 'Lost your password?' ), 'href' => wp_lostpassword_url() ) ); if ( get_option( 'users_can_register' ) ) { //如果网站允许注册,显示注册链接 $wp_admin_bar->add_menu( array( 'id' => 'register', 'title' => __( 'Register' ), 'href' => site_url( 'wp-login.php?action=register', 'login' ) ) ); } } |
如果你希望用户登录后返回之前访问的页面,可以将 16-20 行的代码修改为:
1 2 3 4 5 6 7 |
$url_this = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];$form = wp_login_form( array( 'redirect' => $url_this, 'form_id' => 'adminloginform', 'echo' => false, 'value_remember' => true ) ); |
然后在主题的CSS文件中添加下面的样式代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#wpadminbar{ height: 30px!important; } #adminloginform p { display: inline; } #adminloginform .login-username input, #adminloginform .login-password input { font: 13px/24px sans-serif; height: 24px; border: none; color: #555; text-shadow: 0 1px 0 #fff; background-color: rgba( 255, 255, 255, 0.9 ); -webkit-border-radius: 3px; border-radius: 3px; } #adminloginform #wp-submit { position: relative; cursor: pointer; overflow: visible; text-align: center; white-space: nowrap; background: #ccc; background: -moz-linear-gradient(bottom, #aaa, #ccc); background: -webkit-gradient(linear, left bottom, left top, from(#aaa), to(#ccc)); padding: 2px 10px; height: 22px; font: bold 12px sans-serif !important; color: #444 !important; text-shadow: 0px 1px 0px #ddd !important; border: 1px solid #626262; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 0.5em; } #adminloginform #wp-submit:active { background: #aaa; background: -moz-linear-gradient(bottom, #bbb, #ddd); background: -webkit-gradient(linear, left bottom, left top, from(#999), to(#bbb)); -moz-box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2); -webkit-box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2); box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2); } #adminloginform #wp-submit:hover { color: #000 !important; } #wp-admin-bar-register a { font-weight: bold; } |
这样,你就可以看到和本文配图一样的登录表单啦!