WordPressプラグインNewpost Catchで最新投稿を表示する方法

2017年2月15日2018年2月15日

ブログのトップページに新着記事を表示するようにすれば、定期的にブログに来てくれる読者さんに記事を更新したことを伝えることができます。

プラグインの導入方法

プラグイン→新規追加

画面右上の検索窓に「newpost」と入力

プラグインがいくつか表示されるので、「Newpost Catch」の「今すぐインストール」をクリック。

しばらくするとインストールが終了するので、「有効化」をクリック

ショートコードを挿入

新着記事を表示させたい場所にショートコードを挿入するだけで、新着記事を表示することができます。

ここでは固定ページの先頭に新着記事を挿入してみます。

挿入したい固定記事の編集画面で、新着記事を表示させたい場所に、以下のコードを入力します。


AAA Option Optimizer【WordPressプラグイン】でサイトヘルス改善しよう！
WordPressでPDFファイルをアップロードする方法
多言語化おすすめwordpressプラグインWPML～サポートが充実で素早い！～
WordPress多言語プラグインはこれ！WPML
グーグルアドセンスで稼ぐための記事

記事を表示させると、このようになります。

やたら文字が大きくて、サムネイル画像が小さすぎて何の画像か分かりません。

おまけに、いつ投稿記事されたのかもわからない。

このような場合はショートコードを編集しましょう！

ショートコードを編集！

そこで、以下のようにコードを変更します。サイズはお好みで調整してください。


AAA Option Optimizer【WordPressプラグイン】でサイトヘルス改善しよう！2024年8月29日
WordPressでPDFファイルをアップロードする方法2024年5月6日
多言語化おすすめwordpressプラグインWPML～サポートが充実で素早い！～2024年4月28日

date=”1″とは、日付を表示させるという意味です。

posts_per_page=”3″とは、新着記事の表示数を３記事にするという意味です。

width=”40″ height=”40”と入力することで、画像の大きさを調整します。

このように書き換えてから、再び記事を表示すると、以下のように表示されました。

だいぶマシになりましたが、でも、写真とタイトルがずれていて気持ち悪いです。

さらに修正を加えましょう。

CSSでタイトルを修正！

写真とタイトルのズレは、CSSから修正することができます！

管理画面の外観→カスタマイズ

追加CSSを選択

下の図の赤枠の部分に以下のコードを貼り付け。

/*プラグインNewpost Catchでタイトルを整えるコード*/
#npcatch li{
         overflow:hidden;
         clear:both;
         vertical-align:top;
}
#npcatch img{
         float:left;
         padding:5px 10px 5px 0;
}
#npcatch .title a{
         font-weight: 700;
}
#npcatch .date {
         font-size: x-small;
         font-weight: 400;
         display:block;
         color: #666699;
         margin-bottom: 5px;
}
#npcatch li:hover{}
#npcatch li:hover .title{}
#npcatch li:hover .title a{}
#npcatch li:hover .date{}

コードを貼り付けたら、「公開」をクリック。