【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.09.23 【Chrome】Google の検索結果の件数を増やす方法
• カテゴリ システム
  2024.09.20 【Chrome拡張機能】Google 検索結果 100件表示
• カテゴリ マーケティング
  2024.09.17 営業ロープレが苦手な方へ
• カテゴリ CSS
  2024.09.17 【CSS】特定の子要素を含まない要素を指定する方法
• カテゴリ システム
  2024.09.14 自社URLで実施できるアンケート
• カテゴリ 知識
  2024.09.09 iPhone(iPad) で開発者ツールを使う方法
• カテゴリ php
  2024.09.05 【WordPress】プラグインなしで関連記事・関連ページを出力
• カテゴリ マーケティング
  2024.09.05 スケジュール管理ソフトを入れると営業管理出来ると思っていますか？
• カテゴリ マーケティング
  2024.09.04 必要でなくてもあると得する(使うと便利な)もの(フレーミングの話)
• カテゴリ HTML
  2024.08.27 【HTML】右側や左側に縦配置のサイドメニューを置くということ