【Cocoon】 サイト型トップページの作成&設定方法解説(図解あり)

Blog関連

こんにちは、こんばんは。たたです。

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

たた
たた

ところどころ、実際の画面を交えながら解説していくので、初心者の方も安心してください!

サイト型トップページとは

まず、サイト型トップページとはなんぞや?という方に向けて簡単な解説を行いたいと思います。

ブログ型トップページ

本記事を読んでいる皆様は、おそらくこちらのブログ型トップページになっていると思います。

このように、記事が投稿した順に表示されているのが、ブログ型トップページの特長になります。

ブログ型トップページ

ブログ型トップページについては、以下のようなデメリットが考えられます。

  • 記事数が増えてくると、ページ数が増えてしまい複雑になる
  • 実際にユーザが見たい記事を探しづらい

サイト型トップページ

サイト型トップページは、ブログ型トップページとは違って「新着記事」や「人気記事」、「カテゴリ」など、自分がおすすめしたい記事を並べることができます。

サイト型トップページ

サイト型トップページにすると、以下のようなメリットが考えられます。

  • 記事数が増えても、ページ数は1ページのままなのでシンプル
  • 人気記事や、カテゴリ毎に分かれているので目的の記事にたどり着きやすい

※ページトップの「おすすめカード」については、ブログ型トップページでも配置できます。詳しくは別記事にて解説しています。

サイト型トップページの作り方

本記事では、先ほど紹介した画像を例に、「新着記事」「人気記事」を配置するトップページを作成します。

ざっくり、これらがやること一覧になります。

  • 「新着記事」「人気記事」用の固定ページを作成する
  • 「トップページ」用の固定ページを作成する

では、それぞれ詳しく解説していきます。

「新着記事」「人気記事」用の固定ページを作成する

この固定ページは記事下のボタン「~をもっと見る」のリンク先になります。

リンク先例

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

固定ページ

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

新着記事ページ

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

popular_list (※両サイドに [ ] を記載してください)

人気記事

これで、「新着記事」「人気記事」用の固定ページの作成はおしまいです!

「トップページ」用の固定ページを作成する

先ほど同様、「固定ページ」⇒「新規作成」と進んで、固定ページを作成しましょう。

タイトルは「トップページ」と記載します(ここも自分が分かりやすい名前でOKです

続いて、COCOONレイアウトにある「2カラム」のブロックを追加してください。

2カラム
トップページ

2カラムの追加ができたら、それぞれのカラムに「新着記事」「人気記事」を設定していきます。

以下の3点を設定していきます。

  • 見出し(「画像」ブロックを使用)
  • 新着記事、人気記事の一覧(「カスタムHTML」ブロックを使用)
  • 新着記事、人気記事ページへのリンクボタン(「ボタン」ブロックを使用)

実際の表示と、編集画面はこのような感じになります。

実際の表示と編集画面の比較

それぞれの設定の詳細を解説していきます。

見出し

まずは、見出しに使用したい画像を用意してください。

先ほど作成した、2カラムの一番上に「画像」ブロックを追加して、使用する画像を設定してください。

(ブロックを追加せず、画像をドラッグ&ドロップでもOKです)

画像ブロック

本記事では画像を設定していますが、「見出し」ブロックを利用して、見出しを設定してもOKです。

新着記事、人気記事の一覧

つづいて、新着記事、人気記事の一覧です。

上記で設定した見出しの下に「カスタムHTML」ブロックを追加してください。

カスタム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つとも設定し終わると、こんな感じになっていると思います。

作成が完了したら、公開してトップページの作成は完了になります。

完成形

サイト型トップページの設定方法

ここまでの手順で作成した固定ページを公開しましたが、今のままだとトップページとして設定されていないので、作成した固定ページをトップページとして設定する必要があります。

「設定」⇒「表示設定」から設定を開いてください。

表示設定

「ホームページの表示」の「固定ページ」にチェックをいれて、以下の内容で設定してください。

  • ホームページ:作成したトップページ用の固定ページ
  • 投稿ページ:作成した新着記事用の固定ページ
ホームページの表示

固定ページを公開していないと、選択肢として表示されないので注意してください

設定が完了したら、「変更を保存」を押して保存しましょう。

たた
たた

これで、すべての設定が完了になります。お疲れさまでした!

最後に

サイト型トップページの作成手順を解説しましたが、本記事で紹介している内容は基本的な操作になります。

固定ページを使って作成しているので、いろいろとお好みのカスタマイズができるかと思いますので、挑戦してみてください!

(自分も気になって、ちょこちょこ触ってしまいます・・・)

タイトルとURLをコピーしました