WordPress にプラグインなしでトップに戻るボタンを設置する

2015年9月27日カテゴリー : WordPress コメント : 0

　WordPress でページの先頭に戻るボタンを設置するなら、プラグインの「Scroll To Top」が有名ですが、最近プラグインが多すぎるかなと思い、自作することにしました。

こちらの~~サイトを丸パクリ~~サイトが非常にわかりやすくて参考にしたのですが、一部修正しないと動作しなかったのでメモしておきます。テーマは Twenty Fifteen を使用しました。

footer.php の編集

次のソースコードをお使いのテーマの footer.php に追記します。

<div id="page-top" class="page-top">
    <p><a id="move-page-top" class="move-page-top">TOP</a></p>
</div>

</div>

「wp_footer()」より後ならどこでもよいようです。今回は「</body>」の直前に置きました。

ボタンの作成

テーマの style.css をテキストエディタなどで開き、次のソースコードを追記します。

.page-top {
    margin: 0;
    padding: 0;
}

.page-top p {
    margin: 0;
    padding: 0;

    position: fixed;
    right: 20px;
    bottom: 20px;
}

.move-page-top {
    display: block;
    background: #fe56aa;
    width: 150px;
    height: 50px;

    color: #fff;
    line-height: 50px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.move-page-top:hover {
    opacity: 0.85;
}

.page-top {

margin: 0;

padding: 0;

}

.page-top p {

margin: 0;

padding: 0;

position: fixed;

right: 20px;

bottom: 20px;

}

.move-page-top {

display: block;

background: #fe56aa;

width: 150px;

height: 50px;

color: #fff;

line-height: 50px;

text-decoration: none;

text-align: center;

cursor: pointer;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

.move-page-top:hover {

opacity: 0.85;

}

ボタンの色、大きさ、表示位置はお好みでどうぞ。まだ JavaScript のソースを書いていないので、単純にボタンが画面に表示されるだけです。

ボタンが表示されるか確認したら、style.css を開きます。

.page-top p {
    ～ 省略 ～
    
    display: none;
}

.page-top p {

～省略～

display: none;

}

先ほど編集した部分に次の一文を追記して、ボタンを非表示にしておきます。

function.php の編集

　ボタンの動作を実現する方法はいろいろあるとは思いますが、今回は WordPress に標準でインストールされている jQuery を利用します。WordPress の jQuery を使うには、次のソースコードを function.php に追記します。

function load_jquery(){
    wp_enqueue_script('jquery');
}
add_action('init', 'load_jquery');

function load_jquery(){

wp_enqueue_script('jquery');

}

add_action('init', 'load_jquery');

テーマが Twenty Fifteen の場合はこの編集は不要です。Twenty Fifteen はデフォルトで jQuery を読み込んでいるからです。プラグインにも jQuery を読み込むものがあるので、この編集をする前に HTML のソースを確認してください。

JavaScript ファイルの作成

　Twenty Fifteen のテーマフォルダの中には「js」というフォルダがあるので、その下に「scroll-top.js」という JavaScript ファイルを作成しました。文字コードは Shift-JIS、改行コードは LF ONLY で保存しました。

ソースコードは次のようにしました。

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var a = $(window).scrollTop();
        if (a > 1000) {
            // 「#page-top」だと動作しない
            $(".page-top p").fadeIn("slow");
        } else {
            $(".page-top p").fadeOut("slow");
        }
    });
    
    $("#move-page-top").on("click", function(){
        $("html, body").animate({scrollTop:0}, "slow");
    });
});

jQuery(document).ready(function($) {

$(window).scroll(function() {

var a = $(window).scrollTop();

if (a > 1000) {

// 「#page-top」だと動作しない

$(".page-top p").fadeIn("slow");

} else {

$(".page-top p").fadeOut("slow");

}

});

$("#move-page-top").on("click", function(){

$("html, body").animate({scrollTop:0}, "slow");

});

　WordPress の jQuery は、他の JavaScript ライブラリとのコンフリクトを防ぐために、通常の jQuery の記述方法とは少し違うことに注意してください。よそから jQuery のソースコートをもってきてコピペしても動作しない、ということがよくあります。

　画面の上面がページの上部から 1000px 離れるとボタンを表示します。1000px より上にいけばボタンは非表示になります。ボタンを押せばページの先頭に戻るだけのシンプルなソースコードです。「こんなしょっぱいソースコードじゃ使い物にならん」と思われた方は、遠慮なく書き直してください。

あと常識かもしれませんが、私が思いっきりハマったので一応メモ。先ほど style.css で .page-top p に display: none; を追記しましたが、

$("#page-top").fadeIn("slow");

1	$("#page-top").fadeIn("slow");

と指定しても動作しません。どうしても動作させたいのなら、.page-top p の display: none; を削除し、次のようにスタイルを指定します。

#page-top {
    display: none;
}

#page-top {

display: none;

}

fadeIn は display: none; を指定したセレクタに対して動作する、ということだと思います。jQuery の仕様が変わったのか、複数のページを参考にしているうちに私が指定し間違ったのかわかりませんが、JavaScript がうまく動作しないというときには確認してみてください。

WordPress に JavaScript を読み込む

WordPress に作成した JavaScript を読み込ませます。function.php に次のソースコードを追記してください。

function scroll_top() {
    wp_enqueue_script('scrollscript', get_template_directory_uri().'/js/scroll-top.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'scroll_top');

function scroll_top() {

wp_enqueue_script('scrollscript', get_template_directory_uri().'/js/scroll-top.js', array('jquery'), '1.0', true);

}

add_action('wp_enqueue_scripts', 'scroll_top');

wp_enqueue_script 関数の第１引数はハンドル名で、他のハンドル名とかぶらなければ好きに付けることができます。第３引数では依存関係を指定します。今回の JavaScript で言うなら、jQuery がなければ動作できないので、array(‘jquery’) と書くことで scroll-top.js が jQuery より後で読み込まれます。第５引数を true にすると JavaScript は </body> の前のエリアで読み込まれるようになります。外部 JavaScript ファイルへのリンクをフッターに記述して、ページの表示速度をアップするお馴染みのテクニックです。