>>初心者ブロガーこそやるべきドメインパワー対策はこちら

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

なべはぴ
なべはぴ

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

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

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

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

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

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

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

注意

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

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

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

なべはぴ
なべはぴ

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

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

目次に戻る

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

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

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

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;
   });
});
ソースの補足
  • var speed = 〇〇;
    スクロールスピードの調整。数値を減らすとスクロールのスピードが速くなり、増やすと遅くなります。
  • var position = target.offset().top;
    スクロール後の着地点の調整。-100だと上に100px、+100だと下に100pxずれます。

作成したscripts.jsを、子テーマのディレクトリにいれれば終了です。

クリックで画像が大きくなります

ファイルの転送は、FTPソフトを使用すると便利です。(※記事作成予定)

今すぐ知りたい方は、【FileZillaの使い方】WordPressでFTPソフトを使おうという記事を参考にしてみてください。

スムーススクロールをSANGOに導入する :まとめ

目次に戻る

この記事では、スムーススクロールの導入方法に関して説明しました。

スムーススクロールの導入手順は下記の通り。

たった2つのステップを行うことで、かんたんスムーススクロールをサイトに導入することができます。

ぬるっと動くだけの細かいカスタマイズですが、あるとないとでは全然ちがうと僕は思っています。

ぜひやってみてください。

\他にもカスタマイズしてます/

WordPressでローディング画面をかんたんにおしゃれにするプラグイン”Preloader”の導入方法。

コピーボタンの導入方法!タイトルとURLを一括コピー。[SANGO]

コピーしてシェア

記事タイトルとURLをコピー
  

 

にほんブログ村 にほんブログ村へ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA