【WordPressカスタマイズTips】THE THOR × Easy Accordionでのエラー解決法

症状

テーマ THE THOR でプラグイン Easy Accordion を使うと、見出しをクリックした瞬間にページ先頭へスクロールしてしまう、アコーディオンが開かないといった問題が発生しました。

原因

Easy Accordion の見出しは以下のように href="#" を持つリンクになっているため、THE THOR のスムーススクロール（a[href^="#"] を一括処理）に拾われてトップへ移動してしまうことが分かりました。

<h3 class="ea-header">
  <a href="#" data-sptoggle="spcollapse" data-sptarget="#collapse7710">見出し</a>
</h3>

結論（やること）

アコーディオン内のトリガーリンクだけ href="#" を 実行時に無害化（javascript:void(0) へ差し替え）し、クリックの既定動作を止める。
Easy Accordion は data-sptarget を使って開閉しているので、href を変えても動作に支障はありません。

---

設定手順（Custom CSS & JS を使用）

1. 管理画面 → Custom CSS & JS → Add Custom JavaScript（または「新規追加」）
2. タイトルを「Easy Accordion ハッシュ抑止」などわかる名前にする
3. Where on page（読み込む場所）は Footer を選択
4. On which pages はサイト全体（Front-end）でOK（必要なら対象ページだけに限定）
5. 下のコードをそのまま貼り付けて保存・有効化

追加する JavaScript

// THE THOR × Easy Accordion: トップへ戻る問題の対策
// 役割: .sp-easy-accordion 内の a[href="#"] を無害化し、既定動作を止める
document.addEventListener('DOMContentLoaded', function () {
  var triggers = document.querySelectorAll(
    '.sp-easy-accordion a[data-sptoggle="spcollapse"][href^="#"]'
  );

  triggers.forEach(function (a) {
    // 元のhrefを退避（必要ならデバッグ用）
    a.dataset.hrefOriginal = a.getAttribute('href');

    // THE THOR のスムスクに拾われないよう href を無害化
    a.setAttribute('href', 'javascript:void(0)');

    // 既定動作だけ止める（伝播は止めない：プラグイン本体のクリック処理は通す）
    a.addEventListener('click', function (e) {
      e.preventDefault();
    });

    // アクセシビリティ対応（Enter / Spaceでも開閉できるように）
    if (!a.hasAttribute('role')) a.setAttribute('role', 'button');
    if (!a.hasAttribute('tabindex')) a.setAttribute('tabindex', '0');

    a.addEventListener('keydown', function (e) {
      if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        a.click();
      }
    });
  });
});

ポイント

• stopImmediatePropagation() は使わない（プラグイン本体のイベントまで止まるため）
• preventDefault() のみで十分（トップへ戻る既定動作を抑止）
• Easy Accordion は data-sptarget 等で開閉するため href を変えても開閉は維持される

---

トラブルシュート

• まだ上に戻る → 設置場所が footer になっているか、有効化されているか確認
• 反応しない → 親のクラスが .sp-easy-accordion であることを検証ツールで再確認（違う場合はセレクタを書き換え）
• 他プラグインとの競合 → 目次・スムーススクロール系（page scroll 系）を一時停止して確認

---

まとめ

「テーマ（THE THOR）のスムスク × プラグイン（Easy Accordion）の href="#"」が原因の相性問題は、対象リンクの href を無害化して既定動作だけ止めることで解消できます。
今回は Custom CSS & JS を使ってテーマやプラグインを改変せずに安全に対処しました。
もし、同じような症状でお困りの方の参考になりましたら幸いです。