【WordPress】新着情報で2週間以内の投稿記事に new をつける方法

WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう．
しかし，プラグインはいろいろ面倒なので入れたくない．

そういう場合にコピペで張り付けて動かすスクリプトを紹介する．

【CSS】テキストやリンクを目立たせるいくつかの方法という記事で CSS の書き方については説明しているが，実際に WordPress の新着記事リンク一覧で実装したい場合の説明をする．
ついでに新着記事を表示するスクリプトも載せる．

新着情報はトップページに置くはずで，仮に front-page.php が自分のサイトのトップページだとする．
自サイトのトップページがどこにあるかを確認してほしい．

サンプルコード

CSS

15回，new を点滅させて消えるスタイルシート
箇条書きのスタイルシートは入れていないので自由に設定する．

自サイトの css ファイルに挿入

.new::after {
  content: "new";　/* 文字 */
  font-size: 70%; /* 大きさ */
  font-weight: bold; /* 太字 */
  display: inline-block;
  position: relative; /* 位置 */
  top: -12px;
}
.blinkfadeout::after {
  opacity: 0; /* 見えない状態 */
  animation: flash 0.3s 15 linear;
}
.redafter::after {
  color: red;
}
@keyframes flash {
  50% { /* 動作の中心 */
    opacity: 1; /* 見える状態 */
  }
}

PHP

最近投稿した 10 記事へのリンクを箇条書きで表示するプログラム
二週間以内に作成された記事には new を表示するためのクラスを追加する．

functions.php

function insert_article() {
  $args = array(
    'posts_per_page' => -1 //すべての記事を取得
  );
  $stRet = "<ul>";
  $the_query = new WP_Query( $args );
  $inCnt = 0;
  if ( $the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
      $the_query->the_post();
      $inCnt = $inCnt + 1;
      $stNew = '';
      if (date('Y-m-d', strtotime('-2 week')) < get_the_date('Y-m-d')) {
        $stNew = 'class="new redafter blinkfadeout"';
      }
      $stRet .= "<li $stNew>カテゴリ " . get_the_category()[0]->cat_name . "<br>";
      $stRet .= "<time datetime=" . get_the_time('Y-m-d') . ">" . get_the_time('Y.m.d') . "</time> <a href='" . get_the_permalink() . "'>" . get_the_title() . "</a></li>";
      if ( 9 < $inCnt ) break;
    }
  }
  $stRet .= "</ul>";
  return $stRet;
}
add_shortcode('insarticle', 'insert_article');

最後はショートコードの設定．

HTML というか PHP

front-page.php の新着情報を出したい場所に挿入
ファイルを直接いじれる場合

<?= insert_article(); ?>

WordPress の管理画面からトップページを編集する場合は以下のようにショートコードを挿入

[insarticle]

実際の例

この場所で「ページの更新」をすると 2 週間以内に投稿した記事があれば，new がついて点滅する．

• カテゴリ ホームページ
  2024.03.28 Lity を使った Youtube 動画再生
• カテゴリ ホームページ
  2023.03.01 【WordPress】Xserver でプラグインなしで APCu を使う方法
• カテゴリ マーケティング
  2023.02.27 製造業のマーケティングについて
• カテゴリ マーケティング
  2023.02.22 マーケティングは自社で行うべきという話
• カテゴリ ホームページ
  2023.02.06 マルチサイトのURLを移動する際に変更する場所【WordPress】
• カテゴリ CSS
  2023.01.27 【CSS】入れ子のリストを複数列に並べる
• カテゴリ マーケティング
  2023.01.24 ヒアリングする際のコツ
• カテゴリ ホームページ
  2023.01.19 【WordPress】「永続オブジェクトキャッシュを使用してください」と言われる時
• カテゴリ ホームページ
  2023.01.18 見方を変えると出来る「商品企画」
• カテゴリ HTML
  2023.01.05 「ページ上で視認性の高い動画は検出されませんでした」の解決方法