[Cocoon]サイト型トップページへの変更手順-WordPress

WordPressは初期設定だと新着順に記事が並んでいますが、それを「サイト型」に変更するカスタマイズ方法を紹介します。

サイト型とは、ビジターが目的に合わせて各コンテンツにアクセスしやすくしたトップページの形態のことです。

記事数が増えてくると新着順だけではなかなか目当ての情報にたどり着きづらくなりますよね。サイト型に変更することで、検索で上位表示されている一部の記事だけでなく、埋もれているおすすめの記事などにアクセスを集めやすくなります。

サイト型のトップページに掲載すると良さそうな情報

サイト型への変更作業に入る前に、トップページに何を表示するかをある程度考えておくと作業が順調に進みやすいです。カスタマイズ記事などを参考にしてみると、イメージが膨らみます。

サイト型にしているページをいくつか見てみたところ、次のような情報を掲載している人が多いようです。

  • サイトの趣旨説明、どんな人に読んでほしいか
  • 自己紹介
  • 新着記事や人気記事リスト
  • カテゴリー毎の新着記事や人気記事リスト
  • おすすめ記事
  • 宣伝(自分のサブブログや書籍、サイトに関連のあるアフィリエイトリンク)

サイト型に変更する手順

WordPressのブログをサイト型に変更するのは2ステップです。

サイト型への変更手順
  • Step1
    トップページを固定ページで作成する

    固定ページを新規作成して、トップページ用のページを作成する

  • Step2
    作成した固定ページを「ホームページ」に設定する

    WordPressの「設定」-「表示設定」-「ホームページの表示」から固定ページを選択し、Step1で作成したページを選択する

トップページを固定ページで作成する

トップページ用のページを固定ページで作成します。ページタイトルなどはcssで非表示にできるので、自分でわかりやすいように設定します。私は「ホーム」にしました。

作成した固定ページを「ホームページ」に設定する

トップページにアクセスしたときに、先ほど作成した固定ページが表示されるように設定します。

「設定」の「表示設定」のページにアクセスします。

ホームページを「最新の投稿」から「固定ページ」に変更します。ドロップダウンリストから、トップページ用に作った固定ページを選択します。

下にある投稿ページというのが何のために使うものなのかよくわかってないですが、設定しなくても今のところ支障ありません。記事一覧で特別なレイアウトにしたいときに設定するのかな?

以上でトップページをサイト型にする設定は完了です。ブログのトップページにアクセスして確認してみてください。

このサイトで行ったカスタマイズ方法

私がこのサイトで実際にやったカスタマイズ方法を紹介します。

カテゴリーやタグへのリンク

上の画像は当サイトのトップページ上部です。特に力を入れているジャンルへのリンクを載せています。画像に、タグページへのリンクを貼っています。

青い丸い画像は、canvaのテンプレートをほぼそのまま使って作ったものです。

新着記事や人気記事を載せる

当サイトでは新着記事が2列で表示されるようにしました。

ブロックエディタの「カラム」を使えば横並びで配置できます。Cocoonレイアウトの方の「2カラム」がなぜか私の環境ではうまく動作してくれないので、標準で用意されているカラムブロックの方を使っています。

新着記事はブロックエディタの「ウィジェット」の中にある「最新の投稿」を使って取得しています。

左のカラムの新着記事は、アイキャッチ画像を載せています。右のカラムの新着記事はアイキャッチ画像無しで、リストの一番最初をcssで非表示にしています。無理やり実現させているだけなので、もっといい方法があるのかもしれません。

リストの先頭を非表示にするcss
.リストのクラス名 li:first-child {
    display: none;
}

Cocoonを使っている方は新着記事や人気記事はショートコードを使って載せることもできます。ショートコードだとサムネイル非表示機能がないので、私はウィジェットの方を使いました。

新着記事リストのショートコード
[new_list count=5 arrow=1]
人気記事リストのショートコード
[popular_list days=14 rank=1 count=5 arrow=1]

各パラメーターについてはCocoon公式ページを参考にしてください。

Cocoon以外のテーマをお使いの方は、各テーマにショートコードが用意されているか確認してみてください。

新着記事の「新着記事一覧」リンクには「トップページURL/?cat=0」を設定しています。

ピックアップ記事エリアを作る

cocoonの「ナビカード」ショートコード機能を使って、おすすめ記事を載せるエリアを作りました。

ナビカードを呼び出すには、まずはナビカード用のメニューを作成し、呼び出したい場所にショートコードを記載します。

ナビカード呼び出しショートコード例
[navi_list name="メニュー名" bold=1 arrow=1]

大きいサムネイルと、その下のリストは別々のメニューを作って組み合わせています。

公式サイトに詳しい手順が載っているので参考にしてみてください。

プロフィールを載せる

プロフィールもショートコードで簡単に呼び出せます。

プロフィールを表示するショートコード
[author_box]

カテゴリーごとの人気記事やピックアップ記事を載せる

カテゴリーを2列にして、左側はカテゴリー内のランダム記事を、右側には人気ランキングを載せました。記事をランダムに取得するには、新着記事のショートコードに「random=1」を入れるだけで実現できます。

Cocoonのショートコードをチェック

Cocoonにはたくさんのショートコードが用意されています。私は2年ほどcocoonを使っているのですが、今回サイト型にする際に初めて知ったコードもありました。

一度、全部のショートコードをざっと見てみることをお勧めします。カスタマイズ記事を読むだけでは全部のコードを網羅できないと思いますので。

ショートコード一覧は、ものぐさWEBノートさんがわかりやすいです。

今回のトップページカスタマイズでは使っていませんが、ボックスメニュー機能があったことを知ってびっくりしました。SANGOなどで作られたサイトを見て、ボックスメニューかわいいなーと思っていたんですが、Cocoonでも簡単に実装できるんですね。私はサイドバーで使っています。

サイト型にするのにおすすめのテーマ

有料テーマの「SWELL」を使っている方のトップページは素敵なデザインが多いので参考になります。

いくつかおすすめのサイトを紹介しますね。記事執筆時点(2021.4.25)でSWELLをサイト型にして使っている方のリンクを掲載しているので、情報が変わっている可能性もあることをご了承ください。

私もSWELLを使ってみたいなとは思っているものの、テーマを変更するのは大変な労力がかかるのでなかなか手が出ないでいます。個別投稿ページに関してはCocoonでも十分満足しているので、トップページのためだけにテーマを変えるのはちょっと無理かなぁと……

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