【WordPress】Newpost Catch の日付位置を変更する方法

2015年12月19日

2016年1月2日

　WordPress でサイドバーに「最近の投稿」を表示する場合、デフォルトで用意されているウィジェットではどうにも使い勝手が悪い……というより、あまりに機能が簡素過ぎるため出来ることが非常に少ない。
　そのためサムネイル画像が付けられる等デザイン性が高い「最近の投稿」を実現するプラグインである「Newpost Catch」は、CSS によるカスタマイズ性にも優れて使い勝手も良く非常にお薦めできるプラグインのひとつとなる。

　だが Newpost Catch はそのデザインのほとんどを CSS でカスタマイズ可能ではあるが、唯一日付部分のデザインだけは CSS だけではどうにも手を入れにくくなっている。
　日付部分は <span> タグが付けられており、class も「date」が振られているため、見た目のデザインについては CSS で十分満足なカスタマイズができるが、その表示位置は常に投稿記事タイトルの直後のみで、これだけは標準の機能や CSS のカスタマイズのみでは対応しきれない。

　日付表示位置の変更については CSS ではなく、プラグインフォルダ内にある PHP ファイルを直接編集する必要があるため、ここではその変更方法について備忘録を兼ねて触れておこうかと。

　と言うのもプラグインを構成するファイルを直接編集する場合、今後のプラグインのバージョンアップ等で上書きされてしまい同様の作業を再度行う必要が出てくる可能性が高いので……

Newpost Catch プラグインフォルダ内の PHP ファイルを編集する

　目的のファイルは、「/wp-content/plugins/newpost-catch」下にある「class.php」というファイルとなる。このファイルを展開して内容を修正していく。今回は、

日付位置をサムネイル画像の上になるように位置を変更する
日付表示を [] で囲むようにする（[2015年12月19日]のようにする）

　この2点の修正を加えていく。

　目的の編集箇所は class.php 内の、大体150行目～180行目あたりの部分となる。ここら辺はプラグインのバージョンによって異なる可能性があるため、内容をよく確認すること。

<ul id="npcatch" >
<?php if( $npc_query->have_posts() ) : ?>
<?php $i = 0; ?>
<?php while( $npc_query->have_posts() ) : $npc_query->the_post(); ?>
<li>
<a href="<?php echo esc_html( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>" >
<?php if( has_post_thumbnail() ) { ?>
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id);
$thumb_url = $thumb_url[0];
?>
<img src="<?php echo esc_attr( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>"  />
<?php } else { ?>
<img src="<?php echo esc_attr( no_thumb_image() ); ?>"  width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />
<?php } ?>
</a>
<span class="title"><a href="<?php echo esc_html( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><?php esc_html( the_title() ); ?>
<?php if ( $instance['date']['active'] == true ) { ?>
<span class="date"><?php echo esc_html( get_the_time( get_option('date_format') ) ); ?></span>
<?php } ?>
</a></span>
</li>
<?php $i++; ?>
<?php endwhile; ?>
<?php else : ?>
<p>no post</p>
<?php endif; wp_reset_postdata(); ?>
</ul>

<?php if( $npc_query->have_posts() ) : ?>

<?php $i = 0; ?>

<?php while( $npc_query->have_posts() ) : $npc_query->the_post(); ?>

<li>

<a href="<?php echo esc_html( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>" >

<?php if( has_post_thumbnail() ) { ?>

<?php

$thumb_id = get_post_thumbnail_id();

$thumb_url = wp_get_attachment_image_src($thumb_id);

$thumb_url = $thumb_url[0];

<img src="<?php echo esc_attr( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />

<?php } else { ?>

<img src="<?php echo esc_attr( no_thumb_image() ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />

<?php } ?>

</a>

<span class="title"><a href="<?php echo esc_html( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><?php esc_html( the_title() ); ?>

<?php if ( $instance['date']['active'] == true ) { ?>

<?php } ?>

</a></span>

</li>

<?php $i++; ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; wp_reset_postdata(); ?>

</ul>

　該当箇所の目安は <ul id="npcatch">～</ul> で囲まれた範囲。

　この中で日付表示関する箇所は、上記20行目にある <span class="date">～</span>の部分。まずは扱いやすいように <span> を <div> に変更し、「[]」で表示を囲うように記述。そして位置を上記13行目の直前に移動する。

<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id);
$thumb_url = $thumb_url[0];
?>
<div class="date">[<?php echo esc_html( get_the_time( get_option('date_format') ) ); ?>]</div>
<img src="<?php echo esc_attr( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>"  />
<?php } else { ?>

<?php

$thumb_id = get_post_thumbnail_id();

$thumb_url = wp_get_attachment_image_src($thumb_id);

$thumb_url = $thumb_url[0];

<?php } else { ?>

　位置関係が分かりやすいように前後の行ごと該当箇所を抜粋。上記6行目が内容を編集し位置を変更した日付表示となる。
　ちなみに日付表示内容は WordPress デフォルトの日付設定をそのまま反映している（Newpost Catch のデフォルト）のままだが、<?php echo esc_html( get_the_time( get_option('date_format') ) ); ?> を以下のように書き換えて任意の表示方法に変更することも可能。

<div class="date"><?php esc_html( the_time('Y年m月d日(D)') ); ?></div>

1	<div class="date"><?php esc_html( the_time('Y年m月d日(D)') ); ?></div>

　上記で「○○年○○月○○日（曜日）」という表示になるため、後は CSS でデザインを整えれば作業終了となる。

　以前プラグインに頼らずに「最近の投稿」を表示する方法を紹介したが、サムネイル付きの最近の投稿一覧を実現するならやはりプラグインに頼った方が便利な面もあるため、自分に一番適した方法を色々と試しながら探してみるのもいいかと。

It's my pc life…