WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方

最近、後学のためにWordpressのテーマを作ってます。

ちょうど「トップへ戻る」ボタンをつけたいと思っていた時に、仕組みを非常にわかりやすく解説してある良い記事を見つけました。

初心者でも分かる！なjQuery「TOPへ戻るボタン」の作り方 – Syncer

ちなみに、「トップへ戻る」ボタンというのは、ページを下にスクロールすると右下にスーっと出てきて、クリックするとページの一番上にスクロール移動するやつです。

で、上で書かれている方法をWordpressでもやってみたのですが、正常に動きません。

どうやら、jQueryを書くときWordpressでは特有の書き方をしなければいけないようです。

ということで、上で紹介してある「トップへ戻る」ボタンをWordpressテーマでも使えるようにしたものを載せておきたいと思います。（※多少コードを修正してある箇所もあります）

photo by Daniel Morrison

ボタンデザインの準備

まずは、右下に出すボタンデザインを準備します。

以下のようなHTMLタグを、footer.phpの</body>手前あたりに貼り付けておきます。

<div id="page-top">
  <a id="move-page-top">▲</a>
</div>

次にCSSでスタイルを設定します。style.cssあたりに以下を追記します。

/****************************************

          TOPへ戻るボタン（Go to top）

*****************************************/
#page-top{
    position:fixed;
    right:16px;
    bottom:16px;
    display: none;
    z-index:9999;
}

#page-top a{
    color:#fff;
    padding:10px;
    text-decoration:none;
    display:block;
    cursor:pointer;
    text-align:center;
    background:#aaa;
    line-height:100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
     -moz-border-radius: 5px; 
}

#page-top a:hover{
    background:#8b8b8b;
    -webkit-transition:all 0.3s;
    -moz-transition:all 0.3s;
    transition:all 0.3s;
}

この状態で以下のようなボタンが準備されました。

ただ、表示を非表示にしてあるので、この状態ではボタンは表示されません。

これを表示させるには、jQueryなどで表示を動的に制御します。

jQueryを使用する準備

WordPressテーマ内でjQueryを使用するにはちょっとした準備が必要です。

まずは、テーマフォルダ内にJavaScript（jQuery）を記述するためのファイルを作成します。

jQueryは、<script type=”text/javascript”></script>のタグ内に書いてページに埋め込んでもいいのですが、後の編集のしやすさのため外部ファイルに記入することにします。

今回は、テーマフォルダ内にjavascript.jsというファイルを作成しました。

まずは、header.phpの<head></head>の間、<?php wp_head(); ?>という記述のあとに、以下のコードを追加してください。

<script src="<?php echo get_template_directory_uri(); ?>/javascript.js" charset="UTF-8"></script>

wp_head();で、Wordpressシステム内にあらかじめ用意されている、jQueryファイルを呼び出します。

そのあとjavascript.jsファイルを呼び出しています。順番が反対になると、動作しないので注意してください。

ページ移動用のjQueryを書く

javascript.jsにjQueryを書いていくわけなんですが、冒頭で紹介したページのjQueryの書き方では、Wordpressでは動作しません。

というのも、Wordpressでは、

$(function(){});

というような$を使用した記述は使えないからです。

その理由として、WordpressはJavaScriptライブラリとしてjQueryとprototype.jsという2つを使用しています。その2つのライブラリで共通して$を使用しているため衝突（コンフリクト）を起こすのだそうです。

詳しくは以下に丁寧に書いてあります。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

ということで、衝突を回避するためにWordpressではjQueryを記述するときに$の代わりに以下のような書き方をする必要があります。

jQuery(function(){});

この書き方で、jQueryを書き直したものが以下です。これをjavascript.jsに記入します。

jQuery(function(){
  jQuery(window).scroll(function(){
    //最上部から現在位置までの距離を取得して、変数[now]に格納
    var now = jQuery(window).scrollTop();
    //最上部から現在位置までの距離(now)が600以上
    if(now > 600){
      //[#page-top]をゆっくりフェードインする
      jQuery('#page-top').fadeIn('slow');
      //それ以外だったらフェードアウトする
    }else{
      jQuery('#page-top').fadeOut('slow');
    }
  });
  //ボタン(id:move-page-top)のクリックイベント
  jQuery('#move-page-top').click(function(){
  //ページトップへ移動する
  jQuery('body,html').animate({
          scrollTop: 0
      }, 800);
  });
});

これでWordpressでも問題なく動作すると思います。

javascript.jsのような外部ファイルを作成するのが面倒くさい場合は、ページに直接以下のようにコードを埋め込んでも動作します。

<script type="text/javascript">
jQuery(function(){
  jQuery(window).scroll(function(){
    //最上部から現在位置までの距離を取得して、変数[now]に格納
    var now = jQuery(window).scrollTop();
    //最上部から現在位置までの距離(now)が600以上
    if(now > 600){
      //[#page-top]をゆっくりフェードインする
      jQuery('#page-top').fadeIn('slow');
      //それ以外だったらフェードアウトする
    }else{
      jQuery('#page-top').fadeOut('slow');
    }
  });
  //ボタン(id:move-page-top)のクリックイベント
  jQuery('#move-page-top').click(function(){
  //ページトップへ移動する
  jQuery('body,html').animate({
          scrollTop: 0
      }, 800);
  });
});
</script>