スムーススクロールをWordPressテーマ”SANGO”に導入する方法。

なべはぴ

SANGOにはスムーススクロールが標準装備されていないのです…

アンカーリンクをつけたときに、ぬるっとスクロールしてほしくないですか？

スムーススクロールは下記の動画を見てください。

他の有料テーマでは標準でついているものもありますが、SANGOにはありませんでした！

SANGOは非常に良いテーマだとは思っていますが、自分好みのカスタマイズをすることもブログを楽しむ方法の一つです。
＞＞WordPressのテーマ「SANGO」の魅力を語る

無料のテーマでも使えるカスタマイズなので、ぜひ参考にしてみてください。

この記事はこんな方にオススメ

スムーススクロールを導入したい人

注意

本カスタマイズはJavaScriptを使用します。
また、JavaScriptを使用するため、functions.phpを編集します。

誤って重要なコードを消してしまうとブログが表示されなくなる可能性があります。

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

なべはぴ

非常にかんたんなので、ぜひやってみてください

ジャンプできる目次

スムーススクロールをSANGOに導入するための前準備
スムーススクロールをSANGOに導入するためのJavaScriptファイルの作成
スムーススクロールをSANGOに導入する：まとめ

目次へ

スムーススクロールをSANGOに導入するための前準備

▶目次に戻る

本カスタマイズではJavaScriptというプログラミング言語を使用します。

JavaScriptは、ウェブページにて複雑な機能をできるようにするプログラミング言語です。

詳しく知りたい方は、下記のページを参考にしてください。

参考JavaScript とは – ウェブ開発を学ぶ | MDNMDN Web Docs

SANGOでJavaScriptを使用するためには、functions.phpを編集してJavaScriptを読み込めるようにしなければなりません。

JavaScriptを読み込む方法は、「カスタマイズでJavaScriptを利用する方法」という記事を参考にしました。

注意

JavaScriptを使用するため、functions.phpを編集します。

誤って重要なコードを消してしまうとブログが表示されなくなる可能性があります。

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

ダッシュボードの外観⇒テーマエディター⇒functions.phpとクリック。

JavaScriptを読み込むためのコードを挿入。

詳細は下記で説明します。

JavaScriptを読み込むためのコード挿入方法

JavaScriptを読み込むためには、functions.phpを編集する必要があります。

注意

functions.phpを編集する際、誤って重要なコードを消してしまうとブログが表示されなくなる可能性があります。

カスタマイズする前に必ずバックアップをとってください。
また、子テーマを導入して編集するようにしてください。

functions.phpを確認すると、下記のようなコードが存在します。

functions.php

//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() { wp_enqueue_style( 'child-style',	get_stylesheet_directory_uri() . '/style.css',	array('sng-stylesheet','sng-option') );
}

最後の);と}の間に、以下のコードを貼り付けます。

貼り付けるコード

//jsの読み込み
wp_enqueue_script( 'sng-js', get_stylesheet_directory_uri() . '/scripts.js', array(), '', true );

貼り付けたあとは以下のようなコードになります。

挿入後のfunctions.php

//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() { wp_enqueue_style( 'child-style',	get_stylesheet_directory_uri() . '/style.css',	array('sng-stylesheet','sng-option') ); //jsの読み込み wp_enqueue_script( 'sng-js', get_stylesheet_directory_uri() . '/scripts.js', array(), '', true );
}

コードを編集すると、フッターでscripts.jsというJavaScriptファイルを読み込むことが可能になります。

下記の画像のようになっていればOKです。

スムーススクロールをSANGOに導入するためのJavaScriptファイルの作成

▶目次に戻る

以下のコードをいれたscripts.jsを作成します。

※JavaScriptファイルはテキストエディタを使用して作成してください。

コードはかじゅまろさん（@darakerutoriton）の「【WordPress】コピペでOK！無料テーマでも目次リンクにぬるぬる動くスクロールを実装できる！」という記事を参考にしました。

scripts.js

jQuery(function(){ jQuery('a[href^="#"]').click(function(){ var speed = 800; var href = jQuery(this).attr("href"); var target = jQuery(href == "#" || href == "" ? 'html' : href); var position = target.offset().top - 100; jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); return false; });
});

ソースの補足