トップに戻るボタンや、目次から見出しへ飛ぶようなページ内リンクって大抵スクロールで変わりますよね。あれってテンプレートを使わない場合は自分で設定する必要があるので「面倒だからプラグイン使うかぁ」と思いがちですが、意外に簡単に設定ができるんです。
今回は初心者でもできる、プラグインを使わずにページ内リンクをスクロールさせる方法を紹介したいと思います。
jQueryを使ってスムーズスクロール
スムーズスクロールを実装するにはjQueryを使うのですが、WordPressの場合は通常のjQueryと違って、コードの頭についている「$」を「jQuery」に変えないとjQueryが動いてくれないので注意してください。
header.phpに記述を追加する
header.phpの <?php wp_head(); ? > の後に以下の記述を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> //スムーズスクロール jQuery(function(){ jQuery('a[href^="#"]').click(function() {// # クリック処理 var speed = 400; //スクロール速度ミリ秒 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> |
スクロールスピードについて
1 | var speed = 400; //スクロール速度ミリ秒 |
スクロールスピードは var speed の値で調整しますので、任意の数値を入れて調整してください。数値を減らすとスクロールのスピードが速くなり、増やすと遅くなります。「speed = 1000」が1秒なので、設定の参考にしてください。
jQuery.jsが読み込まれていない場合
大抵、WordPressは大元のjQueryが自動に読み込まれるので必要ないと思いますが、もしjQueryが読み込まれてない場合は function.php に以下の記述を追加してください。
1 2 3 4 5 | /* wp_head(); で Wordpressの jQuery を読み込む? */ function load_script(){ wp_enqueue_script('jquery'); } add_action('init', 'load_script'); |
この記述はjQuery.jsの読み込みと同時に、他のプラグインが利用するjQueryとの共存を調整してくれるそうです。
まとめ
WordPressでサイトに機能を追加する場合、すぐにプラグインの導入を考えてしまいそうですが、少し有効化するのを待ってみませんか。
WordPress初心者にとって、プラグインは便利すぎて宝箱のようにも思えますが、動きや設定の原理などが不明のまま利用する事になるので、WEBのスキル上達には向いてないと思います。
プラグインがトラブルの元になる事もあるので、jQueryで解決できる事であればjQueryに任せた方が安心ですしね。
「初心者でもプラグインなしでスムーズスクロールを実装する方法」でした。