WordPressのトップページを1クリックでカスタマイズする方法【Cocoon版】

WordPressのテーマCocoonでトップページをカスタマイズする方法ブログ
てつこ
てつこ

WordPressのテーマCocoonを使っています。

記事をカテゴリーごとに分ける方法を教えて。

 

こういった方に向けた記事です。

 

WordPressでブログを立ち上げると、トップページの初期状態は、記事の一覧が新着順に表示される形式になっています。

 

目的の記事を探すとき、ページをスクロールしたり、次のページに移動したり、あるいはメニューを探す必要がありますよね。

 

せっかくたくさんの記事を書いても、トップページが初期状態のままだと、読者が記事を見つけるのに大変な思いをしているかもしれません。

 

トップページの新着記事をカテゴリーごとに分類すれば、記事が見つかりやすくなります。

 

一般的な方法としては固定ページを作成して、トップページに指定するといった作業が必要ですが、Cocoonの機能を使えば簡単に実現できます。

 

てつごろう
てつごろう

本当に1クリックでできちゃうんだよ。

 

今回はCocoonの機能を使って、トップページを簡単にカスタマイズする方法を解説します。

※バージョン2.1.6以降で、β版としてこの機能が追加されています。

 

WordPressのテーマCocoonでトップページをカスタマイズ

WordPressのテーマCocoonでトップページをカスタマイズする方法

まず完成イメージはこちらです。

※デザインの設定によって実際の見え方は異なります。

 

図の左のように初期状態では記事が新しいものから順に表示されます。

Cocoonの設定によってカテゴリごとに分けて表示すると、右のようになります。

 

他にもタブで分けたり、カテゴリーごとでもカラム数を変更したりすることもできます。

 

こういったイメージに変更する手順を解説しますね。

 

トップページをカテゴリーごとに表示する手順

(1)WordPressのダッシュボードを開き「Cocoon設定」→「インデックス」をクリックします。

WordPressのテーマCocoonでトップページをカスタマイズする方法

(2)「フロントページタイプ(β版)」のメニューで「表示形式」「表示カテゴリー」からお好きなタイプを選びます。

WordPressのテーマCocoonでトップページをカスタマイズする方法

(3)「表示カテゴリー」では、トップページに表示したいカテゴリーにチェックを入れてください。
変更したら「変更をまとめて保存」をクリック。

作業としてはこれだけです。

 

各項目で、それぞれどんなイメージになるのかを、以下で解説していきます。

 

タブで分ける

WordPressのテーマCocoonでトップページをカスタマイズする方法|タブで分ける

まずはタブで表示する方法です。

表示できるタブの数は最大3つです。4つ以上を選んでも全部表示されないのでご注意ください。

 

ちなみに設定画面の下にある「カードタイプ」で「縦型カード2列」を選択すると、上図のようになります。

この記事では「エントリーカード(デフォルト)」の前提で解説します。

カード(記事のリンクをカード型にしたもの)の見せ方はいろいろありますので、お好きな形に変更してみてくださいね。

WordPressのテーマCocoonでトップページをカスタマイズする方法|カードタイプ

 

スマホ表示を最適化

縦型またはタイルを選択した場合、そのままスマホで表示すると下図のように窮屈になってしまいます。
そのため上の図で「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」をチェックしておきましょう!

WordPressのテーマCocoonでトップページをカスタマイズする方法|スマホ最適化

 

カテゴリーで分ける

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーで分ける

「カテゴリごと」を選択すると、こんなイメージになります。

「もっと見る」ボタンをクリックすると、カテゴリーの一覧ページに移動します。

 

カテゴリーを2カラムで表示する

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーで分ける

「カテゴリごと(2カラム)」の場合はこちら。

2カラム(段落)で表示されます。

 

カテゴリーを3カラムで表示する

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーで分ける

カラムが3つになります。

 

サイドバーを表示しているときは

サイドバーが表示されている状態で3カラムにすると、このようにレイアウトのバランスが悪くなります。

3カラムのときはサイドバーを非表示することをおすすめします。

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーで分ける

てつごろう
てつごろう

細かい部分だけどユーザーのためには大事なんだよ。

