jQueryを使ってWordPressブログに「ページトップへ戻る」ボタンを追加する

スポンサーリンク

「ページトップへ戻る」ボタン

jQueryを使ってWordPressブログに「ページトップへ戻る」ボタンを追加する方法をご紹介します。

長いブログ記事は縦長になりがちで、上下にいちいちスクロールさせるのが面倒ですし、メニューやボタンは大抵ページの先頭なので、「ページトップへ戻る」ボタンがあると便利です。

今時のWordPressブログ用テーマには、大抵「トップに戻る」ボタンが付いていますが、一からテーマを作る場合などは自分でボタンを追加しないといけません。参考にしてください。

スポンサーリンク

jQueryを使って「ページトップへ戻る」ボタンを追加

縱に長いホームページやブログ記事は、先頭に戻る時にいちいちスクロールさせないといけないので面倒です。他のページに移動したくても、メニューやボタンは大抵ページの先頭にありますよね。

「HOME」キーや「PageUp」キーを使えばいいのでは・・・はい、仰る通り。でも、この手のショートカットキーはあんまり知られてませんしね。

というわけで、Kowappaさんの記事を参考にして、jQueryを用いた「ページトップへ戻る」ボタンをつけることにしました。Kowappaさん、ありがとうございます。

参考 たったの10秒でできる!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による鉤縄のアニメーションとともに、ページトップに戻ります。普通じゃ物足りないかたはぜひ・・・

参考 【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE – Web Design Studio –

スポンサーリンク
PC用
PC用

フォローする

コメントの入力は終了しました。