Cocoonで目次をスクロールアニメーションにするカスタマイズ【WordPress】

Cocoonにて、目次で特定の項目に移動する時に、スクロールアニメーションを実装する方法を解説します。

デフォルトの仕様では、目次をクリックすると画面がパッと切り替わり、一瞬で項目が移動するため、ユーザーに画面の変化が伝わりにくいです。
なので、移動をスクロールアニメーションに変更し、ユーザーに直感的にページ変化を伝えられるようにします。

まずはCocoonの目次設定を有効にしてください

まず、ページに目次を表示する設定になっていない方は、目次を表示する設定に変更してください。

既に目次が有効になっている方はここは読み飛ばしてOKです。

  • ダッシュボード(管理画面)を開く
  • 「Cocoon設定」をクリック
  • 「目次」タブをクリック
  • 「目次を表示する 」にチェックを入れる
  • 下の「変更をまとめて保存」をクリック

カスタマイズ方法は、Cocoonの子テーマの1つのファイルに追記するだけ

まとめると、Cocoonの子テーマ「cocoon-child-master」の中に、「tmp-user」というディレクトリがあります。

そしてその中の「footer-insert.php」の一番下に、下記のスクリプトを追記してください。これで終わりです。

言っている意味がよく分からない、カスタマイズ経験があまりない方は、以下の手順で行って頂ければ大丈夫です。

  • ダッシュボード(管理画面)を開く
  • 外観→テーマエディターをクリック
  • 右のテーマファイルの「tmp-user」をクリック
  • 「footer-insert.php」をクリック
  • 下記のソースコードを追記する
  • 「ファイルを更新」ボタンをクリック

footer-insert.phpに追記するスクリプト

<script>
$(function(){
    //目次クリック時
    $('#toc a[href^=#]').click(function(){
        // hrefを取得
        var href= $(this).attr("href");
        // 移動箇所を取得 指定のない#または空白の場合はトップへ
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        // 目次idはhタグに直接付いているわけではなく子要素に入っているので、paddingデザインに対応するためparentを付与する
        var target_position = target.parent().offset().top;
        // 300ミリ秒(0.3秒)かけてスクロール 移動速度を変更したい場合は300の部分を変えてね
        $('body,html').animate({scrollTop : target_position}, 300);
    });
});
</script>

移動スピードを調整したい場合は、300の部分の値を変えてください。

少なくしたら速く、多くしたらゆっくりとした移動になります。

目次をクリックして移動の確認

「footer-insert.php」への追記が終わると、スクロール移動が適用されます。
このページの目次でも実際の動作が確認できます。

他テーマや外部プラグイン「Table of Contents Plus」使用時にも利用できます

今回はテーマCocoonを使用した場合のカスタマイズ方法でしたが、スクリプトファイルは他のテーマでも使用できます。

スクリプトファイルを追加しなくてはいけない箇所はテーマ毎に違うと思いますので、各テーマの仕様に合わせてご利用ください。

また、「Table of Contents Plus」プラグインを使用している場合でも同様にスクロールアニメーションを実行できますので、お試しください。

以上、Cocoonで目次をスクロールアニメーションにするカスタマイズ、でした。

コメント

タイトルとURLをコピーしました