[WordPress] 新着記事にサムネイル画像を表示するプラグイン「Newpost Catch」のカスタマイズ

Newpost Catchの導入

WordPressの「最近の投稿（新着記事）」にアイキャッチ（サムネイル）を表示するウィジェットプラグイン「Newpost Catch」を導入してみました。

これまで新着記事の表示は、テーマに付属していたウィジェットを使っていました。最近の投稿、タグ、コメントの３つをタブ切り替えで表示できて便利だったのですが、これだとテーマを変更すると使えなくなってしまうんですよね。

そんなわけで、テーマを変更しても使えるウィジェットプラグイン「Newpost Catch」を導入することにしました。

Newpost Catchのカスタマイズ

ウィジェットの設定画面では、以下の項目が設定できます。

• タイトル
• サムネイルのサイズ（幅）
• サムネイルのサイズ（高さ）
• 投稿件数
• 投稿日

これでもある程度のカスタマイズはできるのですが、スタイルや投稿日のフォーマットを変更するには、CSSやPHPファイルに手を加える必要があります。

CSSのカスタマイズ

Newpost Catchでは、独自作成したCSSを適用することができます。独自作成したCSSを適用する場合は「テーマディレクトリ/css/」内に「newpost-catch.css」というファイルを作成します。

Newpost Catchプラグインのディレクトリ内にもデフォルトの「style.css」があるのですが、読み込み優先度としては

newpost-catch.css　＞　style.css

「Newpost Catch」 WordPress Plugin 今村だけがよくわかるブログ

となるとのことです。

ということで「newpost-catch.css」を作成して、「テーマディレクトリ/css/」に配置しました。スタイルは以下のような感じで指定しました。

#npcatch li{
    overflow:hidden;
    clear:both;
    list-style: none;
    border-bottom:1px dotted #383C3F;
    padding:0px 0px 9px 0px;
    margin:0px 0px 8px 0px;
}

#npcatch img{
    float:left;
    border:solid 5px #3D3E3C;
    border-image: initial;
}

#npcatch a:hover img{
    float:left;
    border:solid 5px #3CF;
    border-image: initial;
}

#npcatch .title{
    width:230px;
    float:left;
    padding:0px 0px 0px 10px;
    font-size:15px;
    font-weight: bold;
    line-height: 120%;
    text-shadow: 2px 2px 3px #CCC;
    border-bottom: none;
}

#npcatch li:hover{
}

#npcatch li:hover .title{
}

#npcatch li:hover .title a{
}

#npcatch li .date{
    color:#333;
    font-size:12px;
    font-weight: normal;
    line-height: 120%;
    text-shadow: none;
}

#npcatch li:hover .date{
}

class.phpのカスタマイズ

スタイルのカスタマイズはCSSだけでも大体いじれるのですが、タイトルと投稿日の表示順や日付のフォーマットを変えたかったので、プラグイン内のPHPファイルも少しだけいじりました。

いじったのは「/wp-content/plugins/newpost-catch」配下の「class.php」というファイルです。

投稿日をタイトルより前に持ってきて、日付のフォーマットを「年月日（曜日）時間」で表示するようにしてみました。

<span class="title">
    <?php if ( $instance['date']['active'] ) { ?>
        <div class="date"><?php esc_html( the_time('Y年m月d日(D) H:i' , '' , '' ) ); ?></div>
    <?php } ?>
    <a href="<?php esc_attr( the_permalink() ); ?>" title="<?php esc_attr( the_title() ); ?>">
        <?php esc_html( the_title() ); ?>
    </a>
</span>

ただし、プラグイン内のphpファイルは、アップデートで上書きされる可能性があります。カスタマイズを加えたソースはバックアップしておくなど、各自ご留意ください。

カスタマイズ後の新着記事ウィジェット

カスタマイズ後の新着記事ウィジェット

上記カスタマイズでこんな感じの新着記事ウィジェットができました。ウィジェットの設定は、投稿件数を5件にして、投稿日を表示するようにしています。

マウスオーバーでサムネイルの外枠ハイライト

マウスオーバーでサムネイル画像の外枠がハイライトするようになっています。なかなか良い感じに仕上がったと思うのですが、どうでしょうかね？

参考

「Newpost Catch」 WordPress Plugin 今村だけがよくわかるブログ

Newpost Catchを使って『最近の投稿』にサムネイル画像を表示させる方法（修正2013-01-28） | スキコミ

[WP] サイドバーウィジェットの最近の記事にサムネイル画像を表示する | VIVABlog

PHPによるWordPressカスタマイズブック―3.x対応

posted with amazlet at 13.04.07

藤本 壱
ソシム
売り上げランキング: 96,451

Amazon.co.jpで詳細を見る