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

2022.2.12 更新

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

jsファイルをワードプレスに実装する

前回作った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();//関数を呼び出す

jsファイルを作る時の注意事項として、ワードプレスで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()（子テーマを使っている場合）
get_template_directory_uri()（親テーマを使っている場合）
jsファイルのパス

は、ご自分の指定に変えて下さいね。

外部ファイル、get_stylesheet_directory_uri()についてはこちらの記事もご覧ください。

ワードプレスの背景に雪を降らせてみよう

phpファイルに表示させる場所を作る

表示したい場所をディベロッパツールなどで調べます。私の場合はメニューバーに表示させたかったので、その辺りの要素を調査してみました。

メニューリストの後</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ファイルの変更する箇所は、開催日の日時と表示させるテキストの文言だけです。このファイル一つあれば、色々と活用できてとても便利です。

ここまでお疲れさまでした！ではまた次回お会いしましょう。

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

目次

jsファイルをワードプレスに実装する

ワードプレスに外部ファイルを読み込ませる

phpファイルに表示させる場所を作る

cssで位置を整える

いいね: