コピペOK ショートコードでカウントダウンを表示

2019年10月11日

wordpressのビジュアルエディタ部分にコードを貼り付けるとカウントダウンを行います。オシャレなカウントダウンをやるプラグインは多数ありますが「文字でいいんだよ!」という人向けの内容です。
こんな感じになります。

平壌(韓国)オリンピック開催日まで [hoge num1=countdown num2=2018-2-9 num3=00:00 num4=過ぎました]
東京(日本)オリンピック開催日まで [hoge num1=countdown num2=2020-7-24 num3=00:00 num4=過ぎました]
北京(中国)オリンピック開催日まで [hoge num1=countdown num2=2022-2-4 num3=00:00 num4=過ぎました]
パリ(フランス)オリンピック開催日まで [hoge num1=countdown num2=2024-7-26 num3=00:00 num4=過ぎました]
ローザンヌ(スイス)オリンピック開催日まで [hoge num1=countdown num2=2026-2-6 num3=00:00 num4=過ぎました]
ロサンゼルス(アメリカ)オリンピック開催日まで [hoge num1=countdown num2=2028-7-21 num3=00:00 num4=過ぎました]

(開催日の0:00に設定しています)

ビジュアルエディタ

num1は変更不可。
num2は「年月日」を指定
num3は「時間」を指定
num4はカウントダウンが過ぎた場合の表示を記載。ただし、途中に半角スペースが記載されるとそこまでしか読み込みません。また、特殊文字を使うと文字化けする可能性があります。
下記コードを小文字の[]で囲ってビジュアルディタに記載してください。

ショートコード

hoge num1=countdown num2=2020-7-24 num3=00:00 num4=過ぎました

functions.php

上記ショートコードをhtmlに変更するphpです。
「外観」→「テーマエディタ」→「functions.php」の最下部に貼り付けてください。

PHPコード

/*--------------------------------------------------------------------------
* カウントダウン
*---------------------------------------------------------------------------*/
function hogeFunc($atts) {
extract(shortcode_atts(array(
'num1' => 0,
'num2' => 0,
'num3' => 0,
'num4' => 0,
), $atts));

return '<span class="'.$num1.'" data-date="'.$num2.' '.$num3.'" data-end="'.$num4.'"></span>';
}
add_shortcode('hoge', 'hogeFunc');

Javascript

上記で生成したhtmlを実行するjavascriptです。
おすすめは</body>の直前か、フッターに記載。ヘッダーに記載するとページの表示が1秒程度遅くなります。

javascriptコード

<!--カウントダウン-->
<script>
window.addEventListener('load',()=>{
Countdown();
})
const Countdown = function(){
const cd_areas = document.getElementsByClassName('countdown');
[...cd_areas].forEach(cd_area=>{
const target_unix = new Date(cd_area.dataset.date)/1000;
setInterval(()=>{
const now_unix = Math.floor(new Date()/1000);
let sec = target_unix-now_unix;
let cd_text = '';
if(sec <= 0){ cd_area.textContent = cd_area.dataset.end; }else{ if(sec>=86400){
cd_text += Math.floor(sec/86400)+'日と';
sec = sec%86400;
}
if(sec>=3600){
cd_text += td(Math.floor(sec/3600))+':';
sec = sec%3600;
}else{
cd_text += '00:';
}
if(sec>=60){
cd_text += td(Math.floor(sec/60))+':';
sec = sec%60;
}else{
cd_text += '00:';
}
cd_text += td(sec)+'';
cd_area.textContent = cd_text;
}
},1000);
});

function td(x){
if(x<10){
return '0'+x;
}else{
return x;
}
}
}
</script>

教えてすごい人!

当サイトに管理人はjavaやCの基礎をかじった程度の人間です。「上記コードをこういう風に改変すれば、もっと高速に動くよ!」というのがありましたらお教えください!