Photo on Foter.com
皆さまごきげんよう。
本日は前回作った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の小ネタを増やしていこうと思います。
ではまた次回お会いしましょう(^^)/