1. HOME
  2. 開発・ブログ運営
  3. WordPress
  4. プラグイン(Smooth Scroll Links [SSL] )を導入してページの先頭へ戻るボタンを追加してみた
2014年08月07日
大量のファイルを短時間で確実にサーバーへアップロードする方法 ...
2012年04月29日
WordPress の機能を拡張したい場合、functions ...
2012年08月01日
WordPress インストール直後のトラブル(管理画面は表示 ...
2012年07月24日
続:WordPress で 7日以内に投稿した記事に「NEW」 ...
2012年06月08日
WordPress の the_date() で同日の記事の日 ...
2012年12月05日
WordPress でカテゴリを並び替えるためのプラグインを ...

プラグイン(Smooth Scroll Links [SSL] )を導入してページの先頭へ戻るボタンを追加してみた

Javascript を使うことによって、同じページ内をスクロールしながら移動できますが、今回は Javascript を直接記述することなく、プラグインにて スクロール移動ができるようにしてみました。

WordPress 3.3.2 に、Smooth Scroll Links [SSL] というプラグインを導入して、ページの先頭へ戻るボタンを追加しました。

Smooth Scroll Links [SSL] は、ニュルニュルッとスクロールして、同一ページ内の設定した任意の場所へ移動することができるようになります。

Smooth Scroll Links [SSL]のインストールと設定

通常のプラグイン同様に、WordPress 管理の「プラグイン」>「新規追加」ページから、Smooth Scroll Links [SSL] を検索すると出てくるので、「いますぐインストール」をクリックして有効化しれば完了です。

インストール/有効化が完了したら、WordPress 管理画面の「設定」>「Smooth Scroll Links [SSL]」ページに移動し、一番上にある、「check to activate.」のチェックを入れ、「Save settings」をクリックして設定を保存します。




「check to activate.」の下にある「check to activate.」にチェックを入れると、テンプレートファイルの修正をしなくても、フッターに 「先頭へ戻る」リンクが追加されるようです。

ただ、フッターを、「<?php wp_footer(); ?>」で出力していない場合は、フッターに何も表示されなくなってしまうようなので気を付けてください。

参考:SMOOTH SCROLL LINKS IN WORDPRESS [SSL]
(プラグイン開発者のブログ)

テンプレートファイルの修正

プラグインのインストール/有効化が済んだら、「先頭へ戻る」リンクを追加したい場所に、

<a href=”#xxx”>先頭へ戻る</a>

を追加します。(xxx は任意)

っで、移動したい場所に、

<div id=”xxx”></div>

を追加すれば、「先頭へ戻る」をクリックすると、移動先へニュルニュルッとスクロールして移動します。(xxx は任意ですが、リンク元の xxx と同じにしてください)

移動先のタグは、特に <div></div> である必要は無くて、移動したい場所に ID属性(#)を設定してあげれば構いません。

今回は、全てのページに使っている <div id=”wrapper”> を移動先に指定しました。こうすれば、いちいち移動先タグを入れる必要がありません。

また、移動元の <a> タグは、別ファイルに「to_pagetop.php」とかで保存しておいて、「先頭へ戻る」リンクを追加したい場所に、

<?php include(‘to_pagetop.php’); ?>

でインクルードするようにしておけば、今後「先頭へ戻る」というテキストを変更したり、ボタン画像に置き換えたりする場合でも、「to_pagetop.php」だけを修正すれば、すべての「ページの先頭へ」リンクが変更されるので便利です。

スクロールの速度を変える

Smooth Scroll Links [SSL] をインストールしたままの状態だと、スクロールの速度が速いので、好みに応じて、

/wp-content/plugins/smooth-scrolling-links-ssl

の中にある、「smoothscroll.js」の一番下(から3行上)にある、

ss.STEPS = 50;

の値を変えることでスクロールスピードを変更できます。数値を大きくすればゆっくりに、数値を小さくすれば速くなります。(私は、100 にしてみました。)

個人的に、Smooth Scroll Links [SSL] がいいなと思ったのは、ニュルニュルスクロールをするために、固有のコードを入れる必要がないこと。

移動元のタグも、移動先のタグも、Smooth Scroll Links [SSL] 専用のタグではなくて、同一ページ内に移動する一般的な HTML タグです。

なので、すでにページ内リンクを設定している人は Smooth Scroll Links [SSL] をインストールすれば、勝手に全てのページ内リンクがニュルニュルスクロールするようになります。

参考:同じページ内にリンクする | TAG Index

このページの下にも「先頭へ戻る」のリンク(実際には画像「」)がありますので、ニュルニュルしてみてください。

でわでわ。







この記事にコメントする





Copyright © 2012 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.