まずは自己紹介をさせてください。gugusukeと申します。
![gugusuke](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-29_22-37-21_389-2.png)
TOPページに新着記事を表示することで最新の記事がわかりやすくなるのでオススメです。
TOPページに新着記事欄を設けて、公開した記事を新着順に並べて表示できるようになります。
オプションを駆使してオリジナルの表示方法に変更することができます。
新着記事作成の流れ
新着記事を作成する流れをご紹介していきます。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/S__22552812.png)
- 新着ページを作成する
- TOPページを作成する
- TOPページと新着ページを紐付ける
なんとたったの3ステップで完了できます。
新着ページを作成する
![](https://se-gugusuke.com/wp-content/uploads/2021/08/S__22560807.png)
まずは新着ページを作成していきます。
WordPressの管理画面から「固定ページ」>「新規追加」の順に進んでいきます。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/1f34a0026398d17fe23dfe0d43b0de64-1-e1656116988543.png)
次にタイトルを追加しますが、ここで入力したタイトルは特に使用しませんので、何でも良いかと思います。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/939fd4498075a20863865a37f9076700-1.png)
![gugusuke](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-29_22-37-21_389-2.png)
わたしはわかりやすく「新着記事」としています。
その他の項目は入力しなくて問題ありません。
タイトルを入力したら、右上の歯車マークを選択して、固定ページのタブを表示します。
少し下にいくとURLスラッグという項目がありますので、そこにURLとしたい文字を入力します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/c6e202e8be0fc955adcbeb41508460fd.png)
![gugusuke](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-29_22-37-21_389-2.png)
わたしは新着っぽい名前が良かったので「new」にしました。
この記事を公開して第1STEP完了となります。
TOPページを作成する
![](https://se-gugusuke.com/wp-content/uploads/2021/08/S__22560786.png)
TOPページを作成するには、新着ページの作成と同様にWordPressの管理画面から「固定ページ」>「新規追加」の順に進んでいきます。
タイトルにTOPページとして表示したい名前を入力します。
タイトルを入力しましたら、新着ページと同様にURLスラッグを入力していきます。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/6e1f6f5a55b5fbbd4ed2733502cf390e.png)
![gugusuke](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-29_22-37-21_389-2.png)
わたしはTOPページということで「top」にしました。
こちらも公開して第2STEP完了となります。
TOPページと新着ページを紐付ける
![](https://se-gugusuke.com/wp-content/uploads/2021/08/S__22560772.png)
次に作成したTOPページを編集し、最後に紐付けをして完了となります。
![gugusuke](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-29_22-37-21_389-2.png)
それでは、TOPページを編集していきましょう!
新着記事を表示するために「[/]ショートコード」を作成します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/164d0a65fa0b0439d53b8df556d7c5ff.png)
作成したショートコードに下記を入力します。
なんとこの一文だけで新着記事が表示できるコードとなっています。
最後にTOPページと新着記事の紐付けを行います。
WordPressの管理画面から「外観」>「カスタマイズ」の順に進んでいきます。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/b2fdcb32e5779841b72961a9fa6f3491.png)
ホームページ設定を選択します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/400dc55625d6ac8bad9a763df28df7e0.png)
ホームページの表示が固定ページにチェックが入っていることを確認します。入っていない場合は固定ページにチェックを入れます。
ホームページと投稿ページにそれぞれ先ほど作成したTOPページと新着ページを設定します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/961a68f29433e8e039aecaf737e15582-1024x584.png)
右側のプレビューページに新着順の記事が表示されていることが確認できます。
これで設定は完了になるので公開をすれば終了となります。
人と差を付けるオプション
ここからは他の人と少し違った新着画面を表示するためのオプションを紹介していきます。
他にもオプションはありますが、良さそうなオプションだけまとめましたので参考にしてみてください。
新着記事の数を指定します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/92f37f0b45a1873212df8f48bb91ecd3-1.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/7327588da9156390eabed102b5ebb100.png)
新着記事のレイアウトを指定します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/ef0ca059fb0d1b1f065dec81a64347cc.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/a9d0d871c3ee8b76df85eff7e1d795c0.png)
![](https://se-gugusuke.com/wp-content/uploads/2022/06/fd21f2aad45d952d64485e961f82acbe.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/8149d6913b974b2f91b7790b574d8e2d.png)
![](https://se-gugusuke.com/wp-content/uploads/2022/06/2c62afc4f184c9476aa8ac5367b8449d.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/f1ffef33b1a39e97049345423f482c51.png)
![](https://se-gugusuke.com/wp-content/uploads/2022/06/474015a426766ddb07abc5ead55acae0.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/897bee859a93f2aea3ceb1a776285e80.png)
記事のタイトルを太字にするかどうかを指定します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/3e55ccdf142452cb5052bf4e88349d11.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/10aab0bbd57fa2073b8e76ac3c3b67ad.png)
新着記事のレイアウトに矢印を表示するかどうかを指定します。
![](https://se-gugusuke.com/wp-content/uploads/2022/06/a0c27d116cbd0b56c03d8c6f69116179.png)
プレビュー画面
![](https://se-gugusuke.com/wp-content/uploads/2022/06/93c4a934111544ee3e7a81f7c7a29b56.png)
新着記事作成のまとめ
![](https://se-gugusuke.com/wp-content/uploads/2021/08/2020-12-30_12-11-09_563.png)
簡単3STEPでTOPページに新着記事を表示する方法をご紹介しました。
ブログのTOPページは個性があった方が読者の印象にも残るのではないかと思っています。
印象に残ればまた見に来てくれる可能性も高まりますし、万が一にもTOPページをブックマークやお気に入り登録いただければ、すぐに新着記事がわかるので読者にとっても良いことづくめです。
ぜひ、当記事を参考に個性的なTOPページを作成してみてはいかがでしょうか。
コメント