WordPressの有名なテーマ『Cocoon』にて、JQueryでスムーススクロールを実装する方法を解説します。これにより、目次から見出しのページ内をスクロールさせての移動が可能となります。
方法自体は非常に簡単なものです。作業自体は数分で出来るかと思います。ただし、ソースコードの追加作業があるため、ファイルの事前バックアップは必須です。
本記事はテーマが『Cocoon』である事が前提です。他のテーマでの動作確認は行っておりません。予めご了承ください。
スムーズスクロール化とは？
通常、ページ間の移動は一瞬で行われます。機能としては便利で、多くのサイトで実装されている機能ですが、移動自体が一瞬であるために目で追うことが出来ません。そのため、現在の位置が分からなくなってしますということがよくあります。（主に自分ですが。。。）そこで、ページ間をスクロールで移動が出来れば、目で追うことが出来るため、迷子になりにくくなります。
スムーズスクロール化までの大まかな流れ
作業の流れは大まかに以下の通りです。
- 『Cocoon』目次表示設定の確認
- 『Cocoon Child』内にある『footer-insert.php』を事前にバックアップ（必ず実施する事！！）
- JQueryにて『footer-insert.php』にスムーズスクロール機能のコード追加
各項目を１つずつ解説していきます。
『Cocoon』目次表示設定の確認
まずは作業前の事前確認として、『Cocoon 設定』から目次を表示する設定となっているか確認します。
『Cocoon 設定』から設定画面を開き、『目次』タブを選択します。
『目次設定』画面に切り替わったら、『目次を表示する』にチェックが入っていることを確認します。 ※『投稿ページ』『固定ページ』のチェックに関しては任意でチェックを付けるまたは外す設定にしてください。
『footer-insert.php』バックアップ
目次の表示設定が終わったら、いよいよスムーズスクロール機能の実装に入ります。その前に、トラブルがあったときにすぐに元に戻せるよう、ファイルのバックアップは必ずとっておきましょう。
今回、コード追加対象のファイルは『Cocoon Child』内にある『footer-insert.php』１ファイルです。このファイルをファイル転送ソフト（FFFTPまたはwinSCPなど）で事前にバックアップを取っておきましょう。
『footer-insert.php』にコード追加
ファイルのバックアップが終わったらいよいよ実装です。画面上にある『管理メニュー』から『テーマの編集』を選択。
『編集するテーマを選択』でプルダウンメニューから『Cocoon Child』を選択し、『tmp-user』内にある『footer-insert.php』を開きます。
以下のコードを追加して『ファイルを更新』をクリックします。 ※追加する場所はどこでも大丈夫かとは思いますが、当サイトでは１行目から１５行目にかけて下記コードを追加しています。
<script>
//スムーズスクロール
jQuery(function(){
jQuery('a[href^="#"]').click(function() {// # クリック時の処理
var speed = 850; //スクロール速度を設定（単位：ミリ秒 ※自由に変更可能）
var href= jQuery(this).attr("href"); // アンカーの値を取得
// 移動先を取得
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;// 移動先を数値にて取得
// スムーズスクロール
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>スムーズスクロールのソースコード（※コピペOKです）
スクロールの速度は５行目にある『var speed = xxx;』内で設定しています。
var speed = 850; //スクロール速度を設定（ミリ秒）
数値の単位は『ms（ミリ秒）』で、値が１０００で１秒となります。上記ソースでは『８５０』となっていますが、自由に変更が可能です。
追加したら、任意のページで動作を確認し、スムーズスクロールされているようであれば実装は完了となります。
なお、動作確認にて以下の環境で正常に動作する事を確認済みです。
- Microsoft Internet Explorer 11
- Microsoft Edge バージョン44
- Google Chrome バージョン78（64ビット）
- Mozilla Firefox バージョン70
- iPhone iOS 13.1（Safari）
さいごに
以上がスムーズスクロールを実装する手順となります。上記手順を見る限りはとても簡単かと思います。
この機能があるだけでユーザビリティーがずいぶん良くなるかと思います。今後、この機能を実装しようと考えている方へ、本記事が参考になれば幸いです。