snow_monkey_prepend_main

最近の投稿ブロック(レイアウト:テキスト2)に新着マークを一定期間付ける方法(デモあり)

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

Snow Monkey公式フォーラムに投稿されていた質問からアイデアをいただき、僕なりのカスタマイズ方法を書いてみることにしました。

ネタ元になってる投稿はこちらになります。

方法としては、上記トピックにも書いてあるように様々あるとは思うのですが、個人的にはあまりディープな処理を入れてしまって、メンテナンス効率が落ちることも心配になるので、無難にテンプレートの上書きという形で再現してみます。

自分一人で一生お世話する案件であれば問題ないのですが、自分以外の誰かがメンテナンスを行うケースを想定してあげることも大切なことだと考えています。

だって、自分だけしか分からないコードを書くことって、その人の特異性は発揮できるけど、その人以外に管理や改修をお願いしたら、コード解析の工数発生してしまいますからね。

以上、個人的な考えなので人それぞれだとは思いますが。

テンプレート上書きができる環境を作る

まずはテンプレートを上書きができる環境を作りましょう。

以前、記事にしているので導入されていない方は準備して、以下読み進めてください。

My Snow Monkey の存在意義は「テンプレートの上書きを抑制させる」という考えがありますので、用法用量を間違えないようにしましょう。

ブロックの設置条件

以下のようにブロックを設置したという前提条件のもとで説明していきます。

  • ページのスラッグをnew-post-mark-demoとする
  • そのページに設置した「最近の投稿」ブロックにadd-new-markというCSSクラスを追加する

テンプレートファイルをコピーしてくる

Snow Monkey本体の、

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

を、上記の方法でテンプレートファイルを上書きできるように設定した上で、

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

となるようにコピーしてきます。そして、このmeta-post.phpを編集していきます。間違えて、本体のファイルを編集してしまわないようにしましょう。

コピーしてきたテンプレートファイルを編集する

処理の流れとしてはこのような感じになります。

<?php
if ( is_page( 'new-post-mark-demo' ) ) {
   特定のスラッグの場合のみ実行する部分→Newマークを出力させる処理を書く
} elseif ( $public_terms ) {
   通常の処理を掲載したままにしておく→これがないと全ての該当箇所が書き換わってしまう
}

実際にテンプレートファイルの内容はこのようになります。

<?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マークが条件を満たした場合に出力されるはずです。その条件から外れるとカテゴリーが通常のように表示されるようにしてあります。

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;
          }
        }
      }
    }
  }
}

スタイリングをしないと、トピックに上がっていたような項目順にならないので、CSSで並び替えをしています。

メディアクエリの記述(media-breakpoint-up(md))については、別記事に書いてあるので参考にしてください。

上のCSSを参考にしてもらうと、このような見た目になるかと思います。

あとは、お求めのスタイリングに良しなにカスタマイズしてもらえば完成かと思います。お疲れ様でした!

デモ

「あれ?この情報、古くない?」と思ったらご連絡ください。 snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main