【WordPress】トップページを固定ページにしつつ最新記事も表示する方法

フレームあるいはテーマ

たびたび書いておりますが、当方ではWordPressのテーマに「Simplicity」(→SWELL)を使わせていただいています。

2024年テーマをSimplicity」→「Cocoon」→「SWELLと変更しております。が、この記事の内容はどのテーマでも適応します。(この記事の初稿は2017年9月ですが2023年リライトしています)

カスタマイズしやすく、プラグインをたくさんインストールしなくても欲しい機能が元々備わっています。 「Simplicity」(2024年時点では 「Simplicity」は「Cocoon」へ 、ほぼアップデートされています)については、制作の方のサイトがどこよりも詳しく説明されているのでどうぞ。

初心者でもプロでもカスタマイズしやすい最強ブロックエディターテーマSWELL は、こちら↓

SEWLLバナー
目次

トップページを普通のホームページのように固定表示させる方法

通常、何もしていない状態のWordpressのトップページは最新記事へのリンクカードが並ぶ形になります。普通のブログでよく見るやつです。  

トップページを固定ページにしつつ最新記事も表示する方法

表紙のような固定トップページに「記事一覧」を表示する方法

マガジン型、といいますか、ブログのトップページを記事一覧だけではなく、挨拶文・イラスト・バナーなどで飾り、その上で記事一覧も表示する方法です。

1.まず「固定ページ」を作成する

ダッシュボード(管理画面)のサイドバーから「固定ページ」→「新規追加」を選択。 挨拶などのトップページの内容をとりあえず、固定ページで作成します。 (ウチは、ずっと沈んでいて誰も見やしないブログ始めの記事をここに移してきます。)

「とりあえず」作って後で編集、で構いません。タイトルは「TOP」でも何でも良いです。

「公開」します。

2.白紙の「固定ページ」を1つ作る

もう一つ固定ページを作ります。   ダッシュボード(管理画面)のサイドバーから「固定ページ」→「新規追加」を選択。 タイトルはどうでもいいです。 スラッグもどうでもいいです。(「記事一覧」として利用したい方は”list”などアルファベットにしておきましょう) 内容は白紙で。このまま公開します。

ザックリご説明すると、この白紙の固定ページを後ほど「設定」すると、自動的に投稿記事の一覧が表示されるようになります。

この固定ページには何か書いても表示されません。記事一覧用のページです。

top-3

3.フロント(トップ)ページに「固定ページ」を設定する

「設定」→「表示設定」をクリック。 「フロントページの表示」で「固定ページ」を選択。 「フロントページ」というのがWordpressのトップページの事です。 「固定ページ (以下を選択)」を選択します。 「フロントページ」に、先ほど作ったトップに表示させたいページを。

トップページを固定ページにしつつ最新記事も表示する方法

「投稿ページ」に、先ほど作った白紙のページを。 設定して「変更を保存」。   この段階で白紙で作ったページのURLを表示させてみて下さい。 最新記事の一覧が表示されていると思います。 トップページには先ほど作った「フロントページ」が表示されていると思います。

トップページ(フロントページ)を編集する

Simplicity の場合は簡単に最新記事を固定ページに表示できる

top-7

Simplicity をテーマ使用している方は、ここから簡単にトップページに新記事一覧を表示できます。 ダッシュボード(管理画面)のサイドバーから「外観」→「ウィジェット」を選択。 「新着記事」新着記事リストを表示するSimplicityウィジェットです。 を、固定ページの挿入したい場所に挿入して保存します。

と、2017年の段階では書いていたのですが

書いていたのですが……

ブロックエディターでは、どんなテーマでも固定ページに記事一覧を簡単に表示できます

2024年、すでに機能の少ない公式テーマ「Twenty」シリーズですら、固定ページに記事一覧を表示することができます

せっかくなので、テーマの機能が本当に少ない「Twenty Twenty-One テーマ」に実装しますね。

つまり、どのようなテーマでも以下の方法で最低限「新記事一覧」を表示することができます。

1.「最近の投稿」ブロックを選択

「ブロック選択(+)」→「すべて表示」をクリックして、左に出て来るブロックメニューから「最近の投稿」を選択します。

トップページを固定ページにしつつ最新記事も表示する方法

画像は「Twenty Twenty-One テーマ」のものですが、テーマによってはもっと美しく、もっと簡単に実装できるブロックもあるかも知れませんので、そこら辺はご自身のテーマに備えられている「記事一覧」ブロックを見てみてください。

2.左メニューで調整

これだけで、すでに新記事一覧が表示されます。

後は好みに調整していきます。

画像を見ながらご説明します。

トップページを固定ページにしつつ最新記事も表示する方法

一覧上のメニューで「一覧の形」を調整できます。

  • A : 一覧の幅を調整できます。デフォルトは「記事コンテンツの幅」です。
  • B: ここをクリックすると一覧がボックス表示(横並び)になります。
  • C: 一覧に区切り線や枠線を付けます
  • D : 「投稿コンテンツ」画像は記事タイトルしか表示されていませんが、ここをオンにすると記事の抜粋が表示されます。
  • E: 日付やライター名を一覧に表示させるかどうかの選択です
  • F: アイキャッチ画像を表示させるかどうかの選択です。オンにすると画像の大きさや画像の位置を選べます。

設定例1

以下の画像は

  • 幅広
  • 投稿コンテンツ抜粋あり
  • アイキャッチ画像を表示(画像はサムネイルで左寄り)

に設定した例です。

トップページを固定ページにしつつ最新記事も表示する方法

設定例2

以下の画像は

  • 幅広
  • グリッド表示(3カラム)
  • 投稿コンテンツ抜粋あり
  • アイキャッチ画像を表示(画像は中でセンター)

に設定した例です。

トップページを固定ページにしつつ最新記事も表示する方法

Twentyシリーズでも出来るサイト型トップページ仕上がり

トップページを固定ページにしつつ最新記事も表示する方法

記事一覧そのものを固定記事と一緒にトップに表示させる

方法は以上です。

クラシックエディターを使っておられるという方も、テーマごとのショートコードなどで記事一覧を固定ページに組み込むことはできるはずです。

関連記事  

あわせて読みたい
[WordPress]「Cocoon」のトップページにカテゴリーメニューを表示させる方法など 前記事『ワードプレスのテーマをSimplicityからCocoonへ簡単に変える方法』からのココです。 記事の内容は、テーマの移行ではなくて初めての「Cocoon」だという方でも使...

テーマ別 デフォルトの「新記事一覧」だけで出来るトップページカスタマイズ

以下は、テーマの機能だけで「記事一覧」表示のままで出来るトップページカスタマイズです。

Simplicity(無料テーマ)

Simplicityでは、最新記事だけ大きなカードにするような事も出来ます。これだけでもだいぶイメージが変わりますね。

top-1

Cocoon (無料テーマ)

Cocoon では最新記事表示のままでヘッダーアピール画像・カルーセル・お気に入りカード・新記事3列などを実装できます。

トップページを固定ページにしつつ最新記事も表示する方法

SWELL

SWELLではヘッダービジュアル自体をスライドさせたり、動画にしたり、最新記事表示のままでプロ並みのデザインを自由に作成することができます。

トップページを固定ページにしつつ最新記事も表示する方法

どうしても上手く行かない方はご依頼ください

WEBサイト制作の一木堂
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメント一覧 (1件)

コメントする

目次