久野 晃司 
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を参考にしてもらうと、このような見た目になるかと思います。
あとは、お求めのスタイリングに良しなにカスタマイズしてもらえば完成かと思います。お疲れ様でした！
デモ
外注先をお探しの方へ
当サイトを制作・管理しているオレインデザインを、WordPressを利用したウェブサイト制作の開発外部リソースに利用しませんか？
お気軽にお問い合わせください。