wordpressにカウントダウンタイマーを設置【備忘録】

wordpressプラグインを使ってカウントダウンタイマーを表示させる方法

お勧めのプラグインは
「Uji Countdown」
です。

wordpressのプラグイン追加画面から
「Uji Countdown」を検索して追加しましょう。

Uji Countdownプラグインを使ったカウントダウンタイマーのサンプルを設置してみました。

東京オリンピック開会式までのカウントダウンタイマー

2020年7月24日　午後8時　開会式　⇒ 2021年7月24日　午後8時　開会式

[ujicountdown id="2021" expire="2021/07/23 00:00" hide="true" url="" subscr="20210723" recurring="" rectype="second" repeats=""]

22世紀までのカウントダウンタイマー

西暦2101年1月1日

[ujicountdown id="tokyo" expire="2101/01/01 00:00" hide="false" url="" subscr="22世紀までのカウントダウンタイマー" recurring="" rectype="second" repeats=""]

wordpressにカウントダウンタイマーを設置【備忘録】（Javascript）

次はこの賢威テンプレートで運営しているSEOブログにjavascriptでカウントダウンタイマーを設置してみます。

CSS

[css]

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%23jcd%20%7B%0Aheight%3A%20240px%3B%0Aline-height%3A%20240px%3B%0Aborder-top%3A%20%23ff0000%20solid%202px%3B%0Aborder-bottom%3A%20%23ff0000%20solid%202px%3B%0Amargin-bottom%3A%2060px%3B%0A%7D%0A%23jcd%20span%20%7B%0Afont-size%3A%20150%25%3B%0Acolor%3A%20%23ff0000%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

[/css]

Javascript

[js] <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20CountdownTimer(elm%2Ctl%2Cmes)%7B%0Athis.initialize.apply(this%2Carguments)%3B%0A%7D%0ACountdownTimer.prototype%3D%7B%0Ainitialize%3Afunction(elm%2Ctl%2Cmes)%20%7B%0Athis.elem%20%3D%20document.getElementById(elm)%3B%0Athis.tl%20%3D%20tl%3B%0Athis.mes%20%3D%20mes%3B%0A%7D%2CcountDown%3Afunction()%7B%0Avar%20timer%3D''%3B%0Avar%20today%3Dnew%20Date()%3B%0Avar%20day%3DMath.floor((this.tl-today)%2F(24*60*60*1000))%3B%0Avar%20hour%3DMath.floor(((this.tl-today)%25(24*60*60*1000))%2F(60*60*1000))%3B%0Avar%20min%3DMath.floor(((this.tl-today)%25(24*60*60*1000))%2F(60*1000))%2560%3B%0Avar%20sec%3DMath.floor(((this.tl-today)%25(24*60*60*1000))%2F1000)%2560%2560%3B%0Avar%20milli%3DMath.floor(((this.tl-today)%25(24*60*60*1000))%2F10)%25100%3B%0Avar%20me%3Dthis%3B%0Aif(%20(%20this.tl%20-%20today%20)%20%3E%200%20)%7B%0Aif%20(day)%20timer%20%2B%3D%20'%3Cspan%20class%3D%22day%22%3E'%2Bday%2B'%E6%97%A5%E3%81%A8%3C%2Fspan%3E'%3B%0Aif%20(hour)%20timer%20%2B%3D%20'%3Cspan%20class%3D%22hour%22%3E'%2Bhour%2B'%E6%99%82%E9%96%93%3C%2Fspan%3E'%3B%0Atimer%20%2B%3D%20'%3Cspan%20class%3D%22min%22%3E'%2Bthis.addZero(min)%2B'%E5%88%86%3C%2Fspan%3E%3Cspan%20class%3D%22sec%22%3E'%2Bthis.addZero(sec)%2B'%E7%A7%92%3C%2Fspan%3E%3Cspan%20class%3D%22milli%22%3E'%2Bthis.addZero(milli)%2B'%3C%2Fspan%3E'%3B%0Athis.elem.innerHTML%20%3D%20timer%3B%0Atid%20%3D%20setTimeout(%20function()%7Bme.countDown()%3B%7D%2C10%20)%3B%0A%7Delse%7B%0Athis.elem.innerHTML%20%3D%20this.mes%3B%0Areturn%3B%0A%7D%0A%7D%2CaddZero%3Afunction(num)%7B%20return%20('0'%2Bnum).slice(-2)%3B%20%7D%0A%7D%0A%0Afunction%20JCD()%7B%0Avar%20text%20%3D%20'2020%E5%B9%B4%E5%85%83%E6%97%A5%E3%81%BE%E3%81%A7%3A'%3B%0Avar%20tl%20%3D%20new%20Date('2020%2F01%2F01%2000%3A00%3A00')%3B%0Avar%20timer%20%3D%20new%20CountdownTimer('JCD'%2Ctl%2C'%E7%B5%82%E4%BA%86%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82')%3B%0Atimer.countDown()%3B%0Atarget%20%3D%20document.getElementById(%22text%22)%3B%0Atarget.innerHTML%20%3D%20text%3B%0A%7D%0A%0Awindow.onload%3Dfunction()%7B%0AJCD()%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

[/js]

賢威テンプレートversion７の場合の記入個所

今現在このSEOブログで使っている賢威のversionは7です。

賢威7の場合ダッシュボード内にある

「この投稿だけの個別CSS/JS記述欄」に

上記のCSSとJavascriptを記入する

記述された内容がそのまま出力されるので、CSSであれば<style>タグ、JavaScriptの場合は<script>タグが必要です。

HTMLの記述

[html]

&lt;div id="jcd"&gt;
&lt;span class="timetext" id="text"&gt;&lt;/span&gt;&lt;span id="JCD"&gt;&lt;/span&gt;
&lt;/div&gt;

[/html]

ダッシュボードの本文欄に上記のコードを記述