Twentyfifteenからテーマ作成－上に戻るボタンをつける

ネット上のほとんどのページは縦にスクロールしないと全文を読むことができません。

さらに最近は「無限スクロール」なんて見せ方もあって、スクロールするたびに下からもりもりとコンテンツが表示され、気が付くとブラウザのスクロールバーの短さがとんでもないことになって自分いまドコ？状態になったりします。

そのためページの一番上に戻るボタンを設置してユーザーの負担を軽くします。

WordPressに「上に戻る」ボタンを設置する一番簡単な方法はプラグインを利用することですが、どうにも好みのデザインのものがないので、jQueryで実装することにしました。

ちなみに、参考までに自分が試したトップに戻るプラグインはこちら。

WordPress.org プラグインディレクトリ/Scroll Back To Top

日本語化はされていませんが、設定する項目はCSSで使われる言葉とほぼ同じなので問題はないかと思います。

大きさや色、表示したい記号や文字を指定できます。

Twentyfifteenのままで設置するのであればそのまま使ってもいいんですが、自作デザインに合うようにはカスタマイズできなかったので、プラグインはやめて自前で設置することにしました。

まずはJavascriptファイルの設置。
TwentyfifteenにはJavascriptをまとめて格納しているフォルダ “js” があるので、その中に新規ファイルを作成しました。

js > scroll-to-top.js

この中にJavascriptを記述していきますが、WordPressでjQueryを使用する場合、関数に $ を使うと動作しないという問題があります。
jQueryのプラグインを複数設置するとコンフリクト（衝突）が発生することがありますが、WordPressにはあらかじめjQueryが組み込まれていて、それと新規設置するJavescriptファイルがコンフリクトしてしまうようです。

と書いておきながら自分はjQueryに全然詳しくないので、以下のサイトで勉強させていただいて理解することができました。

寝ログ/WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方
Kachibito.net/WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例

問題が解決したところで、上記のサイトの情報を参考にしてscroll-to-top.jsの中に以下を記述。

jQuery(function(){
  jQuery(window).scroll(function(){
    var now = jQuery(window).scrollTop();
    if(now > 50){
      jQuery('#page-top').fadeIn('slow');
    }else{
      jQuery('#page-top').fadeOut('slow');
    }
  });
  jQuery('#move-page-top').click(function(){
  jQuery('body,html').animate({
          scrollTop: 0
      }, 200);
  });
});

jQuery(function(){

jQuery(window).scroll(function(){

var now = jQuery(window).scrollTop();

if(now > 50){

jQuery('#page-top').fadeIn('slow');

}else{

jQuery('#page-top').fadeOut('slow');

}

});

jQuery('#move-page-top').click(function(){

jQuery('body,html').animate({

scrollTop: 0

}, 200);

});

通常$と記述することが多い関数はjQueryで記述。
50移動するとボタンが現れるようにしました。

この作成したファイルをページに読み込ませるには、header.phpで読み込む方法もありますが、自分はfunctions.phpに以下のとおり記述。

function scrolltotop() {
  if ( !is_admin() ) {
    wp_enqueue_script( 'scroll-to-top', get_template_directory_uri() . '/js/scroll-to-top.js', array( 'jquery' ), '',  true );
} }
add_action('wp_head', 'scrolltotop');

function scrolltotop() {

if ( !is_admin() ) {

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

} }

add_action('wp_head', 'scrolltotop');

管理画面以外のヘッダ部分でjsファイルを読み込むようにしています。
参考にさせていただいたサイトはこちら。

dogmap.jp/wp_enqueue_script のススメ
wpbeginner/How to Add a Smooth Scroll to Top Effect in WordPress using jQuery （英語）

上記で設置したjsファイルを実行するボタンはfooter.phpの最後に以下のように記述。

<div id="page-top">
  <a id="move-page-top"><span class="genericon genericon-collapse"></span></a>
</div>

</div>

spanに入れているのは、Twentyfifteenに同梱されているwebフォント、genericonの上向き記号です。
以下の提供元サイトでCSSとHTMLを簡単に取得できます。

Genericons

見栄えは以下のように指定します。サイトに実装しているのは色付きですが、本記事用にTwentyfifteenぽくしています。

#page-top{
  position:fixed;
  right:8px;
  bottom:-2px;
  z-index: 999;
  display: none;
}

#page-top span {
  font-size: 24px;
}
 
#page-top a{
  color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.6);	
  padding:4px 8px 4px 8px;
  margin: 0;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  line-height:100%;
  border-top: 1px solid rgba(255,255,255,.4);
  border-right: 1px solid rgba(255,255,255,.4);
  border-left: 1px solid rgba(255,255,255,.4);
  border-radius: 8px 8px 0 0;
  box-shadow: -1px -1px 1px 0 rgba(100,100,100,.4);
}
 
#page-top a:hover,
#page-top a:focus {
  bottom: 2px;
  background:rgba(0,0,0,.4);	
  padding:4px 8px 6px 8px;
  box-shadow: -2px -2px 1px 0 rgba(200,200,200,.2);
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  transition:all 0.3s;
}

#page-top{

position:fixed;

right:8px;

bottom:-2px;

z-index: 999;

display: none;

}

#page-top span {

font-size: 24px;

}

#page-top a{

color:rgba(255,255,255,.6);

background:rgba(0,0,0,.6);

padding:4px 8px 4px 8px;

margin: 0;

text-decoration:none;

display:block;

cursor:pointer;

text-align:center;

line-height:100%;

border-top: 1px solid rgba(255,255,255,.4);

border-right: 1px solid rgba(255,255,255,.4);

border-left: 1px solid rgba(255,255,255,.4);

border-radius: 8px 8px 0 0;

box-shadow: -1px -1px 1px 0 rgba(100,100,100,.4);

}

#page-top a:hover,

#page-top a:focus {

bottom: 2px;

background:rgba(0,0,0,.4);

padding:4px 8px 6px 8px;

box-shadow: -2px -2px 1px 0 rgba(200,200,200,.2);

-webkit-transition:all 0.3s;

-moz-transition:all 0.3s;

transition:all 0.3s;

}

半透明なのでサイドバーなど下のコンテンツが透けて見えます。
またhoverの影を薄くしてタブが持ち上がるような感じにしています。気付かないくらいの感じがデジタルっぽくないかなと。

なお、プラグインでHead Cleanerを使用している場合は動作しなくなるので、scroll-to-top.jsを除外ファイルにしてください。

関連