WordPressの管理バーを小型化

主張が強すぎるログイン時のadmin bar。
CSSで完全非表示、プラグインでマウスオーバー表示などに出来るが、利便性を求めて「小型化して必要なボタンのみ常時表示」にする。

上
右

何故右なのかというと、検索フォームが左に伸びる為。

CSS追加

#wpadminbar {
	top: 50%;
	left: auto;
	right: 0;
	transform: translateY(-50%);
	width: 40px;
	min-width: 40px;
	height: auto;
	padding: 6px 0;
}

@media screen and (max-width: 782px) {
	html #wpadminbar {
		display: none;
	}
}

#wp-admin-bar-site-name,
#wp-admin-bar-customize,
#wp-admin-bar-new-content,
#wp-admin-bar-edit {
	width: 30px;
	overflow: hidden;
}

#wpadminbar .quicklinks > ul > li > a {
	padding: 0 10px;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
	background: transparent;
}

#wp-admin-bar-wp-logo,
#wp-admin-bar-updates,
#wp-admin-bar-comments,
#wp-admin-bar-my-account {
	display: none;
}

#wpadminbar .quicklinks .ab-top-secondary > li {
	padding: 0 3px;
}

画面幅782px以下は非表示。

function.php編集

function.phpに以下を追加。
上部に32px確保されるのを阻止する。

function remove_adminbarsp()
{
	remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_adminbarsp');
Web制作WordPress

関連