MENU
無料相談はこちらから
無料相談はこちらから

WordPressでページ内リンクからアコーディオンを自動展開・スクロールさせる方法

WordPress

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

しかし、標準の<details>タグやテーマの機能だけでは、リンクをクリックしても中身が閉じたままで、ユーザーが迷ってしまうことが少なくありません。

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

目次

実現したい挙動

  • ページ内のアンカーリンク（#id）をクリックする。
  • 対象のアコーディオンが自動でパッと開く。
  • 開いたアコーディオンの先頭へスムーズにスクロールする。
  • 外部サイトや別ページから**「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用）」に以下のコードを貼り付けてください。

POINT

固定ヘッダーがあるサイトでも隠れないよう、スクロール位置の微調整機能を盛り込んでいます。

<script>
(function() {
    /**
     * 指定されたIDのアコーディオンを開き、スクロールする関数
     */
    function scrollToAccordion(targetId) {
        const details = document.getElementById(targetId);
        if (!details || details.tagName !== 'DETAILS') return;

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

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

            window.scrollTo({
                top: targetPos,
                behavior: 'smooth'
            });
        }, 100);
    }

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

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

        const hash = link.getAttribute('href').substring(1);
        if (!hash) return;

        const targetElement = document.getElementById(hash);
        if (targetElement && targetElement.tagName === 'DETAILS') {
            e.preventDefault();
            scrollToAccordion(hash);
            // URLバーのハッシュを更新（履歴に残さない）
            history.replaceState(null, null, `#${hash}`);
        }
    });
})();
</script>

コードのポイント解説

  • setTimeout の活用
    WordPressテーマ（特にSWELLなど）のJS読み込みと競合しないよう、コンマ数秒の待ち時間を作っています。これにより「コードは正しいのに動かない」という問題を回避します。
  • 固定ヘッダーへの対応
    scrollIntoView ではなく window.scrollTo を計算して使うことで、固定ヘッダーの下にアコーディオンが潜り込んでしまうのを防いでいます。headerHeight の数値はお使いのサイトに合わせて調整してください。
  • history.replaceState
    リンクをクリックした際にブラウザの「戻る」ボタンを汚さずに、URLバーの表示だけを切り替えています。

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

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

まとめ

アコーディオンの自動展開は、FAQページや規約ページなどで非常に役立つカスタマイズです。

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

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

WordPress

関連記事

目次