投稿一覧にアイキャッチ画像（サムネイル）を表示するプラグイン『Newpost Catch』のアレンジ備忘録

Newpost Catch
投稿ページやサイドバーにアイキャッチ（サムネイル）画像付きの投稿一覧リストを作る

調べれば、ほんと沢山のブログがありますね。

そんな中から今回も見繕って来て自分のブログに応用しました。

通常、ウィジェットを用いてサイドバーに「新着記事」を表示する場合、投稿ページでの一覧のように、サムネイル（アイキャッチ）画像が表示されません。

それを表示できるようにするのが、こちらのプラグインです。

https://anajalspg.bonvoy.pro/wordpress-9/

anajalspg.bonvoy.pro

　　こちらの記事を参考にさせて頂きました。

Newpost Catchを使って固定ページに新着記事（最新記事）を表示させる方法まとめ
最近このブログのTOPページをカスタマイズしたのですが、その時に新着記事（最新記事）を表示させるために「Newpost Catch」というプラグインを使いました。この「Newpost Catch」を使いこなすための解説ページは色々とあったのですが、色々と組み合わせた結果自分用のカスタマイズが出来たので、備忘録も兼ねて残...
www.love-wife-life.com

newpost-catch/class.php の編集

ダッシュボード　→　プラグイン編集　→　右上の『編集するプラグインを選択:』で、『Newpost　catch』を選択

右に複数ファイル出てくるので、

newpost-catch/class.php　を選択

130行目？の部分

<li><a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><img src="<?php echo esc_url( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/><span class="title"><?php the_title(); echo $date; ?></span></a></li>
<?php 
        endwhile;
    else :
?>

<li><a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>"><img src="<?php echo esc_url( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/><span class="title"><?php the_title(); echo $date; ?></span></a></li>

<?php

endwhile;

else :

上記の部分をタグ毎に段落にしたのが下記です。

<li>
   <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>">
    <img src="<?php echo esc_url( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/>   
       <span class="title">
        <?php the_title(); echo $date; ?>
       </span>
   </a>
</li>
<?php 
        endwhile;
    else :
?>

<li>

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

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

<?php the_title(); echo $date; ?>

</span>

</a>

</li>

<?php

endwhile;

else :

こちらの

      <?php the_title(); echo $date; ?>
       </span>

1 2	<?php the_title(); echo $date; ?> </span>

の間に、

下記をいれて、

<style type="text/css">
a { text-decoration: none; color:#000}
a:hover { text-decoration: underline;color:#000 }
</style>
【最終更新日】<?php the_modified_date('Y/m/d') ?> <br>
【初回公開日】<?php the_time('Y/m/d') ?><br>
  【カテゴリー】<?php the_category(', ') ?><br>
  【本文】<a href  ="<?php the_permalink() ?>"><?php the_excerpt('', ', '); ?>

a { text-decoration: none; color:#000}

a:hover { text-decoration: underline;color:#000 }

</style>

【最終更新日】<?php the_modified_date('Y/m/d') ?> <br>

【初回公開日】<?php the_time('Y/m/d') ?><br>

【カテゴリー】<?php the_category(', ') ?><br>

【本文】<a href ="<?php the_permalink() ?>"><?php the_excerpt('', ', '); ?>

以下のようになったら、

<li>
   <a href="<?php echo esc_url( get_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>">
    <img src="<?php echo esc_url( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>"/>   
       <span class="title">
        <?php the_title(); echo $date; ?>

<style type="text/css">
a { text-decoration: none; color:#000}
a:hover { text-decoration: underline;color:#000 }
</style>
【最終更新日】<?php the_modified_date('Y/m/d') ?> <br>
【初回公開日】<?php the_time('Y/m/d') ?><br>
  【カテゴリー】<?php the_category(', ') ?><br>
  【本文】<a href  ="<?php the_permalink() ?>"><?php the_excerpt('', ', '); ?>
       </span>
   </a>
</li>
<?php 
        endwhile;
    else :
?>

<li>

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

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

<?php the_title(); echo $date; ?>

a { text-decoration: none; color:#000}

a:hover { text-decoration: underline;color:#000 }

</style>

【最終更新日】<?php the_modified_date('Y/m/d') ?> <br>

【初回公開日】<?php the_time('Y/m/d') ?><br>

【カテゴリー】<?php the_category(', ') ?><br>

【本文】<a href ="<?php the_permalink() ?>"><?php the_excerpt('', ', '); ?>

</span>

</a>

</li>

<?php

endwhile;

else :

左下の『ファイルを更新』を押します。

newpost-catch/style.css の編集

ダッシュボード　→　プラグイン編集　→　右上の『編集するプラグインを選択:』で、『Newpost　catch』を選択

右に複数ファイル出てくるので、

newpost-catch/style.css　を選択

/* Newpost Catch */

デフォルト

#npcatch li{
 overflow:hidden;
 clear:both;
 margin:0px 0px 0px;
 }

#npcatch img{
 float:left;
 padding:5px 10px;
 }

#npcatch .title{
 width:135px;
 float:left;
 padding:5px 5px 5px 0px;
 }

#npcatch li:hover{
 }

#npcatch li:hover .title{
 }

#npcatch li:hover .title a{
 }

#npcatch li:hover .date{
 }

#npcatch li{

overflow:hidden;

clear:both;

margin:0px 0px 0px;

}

#npcatch img{

float:left;

padding:5px 10px;

}

#npcatch .title{

width:135px;

float:left;

padding:5px 5px 5px 0px;

}

#npcatch li:hover{

}

#npcatch li:hover .title{

}

#npcatch li:hover .title a{

}

#npcatch li:hover .date{

}

変更後

#npcatch li{
 list-style-type: none;
 overflow:hidden;
 clear:both;
 vertical-align:top;
 border-bottom: 1px dotted #666666;
 }
 #npcatch img{
 float:left;
 padding:5px 10px 5px 3px;
 }
 #npcatch .title a{
 font-size: 14px;
 font-weight: 500;
 text-decoration: none;
 }
 #npcatch .date {
 font-size: 10px;
 font-weight: 300;
 display:block;
 color: #adb5bf;
 margin-bottom: 5px;
 }
 #npcatch li:hover{}
 #npcatch li:hover .title{}
 #npcatch li:hover .title a{}
 #npcatch li:hover .date{}[/su_note]