【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.04.19 【MySQL】WordPress を Windows へインストール
• カテゴリ CSS
  2024.04.17 Lity を使った再生ボタン付き Youtube 動画再生
• カテゴリ CSS
  2024.04.16 【CSS】画像クリックでポップアップウィンドウ(拡大画像)を表示する方法
• カテゴリ システム
  2024.03.27 検索順位チェックツールの使い方動画
• カテゴリ php
  2024.03.26 【WordPress】ページにjavascriptやCSSの読み込みタグを挿入したい時
• カテゴリ CSS
  2024.03.26 【CSS】レスポンシブ対応縦横ヘッダ固定テーブル(縦横スクロール)
• カテゴリ マーケティング
  2024.03.25 無知の知
• カテゴリ システム
  2024.03.25 リダイレクト(転送)の設定(.htaccess)
• カテゴリ ホームページ
  2024.03.21 Windows への Apache インストール方法
• カテゴリ 知識
  2024.03.21 兵は拙速なるを聞くも，未だ巧久なるを睹ざるなり