TwentyTwelveにページトップへのスクロール機能を追加

WordPress のテーマ TwentyTwelve にページトップへのスクロールボタンを追加する方法です。

今回は WordPress のプラグインを使わずに jQuery を使ってスクロール機能を実装します。

完成イメージはこんな感じです。

ページトップスクロールの完成イメージ

1 TwentyTwelveにスクロール機能を追加する方法

TwentyTwelveにスクロール機能を追加する方法

スクロール機能を追加するには jQuery のコード, functions.php, footer.php, スタイルシートを追加・修正していきます。

TwentyTwelveにオリジナルのjavaスクリプトを読みこませる

TwentyTwelve 子テーマ内に js/ ディレクトリを作成しページスクロール用の java スクリプトを設置します。

java スクリプトのファイル名は scroll-top.js にしました。

# cd wp-content/themes/twentytwelve-child
# mkdir js
# vi js/scroll-top.js

scroll-top.js は下記内容で保存します。

jQuery(function() {
    var topBtn = jQuery('#scroll-top');
    topBtn.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 500) {
            topBtn.fadeIn('slow');
        } else {
            topBtn.fadeOut('slow');
        }
    });
    topBtn.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

次に functions.php で scroll-top.js を読み込むための設定をします。

if (!is_admin()) {

    function register_script(){

        wp_register_script('google-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js');
        wp_register_script('scroll-top', get_stylesheet_directory_uri().'/js/scroll-top.js');

    }

    function add_script() {

        register_script();
            wp_enqueue_script('google-jquery');
            wp_enqueue_script('scroll-top');

    }

    add_action('wp_print_scripts', 'add_script');

}

register_script で利用したい java スクリプトを登録して add_action(‘wp_print_scripts’, ‘add_script’); で実際に読み込ませます。

この例では管理ページ以外すべて (!is_admin()) で google-jquery, scroll-top を読み込む設定になります。

function 内に条件分岐を追加すればページ毎に異なる java スクリプトを読み込ませる事ができるので便利です。

注意点

jQuery のバージョンは各環境に合わせる必要があります。すでに jQuery を利用したプラグインを導入している場合は動作に不具合がでないかをチェックします。

スタイルシートでボタンの装飾をする

次にスタイルシートの末尾に下記を追加してスクロールボタンを装飾します。

#scroll-top {
    position: fixed;
    bottom: 20px;
    bottom: 1.428571428571429rem;
    right: 20px;
    right: 1.428571428571429rem;
    filter: alpha(opacity=80);
    -moz-opacity:0.80;
    opacity:0.80;
    font-size: 200%;
    display: none;
}
#scroll-top a {
    width: 25px;
    width: 1.785714285714286rem;
    height : 25px;
    height : 1.785714285714286rem;
    padding: 15px 15px 10px 15px;
    padding: 1.071428571428571rem 1.071428571428571rem 0.7142857142857143rem 1.071428571428571rem;
    border-radius: 45px 45px 45px 45px;
    border-radius: 3.214285714285714rem 3.214285714285714rem 3.214285714285714rem 3.214285714285714rem;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0.0714285714285714rem 0.0714285714285714rem 0.0714285714285714rem rgba(0, 0, 0, 0.2);
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #346ea8;
    display: block;
}
#scroll-top a:hover {
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0.0714285714285714rem 0.0714285714285714rem 0.0714285714285714rem rgba(0, 0, 0, 0.2);
    text-decoration: none;
    background: #567fa8;
}

これでスタイルシートの修正は以上です。

footer.phpの修正

最後にスクロールボタンを表示させる html を追加します。

全ページに表示させたいので今回は footer.php に追加することにしました。

footer.php は TwentyTwelve 親テーマから子テーマ内にコピーして修正します。

# cd wp-content/themes/twentytwelve-child
# cp ../twentytwelve/footer.php .

挿入するコードは下記の一行です。

ボタンに表示させる文字は「＾」としましたがここはお好みで。「Page Top」等の文字列にする場合はスタイルシートでボタンのサイズ、フォントサイズ等を調整してください、

<p id="scroll-top"><a href="#">^</a></p>

footer.php の 14 行目に追加しました。

</div><!-- #main .wrapper -->
<p id="scroll-top"><a href="#">^</a></p>
<footer id="colophon" role="contentinfo">

これで TwentyTwelve の全ページにスクロール機能が追加されます。

動作確認をして問題がなければこれで完了です。

参考にしたページ

jQueryでスクロールすると表示する系いろいろ