TCD027テーマ「CORE」は2015年の10年前のThemaで、最新アプデも2023年で止まっている。
んで、私は長年サーバー含めて10年前の環境のままサイト運営していたのだが、WordPressもプラグインも更新しないままずっと粘っていました。
しかしサーバーの容量もいっぱいになってきたし、WordPressやプラグインなども流石にアプデしなきゃだし、PHPも8にしないと許されない空気をひしひし感じたので、10年ぶりにサーバーごと引越し。
conohaVPS（200ギガ）からkagoyaVPS（600ギガ）にして、kusanagiも8から9へ。
PHPも７から８に変更。
んでバッチリ引越もうまくいったかと思いきや、裏で謎のエラーが連発しており、週に一度はサーバーが落ちたり、スマホ表示がおかしくなったりと悪戦苦闘。
さらにAdSenseコードもいつの間にかアプデされてて、2021年でサポート終わったコードを使い続けてたことが判明（問題なく動いてはいたが）
今回は自動AdSenseコードを最新にしたんですが、一見サイト構造には影響なさそうな外部AdSenseコードを変えただけでなぜかスマホ表示が崩れてしまった汗
真っ白画面よりはマシとはいえ、またまた謎のエラーとなったのです。
今回はバッチリ修正したので備忘録を載せておきます。
（そもそもThemaを他の最新のに変えれば済む話ではあるが、デザインとかイメージ的にできたら変えたくないのと、chatGPTで何だかんだどうにかなってしまって結局このままという・・笑）
新しいAdSenseコード導入後に「新着記事タブ」が消える不具合
■ 発生環境
テーマ：core_tcd027_〇〇〇〇（TCD027ベースの子テーマ）
サーバ：KUSANAGI9 / Nginx + PHP-FPM 8.1
キャッシュ：fcache 有効
トップページ構造：
新着・ニュース・漫画などの3タブ
■ 発生した問題
AdSenseの最新コード（adsbygoogle.js?client=形式）を
に追加した直後から、モバイル環境で以下の現象が発生。
トップページで「新着記事一覧」が最初に表示されない
「ニュース」など他のタブを押すと、一瞬だけ切り替わりすぐ「新着」に戻る
jQueryは読み込まれており、404やJSエラーもなし
→ 結果、トップページの構成が崩れて見える状態に。
■ 原因
主因は Google AdSenseのスクリプトがDOMContentLoadedより後に非同期実行され、TCD027のタブ制御スクリプトを部分的にリセットしてしまう こと。
特に MutationObserver や LazyLoad などが絡むと、タブ表示状態が初期化されて「非表示（display:none）」のままになる。
■ 初期対策と問題点
当初はAdSenseコードをheaderからfooterの</body>直前に移して、さらに以下のコードを、AdSenseコード下に貼って一時回避：
<script>document.addEventListener('DOMContentLoaded', function () {function forceShowFirst() {var tab = document.getElementById('index_post_list_tab');var wrap = document.getElementById('index_post_list_wrap');var btn1 = document.getElementById('index_post_list_button1');var p1 = document.getElementById('index_post_list1');// 全リセットif (tab) Array.prototype.forEach.call(tab.querySelectorAll('li'), li => li.classList.remove('active'));if (wrap) Array.prototype.forEach.call(wrap.children, el => el.style.display = 'none');// 新着を強制表示if (btn1 && p1) { p1.style.display = 'block'; btn1.classList.add('active'); }}forceShowFirst();setTimeout(forceShowFirst, 800);new MutationObserver(() => setTimeout(forceShowFirst, 250)).observe(document.body, {childList: true, subtree: true});});</script>このスクリプトで「新着」は表示されるようになったが、ニュースなど他タブをクリックしても再び新着に戻るという副作用が発生。
原因は MutationObserver が広告レンダリングのたびに再発火していたこと。
■ 最終的な解決策（安定版）
以下のようにコードを最小化し、一度だけDOM操作を行う仕様に変更。
<!-- TCD027 新着タブ初期表示スクリプト（安定版） -->
<script>
document.addEventListener('DOMContentLoaded', function () {
function forceShowFirst() {
var tab = document.getElementById('index_post_list_tab');
var wrap = document.getElementById('index_post_list_wrap');
var btn1 = document.getElementById('index_post_list_button1');
var p1 = document.getElementById('index_post_list1');
if (tab) Array.prototype.forEach.call(tab.querySelectorAll('li'), li => li.classList.remove('active'));
if (wrap) Array.prototype.forEach.call(wrap.children, el => el.style.display = 'none');
if (p1 && btn1) { p1.style.display = 'block'; btn1.classList.add('active'); }
if (!p1 && wrap && wrap.firstElementChild) wrap.firstElementChild.style.display = 'block';
if (!btn1 && tab && tab.firstElementChild) tab.firstElementChild.classList.add('active');
}
forceShowFirst();
setTimeout(forceShowFirst, 600);
});
</script>
設置場所:
footer.php の 直前（ の外に出さないこと）
■ 結果
新着タブ：初回から正常表示
他タブ：1クリックで確実に切り替え（戻らない）
fcache・AdSense・WP Statistics 等の非同期JSとも競合なし
表示速度・SEO・広告表示数にも影響なし
■ 学び・注意点
過去のTCDテーマはJavaScriptが古く、非同期スクリプトと競合しやすい
→ 特に「ヘッダーにAdSenseを挿入」すると挙動が壊れることが多い。
MutationObserverは便利だが、広告JSと共存させると暴走する
→ 一度だけ初期化する設計が安全。
AdSenseのcrossorigin属性やスペースは無関係
→ 問題の根本はDOM再構築によるタブのdisplay消失。
■ 結論
TCD027系テーマでAdSense自動広告を導入する場合は、フッターに最新AdSenseコードを設置。
そのすぐ下に上記の「新着タブ初期化スクリプト（安定版）」を追加
これでトップページ崩れ問題は完全に解決します。
coreテーマは運営ももう開発をやめているので、今回は代わりに無理やり最新環境に合わせてみました。
今回だけではなく、ここ一ヶ月の過去記事のほとんどがそれなので、古いTCDテーマで新環境に適応できず悩んでいる方は、ぜひ過去記事も参考にしてみてください、
こんなマニアックな需要はないと思うが、一応書いておきます笑
コメント