【Cocoon】JQueryでスムーズスクロールを実装

WordPressの有名なテーマ『Cocoon』にて、JQueryでスムーススクロールを実装する方法を解説します。これにより、目次から見出しのページ内をスクロールさせての移動が可能となります。

方法自体は非常に簡単なものです。作業自体は数分で出来るかと思います。ただし、ソースコードの追加作業があるため、ファイルの事前バックアップは必須です。

本記事はテーマが『Cocoon』である事が前提です。他のテーマでの動作確認は行っておりません。予めご了承ください。

スポンサーリンク

スポンサーリンク

スポンサーリンク

スポンサーリンク

スムーズスクロール化とは?

通常、ページ間の移動は一瞬で行われます。機能としては便利で、多くのサイトで実装されている機能ですが、移動自体が一瞬であるために目で追うことが出来ません。そのため、現在の位置が分からなくなってしますということがよくあります。(主に自分ですが。。。)そこで、ページ間をスクロールで移動が出来れば、目で追うことが出来るため、迷子になりにくくなります。

スムーズスクロール化までの大まかな流れ

作業の流れは大まかに以下の通りです。

『Cocoon』目次表示設定の確認

『Cocoon Child』内にある『footer-insert.php』を事前にバックアップ(必ず実施する事!!)

JQueryにて『footer-insert.php』にスムーズスクロール機能のコード追加

各項目を1つずつ解説していきます。

スポンサーリンク

『Cocoon』目次表示設定の確認

まずは作業前の事前確認として、『Cocoon 設定』から目次を表示する設定となっているか確認します。

『Cocoon 設定』から設定画面を開き、『目次』タブを選択します。

『目次設定』画面に切り替わったら、『目次を表示する』にチェックが入っていることを確認します。 ※『投稿ページ』『固定ページ』のチェックに関しては任意でチェックを付けるまたは外す設定にしてください。

『footer-insert.php』バックアップ

目次の表示設定が終わったら、いよいよスムーズスクロール機能の実装に入ります。その前に、トラブルがあったときにすぐに元に戻せるよう、ファイルのバックアップは必ずとっておきましょう。

今回、コード追加対象のファイルは『Cocoon Child』内にある『footer-insert.php』1ファイルです。このファイルをファイル転送ソフト(FFFTPまたはwinSCPなど)で事前にバックアップを取っておきましょう。

スポンサーリンク

『footer-insert.php』にコード追加

ファイルのバックアップが終わったらいよいよ実装です。画面上にある『管理メニュー』から『テーマの編集』を選択。

『編集するテーマを選択』でプルダウンメニューから『Cocoon Child』を選択し、『tmp-user』内にある『footer-insert.php』を開きます。

以下のコードを追加して『ファイルを更新』をクリックします。 ※追加する場所はどこでも大丈夫かとは思いますが、当サイトでは1行目から15行目にかけて下記コードを追加しています。

スムーズスクロールのソースコード(※コピペOKです)

スクロールの速度は5行目にある『var speed = xxx;』内で設定しています。

数値の単位は『ms(ミリ秒)』で、値が1000で1秒となります。上記ソースでは『850』となっていますが、自由に変更が可能です。

追加したら、任意のページで動作を確認し、スムーズスクロールされているようであれば実装は完了となります。

なお、動作確認にて以下の環境で正常に動作する事を確認済みです。

Microsoft Internet Explorer 11

Microsoft Edge バージョン44

Google Chrome バージョン78(64ビット)

Mozilla Firefox バージョン70

iPhone iOS 13.1(Safari)

スポンサーリンク

さいごに

以上がスムーズスクロールを実装する手順となります。上記手順を見る限りはとても簡単かと思います。

この機能があるだけでユーザビリティーがずいぶん良くなるかと思います。今後、この機能を実装しようと考えている方へ、本記事が参考になれば幸いです。

『WordPress』関連記事

【WordPress】InstantWPでローカル環境にテスト用サーバーを構築
Wordpressでサイトを構築する際に絶対欠かせないテスト環境。インストールが不要なInstantWP(インスタントワードプレス)をダウンロードするだけで、ローカル環境にテスト環境を手軽に構築する事ができます。InstantWPとは?...
タイトルとURLをコピーしました