こんにちは、こんばんは。たたです。
本記事では、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つとも設定し終わると、こんな感じになっていると思います。
作成が完了したら、公開してトップページの作成は完了になります。
サイト型トップページの設定方法
ここまでの手順で作成した固定ページを公開しましたが、今のままだとトップページとして設定されていないので、作成した固定ページをトップページとして設定する必要があります。
「設定」⇒「表示設定」から設定を開いてください。
「ホームページの表示」の「固定ページ」にチェックをいれて、以下の内容で設定してください。
- ホームページ：作成したトップページ用の固定ページ
- 投稿ページ：作成した新着記事用の固定ページ
固定ページを公開していないと、選択肢として表示されないので注意してください
設定が完了したら、「変更を保存」を押して保存しましょう。
これで、すべての設定が完了になります。お疲れさまでした！
最後に
サイト型トップページの作成手順を解説しましたが、本記事で紹介している内容は基本的な操作になります。
固定ページを使って作成しているので、いろいろとお好みのカスタマイズができるかと思いますので、挑戦してみてください！
（自分も気になって、ちょこちょこ触ってしまいます・・・）
