性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

在 WordPress 顶部管理工具条显示登录表单

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

在《25+自定义WordPress顶部管理工具条的技巧》已经介绍了定制 WordPress 顶部管理工具条的诸多方法,今天介绍一下在 WordPress 顶部管理工具条显示登录表单的方法。

admin-bar-login-wpdaxue_com

在当前主题的 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;
}

这样,你就可以看到和本文配图一样的登录表单啦!

以上代码来自 Admin Bar Login 插件,如果你不想折腾代码,直接在后台插件安装界面搜索 Admin Bar Login 即可在线安装,或者下载 Admin Bar Login

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

WordPress函数:add_action(添加动作)

WordPress主题测试插件:Theme Test Drive

WordPress主题测试插件:Theme Test Drive

2 条评论

  1. :arrow: 为什么添加之后这个代码之后 就变成乱码了?直接就添加的代码现在在首页了

  2. 我想问下这个插件退出后如何返回当前页 还有怎么能让他不显示仪表盘

发表评论