【WordPress】アンカーリンクでアコーディオンを自動展開＆スクロールさせる方法

WordPressサイトで、「詳細はこちら」というリンクをクリックした際に、折りたたまれているアコーディオンを自動で開き、その場所までスムーズに移動させたい場面があります。

この記事では、SWELLなどの主要テーマでも安定して動作する、アコーディオンの自動展開＆スクロールの実装方法を解説します。

実現したい挙動

• ページ内のアンカーリンク（#id）をクリックする。
• 対象のアコーディオン（detailsタグ）が自動でパッと開く。
• 開いたアコーディオンの先頭へ、固定ヘッダーを考慮してスムーズにスクロールする。
• 外部サイトや別ページから「URL#id」でアクセスした際も同様に展開する。

サンプルはこちら。下のアコーディオンが開きます。

１．HTMLの準備（IDの設定）

まずは、開きたいアコーディオン（detailsタグ）に、リンク先となる固有のIDを割り当てます。

<details id="my-accordion">
  <summary>ここをクリックして詳細を表示</summary>
  <div class="content">
    ここに詳細な内容が入ります。
  </div>
</details>

<p><a href="#my-accordion">詳細はこちら</a>をご覧ください。</p>

２．JavaScriptの実装

WordPressの「カスタムHTML」ブロック、またはテーマのカスタマイザー内にある「高度な設定（JS用）」などに以下のコードを貼り付けてください。

<script>
(function() {
    /**
     * 指定したIDのアコーディオンを展開してスクロールする関数
     */
    function scrollToAccordion(targetId) {
        const details = document.getElementById(targetId);
        // ターゲットが存在しない、またはdetailsタグでない場合は終了
        if (!details || details.tagName !== 'DETAILS') return;

        // 1. アコーディオンを展開
        details.open = true;

        // 2. スクロール実行（テーマの描画や干渉を防ぐため僅かに遅延）
        setTimeout(() => {
            const headerHeight = 90; // 固定ヘッダーの高さ（px）に合わせて調整してください
            const targetPos = details.getBoundingClientRect().top + window.scrollY - headerHeight;

            window.scrollTo({
                top: targetPos,
                behavior: 'smooth'
            });
        }, 150); // 150ms程度のディレイが最も安定します
    }

    // A. ページ読み込み時の処理（URLにハッシュがある場合）
    window.addEventListener('load', () => {
        if (window.location.hash) {
            const hash = window.location.hash.substring(1);
            // 実行タイミングを少し遅らせてテーマの初期化を待つ
            setTimeout(() => scrollToAccordion(hash), 400);
        }
    });

    // B. ページ内リンククリック時の処理
    document.addEventListener('click', e => {
        const link = e.target.closest('a[href*="#"]');
        if (!link) return;

        // 現在のページ内へのリンクか確認
        const url = new URL(link.href);
        if (url.pathname !== window.location.pathname) return;

        const hash = url.hash.substring(1);
        if (!hash) return;

        const targetElement = document.getElementById(hash);
        // 対象がアコーディオン（DETAILS）の場合のみ独自処理を実行
        if (targetElement && targetElement.tagName === 'DETAILS') {
            e.preventDefault();
            scrollToAccordion(hash);
            // URLバーのハッシュを更新（ブラウザの「戻る」を汚さないreplaceState）
            history.replaceState(null, null, `#${hash}`);
        }
    });
})();
</script>

３．コードのポイント解説

• window.scrollY の採用
  従来の pageYOffset に代わり、モダンなブラウザ標準である scrollY を使用して現在のスクロール位置を正確に取得しています。
• SWELL等の高機能テーマへの配慮
  setTimeout を挟むことで、テーマ側で行われる「ページ内リンクのスムーズスクロール機能」との競合を防ぎ、アコーディオンが確実に開いた後にスクロールを開始させます。
• history.replaceState
  リンクをクリックするたびに履歴が増えてしまう（戻るボタンを何度も押さないといけなくなる）のを防ぎつつ、現在のURL表示を更新します。
• 固定ヘッダーへの対応
  headerHeight の数値を調整するだけで、ヘッダーに隠れることなくぴったりの位置で止まります。

４．うまく動かない時のチェックリスト

• IDが重複していないか？
  1つのページに同じIDが複数あると、最初の1つしか反応しません。
• ヘッダーの高さを調整したか？
  スクロール位置がズレる場合は、コード内の headerHeight = 80 の数字を変更してください。
• キャッシュをクリアしたか？
  WordPressのキャッシュプラグインやブラウザキャッシュの影響で古いコードが動いている場合があります。

まとめ

アコーディオンの自動展開は、FAQ（よくある質問）や利用規約など、特定の項目へダイレクトに誘導したい時に非常に役立つカスタマイズです。

1. アコーディオンにIDをつける
2. リンクのURLを「#ID名」にする
3. JavaScriptを設置する

この3ステップだけで、サイトの利便性が向上します。ぜひ活用してみてください。