【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');

参考リンク

その他

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

タイトルとURLをコピーしました