おそらきれいに「pin」の表示と「new」の表示が増えました！

↓表示の方法はこちらで↓
擬似要素を使ってみる〜「:before」「:after」編〜

WordPressで時間を取得する

PHPでの日付取得方法！ 詳細まとめました
様々なサイトを渡り歩きましたが、ブクマにはこちらしか残っていませんでした。今回使用する「UNIX TIMESTAMP」などの情報はこちらでご一読ください。

UNIX TIMESTAMPの確認には
UNIXタイムスタンプ変換ツールを使用しました。

また、var_dump();でphpのデバッグができます。

コード

//ループの前に記述
<script>
let _timestampArray = [];
</script>

/////中略///////////////////

//ループ内に記述
<p class="date">
 <?php
   the_time('H:i・Y/m/d');
   $timestamp = get_post_modified_time('U') - (9*60*60);
?>
<script>
   _timestamp = <?php echo htmlspecialchars($timestamp, ENT_QUOTES, 'UTF-8'); ?>;
   _timestampArray.push(_timestamp);
</script>
</p>

/////中略////////////////

//ページ下部に記述
<?php $nowTime = time();?>
<script>
let _timestamp;
let _nowTime = <?php echo htmlspecialchars($nowTime, ENT_QUOTES, 'UTF-8'); ?>;
let _class_item_new = document.querySelectorAll('article.post');
for(let i =0; i < _timestampArray.length; i++) {
   let _newicon = (_nowTime - _timestampArray[i]);
   if(_newicon < 259200) {
     _class_item_new[i].classList.add('item','new');
   } else {
     _class_item_new[i].classList.add('item');
   }
}
</script>

let _timestampArray = [];

この配列にループ内で取得した更新日（$timestamp）を追加していきます。
ループの前に宣言しておきます。

$timestamp = get_post_modified_time(‘U’) – (9*60*60);

「get_post_modified_time」はループ内でしか使用することができません。
「get_post_modified_time(‘U’)」
なんだか顔っぽく見えますが、オプションのUは、UNIX TIMESTAMPのUです。今回はなぜか9時間進んだ数字が取得されたので、9時間分の時間をマイナスしています。

let _nowTime = <?php echo htmlspecialchars($nowTime,ENT_QUOTES, ‘UTF-8’); ?>;

phpで取得した更新日（$timestamp）をJavaScriptに代入しています。
ごちゃごちゃしているのは宣言内でphpが実行されるのを防いでいるためです。

PHPからJavaScriptへ配列を受け渡す方法を現役エンジニアが解説【初心者向け】

_timestampArray.push(_timestamp);

先程宣言した配列に取得して代入した更新日（$timestamp）をpushしていきます。
ループ内なのでループ処理を新たにする必要はありません。

$nowTime = time();

「time()」で今の時間を取得しています。
今回はphpで取得していますが、JavaScriptでも取得することができます。

let _timestamp;

ループ内で宣言が重複するのを避けるため、ここで宣言しています。

let _nowTime = <?php echo
htmlspecialchars($nowTime, ENT_QUOTES, ‘UTF-8’); ?>;

phpで取得した現在の時間をJavaScriptに代入しています。
（最初からJavaScriptで取っていれば必要ないです）

let _class_item_new = document.querySelectorAll(‘article.post’);

HTMLから「post」というクラス名を持つarticle要素を集めています。

for(let i =0; i < _timestampArray.length; i++) {}

取得した更新日（$timestamp）の長さだけ処理をループさせます。

let _newicon = (_nowTime – _timestampArray[i]);

今の時間から投稿の更新日を差し引いています。

例えば今日(2020/12/20 0:00=1608390000)から2日前(2020/12/18 0:00=1608217200)に更新された場合。
その差は172800秒なので、if文の条件にある259200秒より少なくなります。
259200秒は3日間の秒数なので、更新日から今までの時間が3日を超えると条件に合わなくなります。

今回は三日以内の場合にクラス名(‘item’と’new’)を付与し、三日後以降にはクラス名(‘item’)のみが付与されるように書きました。

【12/24追記】

いまいち想定通りに動いていないようなので、使用される方は要注意です。

【02/01追記】

動作の修正が完了しました。
上記のコードも修正したものに差し替えました。
安心してご利用下さい！