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

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というファイルを作成しました。

JavaScriptファイル

まずは、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>

「トップへ戻る」ボタンに使えそうな矢印素材

Syncerにて、ボタンで使用できそうな矢印素材も載っていたので併せて紹介します。

WEBアイコンフォントのFont Awesomeにも以下のように矢印フォントが沢山あるのでこれを使用してもいいかもしれません。

矢印WEBフォント

僕はこれを使用しています。

利用の仕方は、Get StartedExamplesを見るとおおよそわかります。

まとめ

最初、Wordpressでも解説通りに記述していたらjQueryが動かなくて少しハマりました。

ただ、原因さえ分かってしまえば、$を使わないようにすればいいだけなので、すぐに修正できると思います。

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

  1. 名前:taniyama 投稿日:2017/03/23(木) 13:48:19 ID:cbaf0aad9
      

    記事中のですが、っているのでしょうか・・。すいません。

  2. 名前:わいひら 投稿日:2017/03/24(金) 12:45:04 ID:bc1aa79cd

    見たところ、完全に不要のようです^^;
    当ページに書いたものは、以前別のWordpressテーマで使っていたものを汎用に書き直したので、修正し損ねたようです。
    教えていただきありがとうございます!
    すぐに修正しておこうと思います。