jQueryを使ってWordPressブログに「ページトップへ戻る」ボタンを追加する方法をご紹介します。
長いブログ記事は縦長になりがちで、上下にいちいちスクロールさせるのが面倒ですし、メニューやボタンは大抵ページの先頭なので、「ページトップへ戻る」ボタンがあると便利です。
今時のWordPressブログ用テーマには、大抵「トップに戻る」ボタンが付いていますが、一からテーマを作る場合などは自分でボタンを追加しないといけません。参考にしてください。
jQueryを使って「ページトップへ戻る」ボタンを追加
縱に長いホームページやブログ記事は、先頭に戻る時にいちいちスクロールさせないといけないので面倒です。他のページに移動したくても、メニューやボタンは大抵ページの先頭にありますよね。
「HOME」キーや「PageUp」キーを使えばいいのでは・・・はい、仰る通り。でも、この手のショートカットキーはあんまり知られてませんしね。
というわけで、jQueryを使って「ページトップへ戻る」ボタンをつけることにしました。
今回は、WordPressのブログテーマ「twentytwelve」に「ページトップへ戻る」ボタンを埋め込むという前提で解説します。他のテーマでもやり方は大体同じですが、細部はそれぞれのテーマに合わせて変更してください。
「ページトップへ戻る」ボタン footer.phpに追記
まずはfooter.phpの13行目にある ＜/div＞＜!－－ #main .wrapper －－＞ の手前に ＜a id=”pageTop” href=”#main”＞ページトップへ＜/a＞ を追記します。13行目付近はこんな感じになります。
?> <a id="pageTop" href="#main">ページトップへ</a> </div><!-- #main .wrapper --> <footer id="colophon" role="contentinfo">
href=”#main” の”#main”は、一番最初のメインコンテンツ表示領域の＜div id＞を指定してください。
「twentytwelve」の場合はヘッダの一番最後にある ＜div id=”main” class=”wrapper”＞ を指定します。一番最初のメインコンテンツ表示領域の＜div id＞はテーマによってそれぞれ違うので、それに合わせて変更してください。
「ページトップへ戻る」ボタン CSSに追記
次は、以下をCSSに追加します。いわしはstyle.cssの679行目にある「Main content and comment content」のすぐ下に追記しました。
/* =Main content and comment content
-------------------------------------------------------------- */
#pageTop{
background:#98FB98;
border-radius:5px;
color:#ffffff;
padding:20px;
position:fixed;
bottom:20px;
right:20px;
}
#pageTop:hover{
background:#228B22;
}
#pageTop の background:#98FB98; は、ボタンのベース色を指定しています。color:#ffffff; は、文字「ページトップへ」の色です。
#pageTop:hover の background:#228B22; は、ボタンのハイライト色です。上のサンプルは緑系の色を使用しています。テーマの背景色に合わせて、ボタンも見やすい色に変更してください。
「ページトップへ戻る」ボタン JavaScriptファイル
続いて、テキストエディタで「pagetop.js」ファイルを作成します。中身は下記のコードをそのまま記入してください。
<script type="text/javascript">
$(function() {
var topBtn = $('#pageTop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>
scrollの数値100は、画面上部から100スクロールするとボタンを表示するということです。数字を変えれば、ボタンが表示されるタイミングを変更できます。
animateの数値1000は、1000ミリ秒かけてページトップに戻るということです。数字を変えれば、ページトップに戻るスピードを変更できます。
「ページトップへ戻る」ボタン JavaScriptのアップロード
最後はJavaScriptのアップロードです。まずは作成した pagetop.js ファイルを「index.php」と同じ場所にアップロードします。続いて、JavaScriptの読み出しコードをヘッダに追記します。
<script type="text/javascript" src="http://自分のアドレス/pagetop.js"></script>
twentytwelveの場合は、26行目の ＜link rel=”pingback” href=”＜?php bloginfo( ‘pingback_url’ ); ?＞” /＞ の下に追記します。26行目付近はこんな感じになります。
<link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <script type="text/javascript" src="http://自分のアドレス/pagetop.js"></script> <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> <!--[if lt IE 9]>
はい、これで右下に「トップに戻る」ボタンが付きました。スマホやタブレットでもちゃんと表示されます。
遊び心のある「ページトップへ戻る」ボタン
さらに、SQUEEZEさん作のjqueryとCSS3アニメーションを用いた、こんな遊び心のある「ページトップへ戻る」ボタンも紹介しておきます。
「ページトップへ戻る」をクリックすると、jqueryによる鉤縄のアニメーションとともに、ページトップに戻ります。普通じゃ物足りないかたはぜひ・・・
