ページのTOPへ戻るリンクを見直すことに。
ワードプレスのプラグインの数が増えてきたので、必要のないプラグインを削除することにしました。ザッと使用中のプラグインを確認してみると、別にプラグインを利用しなくても良いかなと思えるモノがチラホラとあります。
【Dynamic To Top】もそんな中の一つでした。
このプラグインは「ページのTOPへ戻るリンク」をサイトの右下に表示させるためのもの。
サイトを立ち上げた当初に導入したのですが、別にプラグインを使用しなくても設置できます。
そこで【Dynamic To Top】を削除して、プラグインを使わない形で実装することにしました。
今回はプラグインを使用せず「ページのTOPへ戻るリンク」を設置する方法をご紹介します。
jQueryでページのTOPへ戻るリンクを実装してみた。
ちょっと分かりにくいですが、上記画像の右下にあるのがTOPへのリンクです。
設置方法はメチャクチャ簡単です。
何かをダウンロードしたりアップロードする必要はありません。
WordPressの管理画面からコピペだけで実装可能でした。
編集するファイルは、テーマファイルの中にある【footer.php】です。
HTML
まず、footer.phpの【</body>】より上の部分に以下のコードを設置します。
<a href="#top" class="page_top">▲</a>【▲】の部分は自由に編集してください。
【TOPへ】などテキスト形式にしても大丈夫です。
Javascript
続いてJavascriptを設置します。
まずは、jQueryを読み込むコードを記述しましょう。
設置する箇所はヘッダー.phpでも良いのですが、今回はfooter.phpに記述します。
以下のコードを記述してください。
<script async src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>続いて処理を記述します。
<script async>
$(function() {
var pageTop = $('.page_top');
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$('body, html').animate({scrollTop:0}, 500, 'swing');
return false;
});
});
</script>ここまでの作業で「ページのTOPへ戻るリンク」は設置できています。
続いて、リンク部分の装飾をCSSで行います。
CSS
HTMLでリンク部分に「.page_top」を設定していますので、「.page_top」をCSSに追記して好みの装飾を行いましょう。以下のコードは実際にこのサイトで採用している装飾になります。
.page_top {
position:fixed;
bottom:10px;
right:10px;
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color:#fff;
font-size:20px;
text-decoration:none;
background:#2EA2CC;
border: 3px solid #ffffff;
text-align: center;
line-height: 50px;
}装飾は自由に定義してください。
CSSで装飾が完了すれば「ページのTOPへ戻るリンク」の設置は完了です。
お疲れ様でした。
まとめ
ページのTOPへ戻るリンクを再設置してみました。
今回の作業を行うにあたり「【jQuery】スクロールすると現れるページトップへボタンの設置方法」を参考にさせていただきました。
非常に簡単に設置できますので、ぜひ実践してみてください。
プラグインの数も減らせるので、今回の様なカスタマイズは個人的にはオススメです。
Google検索結果のタイトル下にサイトリンクが表示される条件とは？
押し間違いを回避！WordPressの「下書きとして保存」を目立たせろ！
コメントを残す