javascriptだけでWordPressのログイン状態を判別する方法

WordPressをやっていると「今ログインしてるかどうか判別したい」ケースが結構あります。

ログインしてる時だけ吐き出したいjs・cssがある。
ログインしてない時だけアクセス解析タグを入れたい。
ログインしてる時は広告をクリック不可にして事故を防ぎたい。
など、など、など。

phpを使って制御するなら、is_user_logged_in()という便利な関数が用意されています。

if (  is_user_logged_in() ) {
 // ログインしている時だけの処理
}

if ( ! is_user_logged_in() ) {
 // ログインしていない時だけの処理
}

ただ、普段フロントエンドまでしか担当しない私のようなクリエイターの場合、phpに触る回数は極力減らしたいのが人情。
というわけで、javascript(jQuery)だけで望む処理ができないか試してみました。

admin-barの有無で判断する

結論から言うと、ちょっと邪道なやり方かもしれませんが、jsだけでの判定は成功しました。
見出しにもある通り、Wordpressデフォルトの挙動で、ログインしている時だけ画面上部に吐き出される「admin-bar」をヒントにします。

chromeのデベロッパーツールなどで見てみると、この要素は「wpadminbar」というidがついたdiv要素ということがわかります。
それさえわかってしまえばもう解決したも同然。この要素がDOM上に見つかるか見つからないかで処理を分ければいいだけです。

jQueryなら以下のような感じ。Wordpressデフォルトのjqueryファイルを使っている場合を鑑みて「$」を使わない書き方にしています。

	jQuery(function(){
		var admin = jQuery('div#wpadminbar').length;
		if( admin == 1) {
			//ログイン中だった場合の処理
		} else {
			//ログインしていない場合の処理
		}
	});

この方法の弱点

私は出会った事がありませんが、この「admin-bar」が表示されないテーマというのも中にはあるかもしれません。
そういったテーマの場合こちらの方法は使えませんのでご注意ください。

そういう意味で「ちょっと邪道かも」と言った次第

それでも、jsだけで解決できる方法として、選択肢のひとつに数えていただければ光栄です。