ブログのトップページに新着記事を表示するようにすれば、定期的にブログに来てくれる読者さんに記事を更新したことを伝えることができます。
プラグインの導入方法
プラグイン→新規追加
画面右上の検索窓に「newpost」と入力
プラグインがいくつか表示されるので、「Newpost Catch」の「今すぐインストール」をクリック。
しばらくするとインストールが終了するので、「有効化」をクリック
ショートコードを挿入
新着記事を表示させたい場所にショートコードを挿入するだけで、新着記事を表示することができます。
ここでは固定ページの先頭に新着記事を挿入してみます。
挿入したい固定記事の編集画面で、新着記事を表示させたい場所に、以下のコードを入力します。
育児で1人になりたいと思う原因と５つの対処法を紹介
子育てで寝ても寝ても眠い！２つ原因と３つの対策を紹介！
夫婦がずっと一緒で疲れず仲良く長続きするコツ
子育てを通して成長したこと！これからパパママになるあなたへ
夫婦がずっと好きでいられる8つのコツを紹介します！
記事を表示させると、このようになります。
やたら文字が大きくて、サムネイル画像が小さすぎて何の画像か分かりません。
おまけに、いつ投稿記事されたのかもわからない。
このような場合はショートコードを編集しましょう！
ショートコードを編集！
そこで、以下のようにコードを変更します。サイズはお好みで調整してください。
- 育児で1人になりたいと思う原因と５つの対処法を紹介2022年1月4日
- 子育てで寝ても寝ても眠い！２つ原因と３つの対策を紹介！2021年12月29日
- 夫婦がずっと一緒で疲れず仲良く長続きするコツ2021年12月25日
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」。
すこし修正が必要なのが面倒ですが、一度修正すればずっと（たぶん）大丈夫です。
このプラグインをぜひあなたも利用してくださいね！
