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

最終更新日: 公開日: 2021年12月

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 がついて点滅する.

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop