WordPressプラグインNewpost Catchで最新投稿を表示する方法
ブログのトップページに新着記事を表示するようにすれば、定期的にブログに来てくれる読者さんに記事を更新したことを伝えることができます。
プラグインの導入方法
プラグイン→新規追加
画面右上の検索窓に「newpost」と入力
プラグインがいくつか表示されるので、「Newpost Catch」の「今すぐインストール」をクリック。
しばらくするとインストールが終了するので、「有効化」をクリック
ショートコードを挿入
新着記事を表示させたい場所にショートコードを挿入するだけで、新着記事を表示することができます。
ここでは固定ページの先頭に新着記事を挿入してみます。
挿入したい固定記事の編集画面で、新着記事を表示させたい場所に、以下のコードを入力します。
ダイソー人気おすすめ新商品「毛糸」レビュー！2021年9月24日
MySQL設定を変更したらサーバーに接続できなくなった！
個人名義の自家用車を法人（合同会社）名義に変更する方法- 【最新】wordpressでphpバージョンを更新する方法
Fille Zillaで解決！プラグインFatal Errorでwordpress管理画面に入れない！
記事を表示させると、このようになります。
やたら文字が大きくて、サムネイル画像が小さすぎて何の画像か分かりません。
おまけに、いつ投稿記事されたのかもわからない。
このような場合はショートコードを編集しましょう！
ショートコードを編集！
そこで、以下のようにコードを変更します。サイズはお好みで調整してください。
- ダイソー人気おすすめ新商品「毛糸」レビュー！2021年9月24日2021年9月25日
- MySQL設定を変更したらサーバーに接続できなくなった！2021年9月5日
- 個人名義の自家用車を法人（合同会社）名義に変更する方法2021年5月16日
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{}
コードを貼り付けたら、「公開」をクリック。
すると、以下のとおりキレイに表示されました！
まとめ
新着記事を好きな場所に表示できるプラグイン「Newpost Catch」。
すこし修正が必要なのが面倒ですが、一度修正すればずっと（たぶん）大丈夫です。
このプラグインをぜひあなたも利用してくださいね！
