こんにちは、こんばんは。たたです。
本記事では、Wordpressテーマの1つである「Cocoon」を使用した、サイト型トップページの作成方法と、作成後の設定方法について解説していきます。

ところどころ、実際の画面を交えながら解説していくので、初心者の方も安心してください!
サイト型トップページとは
まず、サイト型トップページとはなんぞや?という方に向けて簡単な解説を行いたいと思います。
ブログ型トップページ
本記事を読んでいる皆様は、おそらくこちらのブログ型トップページになっていると思います。
このように、記事が投稿した順に表示されているのが、ブログ型トップページの特長になります。

ブログ型トップページについては、以下のようなデメリットが考えられます。
- 記事数が増えてくると、ページ数が増えてしまい複雑になる
- 実際にユーザが見たい記事を探しづらい
サイト型トップページ
サイト型トップページは、ブログ型トップページとは違って「新着記事」や「人気記事」、「カテゴリ」など、自分がおすすめしたい記事を並べることができます。

サイト型トップページにすると、以下のようなメリットが考えられます。
- 記事数が増えても、ページ数は1ページのままなのでシンプル
- 人気記事や、カテゴリ毎に分かれているので目的の記事にたどり着きやすい
※ページトップの「おすすめカード」については、ブログ型トップページでも配置できます。詳しくは別記事にて解説しています。
サイト型トップページの作り方
本記事では、先ほど紹介した画像を例に、「新着記事」「人気記事」を配置するトップページを作成します。
ざっくり、これらがやること一覧になります。
- 「新着記事」「人気記事」用の固定ページを作成する
- 「トップページ」用の固定ページを作成する
では、それぞれ詳しく解説していきます。
「新着記事」「人気記事」用の固定ページを作成する
この固定ページは記事下のボタン「~をもっと見る」のリンク先になります。

まずは、「固定ページ」⇒「新規作成」と進んで、固定ページを作成しましょう。

新着記事の固定ページですが、タイトルは「新着記事」として、中身は何も書かずにそのまま公開してください。(タイトルは分かりやすい名前であれば何でもOKです)

続いて、人気記事の固定ページですが、タイトルは「人気記事」として、中身は以下をそのままコピペして、公開してください。(こちらもタイトルは分かりやすい名前であれば何でもOKです)
popular_list (※両サイドに [ ] を記載してください)

これで、「新着記事」「人気記事」用の固定ページの作成はおしまいです!
「トップページ」用の固定ページを作成する
先ほど同様、「固定ページ」⇒「新規作成」と進んで、固定ページを作成しましょう。
タイトルは「トップページ」と記載します(ここも自分が分かりやすい名前でOKです)
続いて、COCOONレイアウトにある「2カラム」のブロックを追加してください。


2カラムの追加ができたら、それぞれのカラムに「新着記事」「人気記事」を設定していきます。
以下の3点を設定していきます。
- 見出し(「画像」ブロックを使用)
- 新着記事、人気記事の一覧(「カスタムHTML」ブロックを使用)
- 新着記事、人気記事ページへのリンクボタン(「ボタン」ブロックを使用)
実際の表示と、編集画面はこのような感じになります。

それぞれの設定の詳細を解説していきます。
見出し
まずは、見出しに使用したい画像を用意してください。
先ほど作成した、2カラムの一番上に「画像」ブロックを追加して、使用する画像を設定してください。
(ブロックを追加せず、画像をドラッグ&ドロップでもOKです)

本記事では画像を設定していますが、「見出し」ブロックを利用して、見出しを設定してもOKです。
新着記事、人気記事の一覧
つづいて、新着記事、人気記事の一覧です。
上記で設定した見出しの下に「カスタムHTML」ブロックを追加してください。

カスタムHTMLに、以下の内容を記載してください(それぞれ、両サイドに [ ] を記載してください)
新着記事
new_list count="4"
count=”4″:表示される記事数(例は4件表示)
人気記事
popular_list days="all" rank="0" count="4"
days=”all”:集計期間の指定(例は全期間)
rank=”0″:順位を表示したい場合に”1″を設定。
count=”4″:表示される記事数(例は4件表示)
カテゴリ(カテゴリの一覧を出したい場合に、使用してください)
new_list count="4" cats="XX" children="0"
count=”4″:表示される記事数(例は4件表示)
cats=”XX”:XXにカテゴリのIDを設定(カテゴリのIDは「投稿」⇒「カテゴリー」から確認します)

children=”0″:子カテゴリを含めたい場合に”1″を設定。
新着記事、人気記事ページへのリンクボタン
つづいて、新着記事、人気記事の一覧です。
上記で設定した見出しの下に「ボタン」ブロックを追加してください。

以下の内容をそれぞれ設定してください。
- URL:リンク先のURL
- リンクの開き方:ボタンを押したときの、リンクの開き方を選択してください
- サイズ:ボタンのサイズを選択してください
- 円形にする、光らせる:ボタンの装飾です。お好みに合わせてオン/オフしてください
- 文字サイズ:ボタンの文字サイズを選択してください
- 色設定:ボタンの色や、ボタン上の文字色の設定です。お好みに合わせて設定してください。

リンク先のURLについては、「新着記事」「人気記事」用の固定ページを作成するで作成した、固定ページのURLを設定しましょう。
3つとも設定し終わると、こんな感じになっていると思います。
作成が完了したら、公開してトップページの作成は完了になります。

サイト型トップページの設定方法
ここまでの手順で作成した固定ページを公開しましたが、今のままだとトップページとして設定されていないので、作成した固定ページをトップページとして設定する必要があります。
「設定」⇒「表示設定」から設定を開いてください。

「ホームページの表示」の「固定ページ」にチェックをいれて、以下の内容で設定してください。
- ホームページ:作成したトップページ用の固定ページ
- 投稿ページ:作成した新着記事用の固定ページ

固定ページを公開していないと、選択肢として表示されないので注意してください
設定が完了したら、「変更を保存」を押して保存しましょう。

これで、すべての設定が完了になります。お疲れさまでした!
最後に
サイト型トップページの作成手順を解説しましたが、本記事で紹介している内容は基本的な操作になります。
固定ページを使って作成しているので、いろいろとお好みのカスタマイズができるかと思いますので、挑戦してみてください!
(自分も気になって、ちょこちょこ触ってしまいます・・・)