javascriptで作ったカウントダウンタイマーをワードプレスに実装する

皆さまごきげんよう。
本日は前回作ったjavascriptのカウントダウンタイマーをワードプレスに実装してみます。
前回の記事はこちら javascriptでカウントダウンタイマーを作る

ワードプレスに実装してみる

前回作ったscriptの部分を、新たにjsファイル(○◯.js)にしてFTPサーバの任意の場所に保存します。


   function countdowntimer(){
     var countdown = setTimeout(function(){
      var today = new Date();//今の日時
      var targetDay = new Date('2020/7/24 20:00:00');//開催日の日時
      var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
      var remainDay = (targetDay - today);//残り日時

      if (remainDay >= 0){//もし残りの日時が0より多かったら、
      var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h=3600000ms)
      var h1 = h % 24;//hを24で割った余り。ここでは使っていないが、残り○時間を取得したい時に。
      var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分=60000 ms)
      var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒=1000ms)
      jQuery("#countdown").html("2020東京五輪まであと" + daysBetween + "日です!");//文中にhtmlタグを使いたい場合はhtmlメソッド使う
      if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
       clearTimeout(countdown);//カウントダウン止める
       jQuery("#countdown").text("2020東京五輪開催です!");//htmlに出力
       }
      }else{//指定の日時が過ぎてもテキストを表字させる用
        jQuery("#countdown").text("祝2020東京五輪開催!");
       }
     }, 1000);//処理を1秒後に予約
   }
   countdowntimer();//関数を呼び出す

その時に、ワードプレスでjQueryを使う場合のお約束として$をjQueryと書き換えることをお忘れなく!
これが原因で動かないー!っていうことがよくあります(笑)

外部ファイルを読み込む

先ほどFTPに上げたjsファイルを読み込ませる記述をheader.phpの中に書きます。
外部ファイルを読み込ませるには、このブログでもおなじみになってきた感のwp_enqueue_scriptですね!
下記のように、<?php wp_head(); ?>の上に書き加えます。
こんな感じです。↓


<?php
 wp_enqueue_script( 'js-countdown',get_stylesheet_directory_uri()."/js/js-countdown.js", array( 'jquery' ));
?>
<?php wp_head(); ?>

jsファイル名、(子テーマを使っているなら)get_stylesheet_directory_uri()、jsファイルのパス、はご自分の指定に変えて下さいね。

外部ファイル、get_stylesheet_directory_uri()についてはこちらの記事もご覧ください。
ワードプレスの背景に雪を降らせてみよう

表示させる場所を作る

表示したい場所をディベロッパツールなどで調べます。
私の場合はメニューバーだったので、その辺りの要素を調査してみるとメニューリストの後</nav>の後ろに入れると良さそうだ、と見当がついたので
メニューバーの記述があるheader.phpの中の</nav>のwrapが閉じる直前に新しく<div>を作り、IDをcountdownと名付けました。
実際はこんな感じです。


<div id="countdown"></div>				
</div><!-- .wrap -->
</div><!-- .navigation-top -->

例えばフッターに出力したければ、書き加えるファイルはfooter.phpだろうな、と見当がつきます。
フッター部分をディベロッパツールで調べたら、footer.phpの中の表示したい箇所に新しく<div>を作り、IDを付けてスタイルシートにcssで位置や見た目を整えれば良いのです。

もちろんこれは一例で、使っているテーマによってphpファイルの名前も違いますから、どのphpファイルに書き加えるかは調べて見つけて下さいね。

cssで整える

このままでは変な位置に表示されてしまいますので、cssで形を整えていきます。
今回はこれだけでちょうど良い位置に収まりました。


#countdown{/*オリンピックカウントダウンjs*/
    color: #FF5F6D;
   text-align: right;
    margin-top: -1em;
}

いかがだったでしょうか?
意外と簡単に好きなところに出力出来ますね♪
これからも少しずつこのブログで実験しつつ、jsの小ネタを増やしていこうと思います。
ではまた次回お会いしましょう(^^)/

コメントを残す