【WP】Cocoonの目次をスムーススクロール化する方法(コピペでOK)

当サイトでも使用しているWordpressの無料テーマ「Cocoon」。

正直、こんな高性能なテーマが無料でいいの?と思ってしまうくらい優れたテーマなので、ブログ初心者の方にはぜひ使ってみて欲しいのですが、今回はこちらで「スムーススクロール」を実装する方法を紹介します。

スポンサーリンク

スムーススクロールとは

スムーススクロールは、アンカーリンクをクリック時の遷移を滑らかに表現する手法です。

Cocoon内において、アンカーリンクが設置されている箇所は次の2つです。

  • 右下のページTOPへ戻るボタン
  • 目次

右下のTOPへ戻るボタンはあらかじめスムーススクロール化されているので、今回は目次をスムーススクロール化してみたいと思います。

Cocoon利用者は、自分のサイトの「右下のTOPへの戻るボタン」と「目次」のアンカーリンクの挙動を確かめて見て下さい。目次のアンカーリンクを押すと、瞬間移動をしたような挙動でページ内のどこにいるかの把握が難しくなります。特に長文の記事だとユーザビリティの低下に繋がります。

Cocoonでページスクロールを実装する

事前に作業ファイルのバックアップを忘れずに行って下さい。

準備

・Cocoonの子テーマを導入していること

これを用意していれば、あとの作業は数分で終わります。

テーマエディターを開く

今回はFTPからのファイル編集ではなく、WP上で編集する方法を紹介します。

まずは、管理画面の「外観」からテーマエディターを選択します。

javascript.jsを開く

テーマがCocoon Childであることを確認の上、javascript.jsを開きます。

下記コードをコピペする

$(function(){
$('a[href^="#"]').click(function(){
let speed = 500;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top - 50;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
保存をして終了です。
実際に目次の挙動を確認してみてください。

コメント

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