やったこと
- 別タイムゾーンの曜日出力とカウントダウンタイマーを作る
- タブで切り替えるテーブルを作る
- タブのデフォルト位置を曜日ごとに変える
- PHPファイルで作ったこれらを,ショートコードでカテゴリページに実装する
作ったモノ:原神|るいラボ
カウントダウンタイマー
別のタイムゾーンの曜日出力とタイマー
主にJavaScriptで頑張る
html
<figure class="wp-block-table"><table><tbody><tr>
<td>Asiaサーバー</td>
<td><span id="asia_today"></span></td>
<td><span id="asia_timer"></span></td>
</tr></tbody></table></figure>
JavaScript
function serverTimer() {
const asiaServerTime = new Date().toLocaleString("en-US", {timeZone: "Etc/GMT-4"});
const asiaServerDate = new Date(asiaServerTime);
const asiaDayOfWeekNum = asiaServerDate.getDay();
const asiaDayOfWeekStr = [ "日", "月", "火", "水", "木", "金", "土" ][asiaDayOfWeekNum];
const asiaTomorrow = new Date(asiaServerDate.getFullYear(),asiaServerDate.getMonth(),asiaServerDate.getDate()+1);
const asiaCountDownMS = asiaTomorrow.getTime() - asiaServerDate.getTime();
const asiaCountS = Math.floor(asiaCountDownMS/1000)%60;//ミリ秒を秒に直してから
const asiaCountM = Math.floor(asiaCountDownMS/1000/60)%60;//1時間=60分だからね
const asiaCountH = Math.floor(asiaCountDownMS/1000/60/60);
document.getElementById("asia_today").innerHTML = asiaDayOfWeekStr + "曜日";
document.getElementById("asia_timer").innerHTML =
String(asiaCountH).padStart(2,"0") + ":"
+ String(asiaCountM).padStart(2,"0") + ":"
+ String(asiaCountS).padStart(2,"0");
setTimeout(serverTimer,1000);//1秒毎に繰り返す
}
serverTimer();
タブで切り替えるテーブル
テーブルそのものは,適当にテストページを作って,そこで外形を作る.
その作ったものを,「HTMLとして編集」からHTMLをコピーして,別のエディタで「rowspan=”2″」を入れたり,td要素を削除したりする.
タブのデフォルト位置を曜日毎に変える
php
<?php
date_default_timezone_set('Etc/GMT-4'); //タイムゾーン指定
$dayOfWeekNum = date('w');
?>
<div class="tab-wrap">
<input id="TAB-01" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-01" <?php if($dayOfWeekNum==1 || $dayOfWeekNum==4){echo 'checked="checked"';} ?> >ボタン 1</label>
<input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02" <?php if($dayOfWeekNum==2 || $dayOfWeekNum==5){echo 'checked="checked"';} ?> >ボタン 2</label>
<input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03" <?php if($dayOfWeekNum==3 || $dayOfWeekNum==6){echo 'checked="checked"';} ?> >ボタン 3</label>
<div class="tab-content" id="TAB-01-content">
コンテンツ 1
</div>
<div class="tab-content" id="TAB-02-content">
コンテンツ 2
</div>
<div class="tab-content" id="TAB-03-content">
コンテンツ 3
</div>
</div>
コメント
checked="checked"
を下に入れ替える
<?php if($dayOfWeekNum==1 || $dayOfWeekNum==4){echo 'checked="checked"';} ?>
PHPファイルを読み込むショートコード
ここまで書いたプログラムをphpファイルにして,ショートコードで読み込む.
本来は要素の使いまわしをするために使うが,cocoonのカテゴリページに簡単に実装するためにこの方法を使った.
functions.php
function Include_my_php($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
include(__DIR__."/my/".$file.".php");
return ob_get_clean();
} add_shortcode('myphp', 'Include_my_php');
その他
最終的に「table.php」と「timer.js」の2つのファイルを作った.
本来であれば,cssファイルも作ったほうが良いが,面倒だったのでtable.phpの上部に記載した.
また,JavaScriptの読み込みもtable.phpの最下部でしてある.