新着記事に「NEW」マークを付けて目立たせたい！【Snow Monkey】

2024年8月24日

ハシビィくん

新着記事の初動が芳しくないから、もっと目立つようにしたいっす！

カピーさん

新着記事のスピードが重要なサイトには良いカスタマイズだ！Snow Monkey限定なので注意してくれ！

「NEW」マークを付けるカスタマイズ方法

WordPressテーマ「Snow Monkey」をカスタマイズするなら、プラグイン「My Snow Monkey」の利用が推奨されています。今回紹介するカスタマイズ方法を実施する前に準備するのをお忘れなく。

テンプレートファイルをコピーする

「Snow Monkey」には、

snow-monkey/template-parts/loop/entry-summary/meta/meta-post.php

というファイルが用意されています。こちらを上書きできるようにする必要がありますので準備していきましょう。

「My Snow Monkey」を導入＆設定して上で、

my-snow-monkey/override/template-parts/loop/entry-summary/meta/meta-post.php

となるようにファイルをコピーしましょう。そして今回はこの最下層のmeta-post.phpが編集対象になります。間違えて本体である「Snow Monkey」側のファイルを編集しないように注意しましょう。

「Snow Monkey」側のファイルを編集してしまうと、ページが真っ白になったりと不具合が発生する可能性があります。

テンプレートファイル（PHP）を編集

<?php
/**
 * @package snow-monkey
 * @author inc2734
 * @license GPL-2.0+
 * @version 11.4.0
 */

use Framework\Helper;

$public_terms = Helper::get_the_public_terms( get_the_ID() );
?>
<?php
if ( is_page( 'new-post-mark-demo' ) ) { // slug : new-post-mark-demo の場合
?>
<div class="c-entry-summary__meta">
	<ul class="c-meta">
		<li class="c-meta__item c-meta__item--author">
			<?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?><?php echo esc_html( get_the_author() ); ?>
		</li>
		<li class="c-meta__item c-meta__item--published">
			<?php the_time( get_option( 'date_format' ) ); ?>
		</li>
		<?php
		$days = 5; // NEWマークを表示する日数
		$now = date_i18n('U'); // 今の時間
		$entry = get_the_time('U'); // 投稿日の時間
		$term = date('U',($now - $entry)) / 86400;
		if( $days > $term ) :
		?>
			<li class="c-meta__item c-meta__item--new">
				<span class="c-entry-summary__term">NEW</span>
			</li>
		<?php elseif ( $public_terms ) : ?>
			<li class="c-meta__item c-meta__item--categories">
				<?php
				Helper::get_template_part(
					'template-parts/loop/entry-summary/term/term',
					get_post_type(),
					[
						'_terms' => [ $public_terms[0] ],
					]
				);
				?>
			</li>
		<?php endif; ?>
	</ul>
</div>
<?php } else { // それ以外の場合 ?>
<div class="c-entry-summary__meta">
	<ul class="c-meta">
		<li class="c-meta__item c-meta__item--author">
			<?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?><?php echo esc_html( get_the_author() ); ?>
		</li>
		<li class="c-meta__item c-meta__item--published">
			<?php the_time( get_option( 'date_format' ) ); ?>
		</li>
		<?php if ( $public_terms ) : ?>
			<li class="c-meta__item c-meta__item--categories">
				<?php
				Helper::get_template_part(
					'template-parts/loop/entry-summary/term/term',
					get_post_type(),
					[
						'_terms' => [ $public_terms[0] ],
					]
				);
				?>
			</li>
		<?php endif; ?>
	</ul>
</div>
<?php } ?>

上記コードを入力することで、「NEW」マークが条件を満たした場合に出力されるようになります。その条件（特定スラッグ）から外れている場合は、「Snow Monkey」の通常仕様と同じように表示されます。

CSSで見た目を調整しよう

.add-new-mark {
  .c-entries--text2 {
    .c-entry-summary {
      &__body {
        display: flex;
        flex-direction: column;
        @include media-breakpoint-up(md) {
          flex-direction: inherit;
        }
      }

      &__header {
        order: 1;
        margin-top: 10px;
        @include media-breakpoint-up(md) {
          margin-top: 0;
          margin-left: 10px;
        }
      }

      &__meta {
        order: 0;
        margin-top: 0;
        @include media-breakpoint-up(md) {
          min-width: 280px;
        }

        .c-meta__item--new {
          .c-entry-summary__term {
            background-color: $brand-color-3;
          }
        }
      }
    }
  }
}

まとめ：新着記事に「NEW」マークを付けて目立たせたい！

今回はSnow Monkeyでの「NEW」マークを表示させるカスタマイズ方法を紹介させていただきました。

このカスタマイズは毎日更新などの更新頻度が高いメディアサイトで要望された内容になります。デフォルトのSnow Monkeyのデザインはシンプルだからこそ、新着記事をさりげなく目立たせるのは重宝されました。

テンプレートファイルに関するカスタマイズになりますので、操作に自信のない方は専門家にご依頼されるのがベストです！またバックアップを用意するのはお忘れなく！

新着記事に「NEW」マークを付けて目立たせたい！

「My Snow Monkey」の使用前提
スラッグを条件として表示を切り替え

この記事をシェアする

新着記事に「NEW」マークを付けて目立たせたい！【Snow Monkey】