No. 1714
投稿内容カテゴリー
amazon


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


Palmo (パルモ)「片手でラクラク いつも安定、安全、安心」

1) 2017-10〜2018-07間のブログの画像が表示されない理由が判明しました。投稿記事内の画像リンクの共有設定がなされていないことが原因でした。

2) 現在、私の思い入れの強い記事、気付いた記事から随時リンクの貼り直しをしていっています。(主に飲食系、FSP、FFP系などから)。仕事の都合などで当面画像が表示されないご不便をおかけすることお詫びいたします。

スポンサーリンク
336×280 レクタングル(大)




ブログランキング

その買うを、もっとハッピーに。|ハピタス

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

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

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

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

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

Crayon Syntax Highlighter ~phpの編集時の内容をエディター風に書き出すプラグイン~
JALメタル、ANAダイヤモンド、SPGライフタイムプラチナ、ダイナースプレミアムカード、その他オタク趣味も含めた徒然。今回は、Crayon Syntax Highlighter ~phpの編集時の内容をエディター風に書き出すプラグイン~

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

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

newpost-catch/class.php の編集

ダッシュボード → プラグイン編集 → 右上の『

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

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 :
?>

こちらの

      <?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('', ', '); ?>

以下のようになったら、

<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 :
?>

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

newpost-catch/style.css の編集

ダッシュボード → プラグイン編集 → 右上の『

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

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{
 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]

に書き換え。

ショートコード

%d人のブロガーが「いいね」をつけました。