【暫定版】yStandardで新着記事にNEWマークを付けるカスタマイズ方法

【暫定版】yStandardで新着記事にNEWマークを付けるカスタマイズ方法

2020年5月20日
WordPress

このブログのテーマはyStandardを使用しています。とっても素晴らしいテーマです!

こちらで配布されています。ありがたや。

yStandardテーマ本体・子テーマのダウンロードページです。 yStandard 本体 yStandardをダウンロード 動作に必要な環境 WordPres
wp-ystandard.com

yStandardはカスタマイズをしやすい設計となっているので、自分でいろいろカスタマイズをするのも楽しいです。

今回は、記事一覧をカード型にした場合の新着記事にNew!マークを付ける方法を書きたいと思います。

カスタマイズは自己責任でお願いいたします

それから、ワイスタはアップデートも頻繁なテーマなので、今後新着記事にNewマークを表示させる機能も追加されるかもしれません。

今回の方法はあくまで暫定版で私個人がカスタマイズした備忘録的内容となっておりますのでご注意ください。

スポンサーリンク

1.まずは、子テーマに親テーマからファイルをコピーする

まずは、yStandardの子テーマに、ファイルマネージャーなどを使って、親テーマのtemplate-partsフォルダをまるっとコピーします。

使用する箇所は、template-parts→archve→details.phpの「details.php」を触ります。

それ以外の子テーマにコピーしたファイルは変更の必要が無いのであとで削除してしまいましょう。

datails.phpに加えるコード

具体的には、details.phpの38行目、

<div class="archive__text">

の直前に以下のコードを書いてください。10日以内に書いた記事にNewマークを付けるという意味です。

<?php
  $days = 10;
  $today = date_i18n('U');
  $entry = get_the_time('U');
  $elapsed = date('U',($today - $entry)) / 86400;
  if ( $days > $elapsed ) {
    echo '<div class="new_bg"><span class="new">New</span></div>';
  }
?>

2行目のところの10を5に変えたりすれば5日以内の記事にnewを付けるという風に日数はお好みで変えてください。

こちらのサイト様を参考にしています

こちらのコードのオリジナルは以下のサイト様です。引用させていただきました。ありがとうございます。

WordPressサイト制作案件で新着記事のアイキャッチ画像上に【NEW】を表示してほしいというご要望を頂きました。「オシャレに表示させたい」と思い、何パターン…
www.puzzle-web.jp

2.phpに変更を加えた後は、CSSでリボン型デザインの装飾をする

phpファイルにコードを記載したら、今度はCSSで装飾します。例として斜め掛けのリボンのデザインを書いてみました。

外観→カスタマイズ→追加CSSに以下のCSSコードをコピペしてみてくださいね。

若干位置などがデザインによってずれると思うのですが、ちょうどいいようにpxを調整してくださいね。


.archive__image .new_bg {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 300px;
  height: 150px;
  background: #f1f1f1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.new_bg{
  position: absolute;
  top: -8px;
  right: 0;
  width: 85px;
  height: 85px;
  overflow: hidden;
  }

.new {
  display: inline-block;
  position: absolute;
  padding: 5px 0;
  left: -24px;
  top: 20px;
  width: 160px;
  text-align: center;
  font-size: 18px;
  line-height: 16px;
  background: #39c3d4;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgb(57, 195, 212);
  border-top: dashed 1px rgba(255, 255, 255, 0.65);
  border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}

すると新着記事にNewというリボンが表示されるようになりました!

テストページNewの青いリボン装飾が出ている

リボンのデザインを変えたい時は・・・

リボンのデザインを変えたい場合は、サルワカ君のサイトにたくさんCSSサンプルがあるので、そちらを参考にかえてみてください。

HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました…
saruwakakun.com

以上です。お疲れさまでした~。

もしやり方間違っていたら、ご指摘くださいねm(__)m