【WordPress】ログインしていることをJavascript側で取得したい

Tweet

Category WordPress 2012/07/13

問題

WordPressに自分がログインしていて、投稿、プレビューなどをしているときは、GoogleAnalyticsに反映したくない。

GoogleAnalyticsのタグを、HTML内に記述しているときは、以下のようにphpで対応できるけど（【GoogleAnalytics】自分をカウントしない（WordPress向け））、

<?php if (!$user_ID) { ?>
<script type="text/javascript">
    //GoogleAnalyticsのタグ
</script>
<?php } ?>

外部jsに書いているときは、どうするとログインしていることを取得できる？

答え

外部jsだとphpが使えない。

ログインのセッションのCookieもHTTPOnlyなのでJavascriptで取得できない。

さて、ログインしていることを、何らかの手段で取得したい。

functions.php でCookieを送出したり、footer.php でログインしているときだけ type=hiddenなinput要素を仕込むといったアイデアもよいけど、よく見るとログインしているとき、管理者用のツールバーが表示されているではないですか。

ログインしていると、以下のような要素がHTML中にある（あえて非表示にしていなければ）。

<link rel='stylesheet' id='admin-bar-css'  href='https://www.softel.co.jp/blogs/tech/wordpress/wp-includes/css/admin-bar.css?ver=3.4.1' type='text/css' media='all' />

<script type='text/javascript' src='https://www.softel.co.jp/blogs/tech/wordpress/wp-includes/js/admin-bar.js?ver=3.4.1'></script>

<div id="wpadminbar" class="nojq nojs" role="navigation">
			<div class="quicklinks">
				<ul id="wp-admin-bar-root-default" class="ab-top-menu">
		<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="https://www.softel.co.jp/blogs/tech/wordpress/wp-admin/about.php" title="WordPress について"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
		...（中略）...

		<li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="https://www.softel.co.jp/blogs/tech/wordpress/wp-admin/edit-comments.php" title="0件のコメントが承認待ちです。"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>		</li>

		...（中略）...


		<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" tabindex="10" aria-haspopup="true" href="https://www.softel.co.jp/blogs/tech/wordpress/wp-admin/profile.php" title="アカウント">こんにちは、yoshimura さん !<img alt='' src='http://1.gravatar.com/avatar/17b066458b3cd9750e86c5dd6321a52f?s=16&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class=" ab-submenu">
		
		...（中略）...

		<li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="https://www.softel.co.jp/blogs/tech/wordpress/wp-login.php?action=logout&#038;_wpnonce=2d36809d31">ログアウト</a>		</li></ul></div>		</li></ul>			</div>
		</div>

このあたりを利用すると、Javascript側で以下のようなことができる。

WordPressにログインしていたら、GoogleAnalyticsのアクセス解析の対象外にする

if (document.getElementById('admin-bar-css')) {
    //ログインしているとみなしてアクセス解析しない
} else {
    //ログインしていない人とみなしてアクセス解析する
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-99999999-1']);
    //...（以下略）
}

WordPressにログインしていたら、ソーシャル系ボタンを表示しない

/* 表示が遅いからとか、まだ下書き中なのでクロールされたくないなどの事情でtwitterのボタンを非表示にします */
if ($('script[src*="admin-bar.js"]').length == 0) {
    /* twitter button */
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
}

yoshimuraさんでログインしていたら、「こんにちは」する

//管理用ツールバーがあったら
if ($('#adminbar')) {
    //「こんにちは、xxxx さん !」付近に .display-name というspan要素があるのでそこで判断してみる
    if ($('#wp-admin-bar-user-info .display-name').text() == 'yoshimura') {
        alert('こんにちは！');
    }
}