21
JUNE
ウェブWEDNESDAY 2023 / 6 / 21
baseタグを使ったWordPressサイトで、WordPressログイン中のみURLがbaseタグのURLに書き換えられる不具合【All in One SEO】
Text by Hiroyuki Matsumoto
弊社で制作したWordPressテーマですが、baseタグをよく使用しています。
あまり有名ではないタグですが、baseタグを用いるとテーマフォルダを基点としたファイル参照が可能となるため、画像, CSS, JavaScript 等のアセットを簡単に参照できるようになりとても便利です。(ページ内スクロールができなくなったり、相対パスによる参照ができなくなる場合がある等の副作用もあります)
いつ頃からか、このbaseタグを使ったサイトで不具合が発生するようになりました。
症状:URLがテーマフォルダのあるURLに書き換わってしまう。
例:トップページにアクセスし数秒経過すると下記のようにURLが書き換えられる。
なお不幸中の幸いでWordPressにログインしていないユーザーにはこの症状は発生しませんので、一般の訪問者には影響ありません。
ということで原因を調べていたところ、All in One SEOプラグインを使っている場合のみ発生する問題だと判明しました。さらにコードを追っていくと、vue-routerを読み込んでいることが原因のようです。
VueとはReactとで同様にシングルページアプリケーション向けのJavaScriptライブラリですが、vue-routerとはその中でもルーティング、つまりURLの管理に使われます。この vue-routerを読み込むと、baseタグに記載されたURLに現在のURLを書き換えてしまうようです。
(ちなみに症状が確認された vue-router.js のバージョンは4.2.1)
vue-router を導入したことに依る不具合ですが、プラグイン側に「だからこいつは無くして!」と報告しても対応されなさそうです。僕が開発者だったら「baseタグを使ったサイトは対象外」と宣言すると思います。
ということで自前でどうにかします💪
vue-router.js は /wp-content/plugins/all-in-one-seo-pack/dist/Lite/assets/seo-preview-8396a305.js のようなスクリプトからmoduleとして呼び出されています。(下線部はAll in One SEOのバージョンにより異なるはず)
そのため該当のスクリプトだけ防ぐことができませんので、この seo-preview-xxxxxxxx.js ごと読み込めないようにする必要があります。
…ということで、下記を functions.php に記載します。
if(is_user_logged_in() && !is_admin()){ add_filter('script_loader_tag', function($tag){ if(strpos($tag, 'aioseo/js/src/vue/standalone/seo-preview/main.js-js')!==false){ $tag = ''; } return $tag; }, 30, 1); }
wp_dequeue_scriptで除去できなかったので、script_loader_tagフックを用いて無理矢理除去しています。
それと追加検証で判明しましたが、管理バー(admin_bar)を無効にしている場合も症状が発生しませんでしたので、functions.php に
add_filter( 'show_admin_bar', function(){return false;});
と書き加えて無効化するのも対処法のひとつとなります。
TEXT by
松本 博之(まつもとひろゆき)
1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。
WordPressの実績多数。表面的な使用方法を把握するだけでなく、WordPressのソースコードを読み解いて対応できます。
国家資格の応用情報処理技術者をなんとなくとりました。