レンタルサーバでの負荷対策、セキュリティ対策でCloudflareを導入するケースが増えていると思います。
良く出る話題が一般ユーザがアクセスした際にも管理者のツールバーが表示されてしまうという障害です。
これの回避方法についてはいくつも記事を見かけるので割愛しますが、その先にある課題まで解説してる記事は見当たりませんでした。
更新したページにしか管理者ツールバーが表示されないという問題です。
※下書きやプレビューでも基本的に表示されます
一般ユーザがアクセスした際にページ全体をキャッシュするようにしていると、次回ログイン状態の管理者が同じページにアクセスした際にはCloudflareがページのコンテンツデータを返すからですね。
ここには管理者ツールバーは含まれていません。
どうすればよいのか
常にCloudflareのキャッシュをクリアすればまあ良いのですが、せっかくキャッシュしたページ全部がクリアされてしまうのも残念ですね。
Ajaxの使用
キャッシュされた状態でもAjaxでオリジンサーバへの問い合わせはできるので、それを利用します。
※以下サンプルソースなので、「AdminBar」という文字列の<div>ブロックを返してるだけですが、管理者ツールバーのコンテンツを動的に返せば目的は果たせると思います。
functions.php
function check_user_logged_in() {
if (is_user_logged_in()) {
wp_send_json_success(['logged_in' => true]);
} else {
wp_send_json_success(['logged_in' => false]);
}
}
add_action('wp_ajax_check_user_logged_in', 'check_user_logged_in');
add_action('wp_ajax_nopriv_check_user_logged_in', 'check_user_logged_in'); // 未ログインユーザーにも実行
javascript
document.addEventListener("DOMContentLoaded", function() {
fetch('/wp-admin/admin-ajax.php?action=check_user_logged_in')
.then(response => response.json())
.then(data => {
if (data.logged_in) {
let adminBar = document.createElement("div");
adminBar.id = "wp-admin-bar";
adminBar.innerHTML = "<p>Adminバー</p>";
document.body.prepend(adminBar);
}
})
.catch(error => console.error("ログイン状態の確認エラー:", error));
});
説明
こんな感じで、フロントエンドのJavascriptからfetchでログイン状態を確認しに行き、ログイン状態であれば管理者ツールバーのコンテンツを返せば良いと思います。
補足
・予めページ内にツールバーのコンテンツは用意してdisplay:none;にしておき、ログイン状態であればdisplay:block;にするといったアイデアはセキュアでないので非推奨です。
有償プランだと、特定Cookieの有無によってキャッシュする／しないの制御ができるようです。
「ルール」ー「変換ルール」で「リクエストヘッダーを修正する」を選び、WordPressログイン中の"wordpress_logged_in"Cookieが存在する場合にcache-control=no chacheとする方法もあるかもしれません。
万が一このCookieを捏造したブラウザがアクセスしたとしても、セッションCookieが無いので管理者ツールバーが表示されることは無いと思います。
