ワードプレスの管理バーに「ログアウト」ボタンを追加するカスタマイズ

こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。

本日はワードプレスで管理画面に入ると表示される管理バーに「ログアウト」ボタンを追加する方法です。以前に別記事で「ワードプレスの管理バーを非表示カスタマイズする手順」についてご紹介させていただきました。本記事はその延長のカスタマイズとして管理バーに独自メニューを足すためのカスタムとなります。

ワードプレスの管理バーに「ログアウト」ボタンを追加するカスタマイズ

ワードプレスでは管理画面にログインすると管理バーが表示されます。管理バーの左側にはウェブサイトの操作メニューが並んで、右側にはログインしているユーザー情報が表示されています。

▼管理バーの左側

▼管理バーの右側

ちなみに管理バーには標準で「ログアウト」する機能もついていますが、右側に表示されるユーザー情報のメニューのにマウスでカーソルを合わせなければ表示されません。カーソルを合わせた画面が以下です。

この「マウスカーソルを合わせる手間をなくす」のが今回のカスタム内容です。作業効率を上げられます。カスタムする方法はfunctions.phpに以下の記述を追記すればOK。ログアウトボタンの追加となります。

function add_new_item_in_admin_bar() {
	global $wp_admin_bar;
		$wp_admin_bar->add_menu(array(
		'id' => 'new-item-in-admin-bar',
		'title' => __('ログアウトする'),
		'href' => wp_logout_url()
	));
}
add_action('wp_before_admin_bar_render', 'add_new_item_in_admin_bar');

追加後にfunctions.phpを上書きすると管理バーの左側に「ログアウトする」というボタンが追加されます。

ちなみに管理バーの右側へ「ログアウトする」を追加したい場合は以下で行えます。

function add_new_item_in_admin_bar() {
	global $wp_admin_bar;
		$wp_admin_bar->add_menu(array(
		'id' => 'new-item-in-admin-bar',
		'title' => __('ログアウトする'),
		'href' => wp_logout_url(),
		'meta'   => array(
			'class' => 'ab-top-secondary',
		)
	));
}

そして実際に「ログアウトする」をクリックすると以下の通りログアウトが実行されます。