PF-001
WordPressでのみメニューが動かない → 原因を切り分けて修正
課題（症状）
- 静的HTMLでは動くのに、WordPressに組み込むとメニューボタンが反応しない。
- 場合によってはコンソールに
Cannot read properties of nullなどが出る。
Before / After（この場で挙動を確認）
サンプルサイト表示エリア（ここで挙動を確認できます）
モード：Before
Beforeは「押しても反応しない」状態を再現。Afterは「右からスライドイン」します。
Before： WordPress環境で起こりがちな「ボタンを動かす命令が早すぎる」状態を想定し、
クリックしても開かない状態を再現しています。
クリックしても開かない状態を再現しています。
わかりやすく言うと：
同じメニューボタンでも、WordPressに入れた途端に動かなくなることがあります。
原因の一例は「ボタンが表示される前に、動かす命令（JavaScript）が先に動いてしまう」こと。
今回は、その状態を切り分けて 安定して動くように修正した例です。
技術メモ（原因の考え方）
- DOM生成前にJSが走ると、要素取得が
nullになりイベントが付かないことがある - 対策：
DOMContentLoadedでDOM生成後に実行／defer付与／フッター読み込み - WordPressでは
wp_enqueue_scriptで読み込み位置・依存関係を管理する
原因（切り分け）
- WordPress側でJSがヘッダー読み込みになり、DOM生成前に実行 → 要素取得が
null。 - （追加で起こりがち）テーマ/プラグインのJSと競合してイベントが上書きされる。
対応（修正内容）
DOMContentLoadedで包んで、DOM生成後に実行。- 要素が無いページでも落ちない
nullガード。 - WordPressでは
wp_enqueue_scriptでフッター読み込み／defer付与。
修正コード例（要点）
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
if (!btn || !menu) return; // nullガード
btn.addEventListener('click', () => {
menu.classList.toggle('is-open');
});
});WordPress側の読み込み例（functions.php）
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'site-main',
get_template_directory_uri() . '/assets/js/main.js',
array(),
'1.0.0',
true // フッター読み込み
);
});
// defer付与（WP 5.7+）
add_filter('script_loader_tag', function($tag, $handle){
if ($handle === 'site-main') {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}, 10, 2);結果
- WordPress環境でもクリックイベントが安定して動作。
- 「ページによって要素が無い」場合でもエラーにならず安全に動作。
- 再発防止として、読み込み位置とガード条件を標準化。