サイドバーを非表示にしたいときは、「Cocoon設定」→「全体」→「サイドバーの表示状態」から変更できます。

WordPressのテーマCocoonでトップページをカスタマイズする方法|サイドバーの表示

 

カテゴリーの順番を変える

カテゴリーの表示順を変えることもできます。

その前にカテゴリーのIDを控えておく必要があります。

 

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーIDの調べ方

(1)ダッシュボードで「投稿」→「カテゴリー」をクリックします。

(2)カテゴリーの一覧が表示されるので、調べたいカテゴリーの名前の上にマウスカーソルを乗せます。

(3)ブラウザの下にURLが表示されます。
そこに「ID=XX」の文字が見えるので、そこに書かれている数字を控えておきましょう。

 

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーの順番を変更

(4)Cocoon設定の「インデックス」に戻り、表示カテゴリーの下にある「カテゴリ表示の順番を並び替える場合はこちら」をクリックすると、その下に入力エリアが表示されます。

(5)先ほど控えたカテゴリーのIDを、カンマで区切って入力したら「変更をまとめて保存」しましょう。

 

変更前後のイメージがこちらです。

WordPressのテーマCocoonでトップページをカスタマイズする方法|カテゴリーの順番を変更

 

WordPressのテーマCocoonは万能

WordPressのテーマCocoonでトップページをカスタマイズする方法

今回はWordPressの無料テーマCocoonで、トップページをカスタマイズする方法をご紹介しました。

Cocoonにはこのように、とても簡単にカスタマイズする機能が豊富です。

他にも様々な機能があるので、随時ご紹介していこうと思います。

ぜひ読者のみなさんも、いろいろと試してみてください!

 

■WordPressを使ったブログの始め方

必見
Wordpressを使ってブログを簡単に始める方法
WordPressを使ったブログの始め方【環境を作る】
(1)サーバーやドメイン、SSLなど難しい環境構築を簡単に。初心者の方にも分かりやすく手順を解説しています。
WordPress設定方法
WordPressの設定方法【初心者向け】
(2)ブログを立ち上げたらまずやるべき設定をまとめました。
Google アナリティクスの導入手順と基本的な使い方
ブログのアクセス解析をする方法【Google アナリティクスの基礎】
(3)Google アナリティクスの登録方法と基本的な使い方。専門用語の解説付きで解説します。
Google Search Consoleの登録方法と基礎
Google Search Consoleの登録方法と基本的な使い方【初心者向け】
(4)Google Search Consoleの登録手順と基本的な使い方。2020年版の最新の画像20枚を使っています。
Google AdSenseの始め方
ブログ収益化の方法と始め方①【Google AdSense】
(5)ブログを収益化する広告の一つGoogle AdSenseの概要と始め方を解説。
注目
アフィリエイトの始め方と心構え
ブログ収益化の方法と始め方②【アフィリエイトの始め方と心構え】
(6)ブログ収益化手段の一つ、アフィリエイトの始め方を解説。長続きする秘訣や、稼いでいくための心構えも。
WordPressのカスタマイズ サイドバー編
WordPressのカスタマイズ方法【初心者向け】サイドバー
(7)サイドバーに人気記事、カテゴリーの投稿数の表示、Twitterのタイムラインを埋め込む方法を解説。
WordPressのテーマCocoonでトップページをカスタマイズする方法
WordPressのトップページを1クリックでカスタマイズする方法【Cocoon版】
(8)Cocoonでトップページをカスタマイズする方法。1クリックでカテゴリーごとに表示できます。
Cocoonでグローバルメニューをカスタマイズする方法
【Cocoon】ブログのグローバルナビをかっこよくする方法【WordPressカスタマイズ】
(9)グローバルナビにアイコンや英語表記を追加したり背景をグラデーションにする方法
Cocoonでカテゴリーページをカスタマイズ
Cocoonでカテゴリーページに人気記事を表示する方法【WordPressカスタマイズ】
(10)カテゴリーページに人気記事、見出し、説明、アイキャッチなどを表示して”まとめページ”にする方法
新着
WordPressでフッターをカスタマイズ
WordPressでフッターをカスタマイズする方法【初心者向け】
(11)フッターにメニューを追加したり編集する方法

コメント

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