【Cocoon】カテゴリページに動的要素を追加した時のメモ

やったこと

別タイムゾーンの曜日出力とカウントダウンタイマーを作る
タブで切り替えるテーブルを作る
タブのアクティブな位置を日付ごとに変える
PHPファイルで作ったこれらを，ショートコードでカテゴリページに実装する

作ったのも
- 実装したページ
解説的なメモ

作ったのも

Asiaサーバー

月 / 木火 / 金水 / 土日曜日

ピックアップ

実装したページ

原神｜るいラボ

解説的なメモ

カウントダウンタイマー

別のタイムゾーンの曜日出力とタイマー
主に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');

参考リンク

ショートコードを使ったphpファイルの呼び出し

その他

最終的に「table.php」と「timer.js」の2つのファイルを作った．
本来であれば，cssファイルも作ったほうが良いが，面倒だったのでtable.phpの上部に記載した．
また，JavaScriptの読み込みもtable.phpの最下部でしてある．


瓦	自由

柱	繁栄

珊瑚	浮世


牙	抗争

丹	勤労

勾玉	風雅


鎖	詩文

隕鉄	黄金

面	天光


タルタリヤ	自由 - 月/木	冬極の白星	面 - 水/土