ブログのトップページに新着記事を表示するようにすれば、定期的にブログに来てくれる読者さんに記事を更新したことを伝えることができます。
プラグインの導入方法
プラグイン→新規追加
画面右上の検索窓に「newpost」と入力
プラグインがいくつか表示されるので、「Newpost Catch」の「今すぐインストール」をクリック。
しばらくするとインストールが終了するので、「有効化」をクリック
ショートコードを挿入
新着記事を表示させたい場所にショートコードを挿入するだけで、新着記事を表示することができます。
ここでは固定ページの先頭に新着記事を挿入してみます。
挿入したい固定記事の編集画面で、新着記事を表示させたい場所に、以下のコードを入力します。
wordpress画面に電話ボタンを簡単に設置するプラグインCall Now Button
wordpressプラグインContact Form 7で問合せフォームを簡単作成しよう
wordpressプラグインSnow Monkey Blocksで写真をきれいに並べよう！
WordPressにインスタグラムを埋め込むプラグインSmash Balloon Social Photo Feedの使い方
wordpressテーマCocoonで背景画像を設定する方法
記事を表示させると、このようになります。
やたら文字が大きくて、サムネイル画像が小さすぎて何の画像か分かりません。
おまけに、いつ投稿記事されたのかもわからない。
このような場合はショートコードを編集しましょう！
ショートコードを編集！
そこで、以下のようにコードを変更します。サイズはお好みで調整してください。
- wordpress画面に電話ボタンを簡単に設置するプラグインCall Now Button2022年5月15日
- wordpressプラグインContact Form 7で問合せフォームを簡単作成しよう2022年5月1日
- wordpressプラグインSnow Monkey Blocksで写真をきれいに並べよう！2022年4月30日
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」。
すこし修正が必要なのが面倒ですが、一度修正すればずっと（たぶん）大丈夫です。
このプラグインをぜひあなたも利用してくださいね！
