2022.2.12 更新
Photo on Foter.com
皆さまごきげんよう。
本日は前回作った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で作ったカウントダウンタイマーをワードプレスに実装する” への2件の返信