Cocoonでカテゴリーページに人気記事を表示する方法【WordPressカスタマイズ】

Cocoonでカテゴリーページをカスタマイズブログ

こんにちは!

てつごろう(@Te256g)です。

 

ブログを長期間運営していて、他のブログと差別化をしたいと思ったことはありませんか?

WordPressでは、デフォルトのままだとどうしても他のサイトとの区別がつきにくくなってしまいます。

少しでも個性を出すことができれば、「他とは違うな」と思ってもらえるかもしれません。

 

そこで今回は、無料のテーマCocoonの機能を利用して、カテゴリーページをカスタマイズする方法をご紹介します!

 

記事の内容

  • カテゴリーページに人気記事を表示する方法
  • カテゴリーページに見出しや説明、アイキャッチを入れる方法

 

通常はカテゴリーの記事が新着順に並んでいますよね。

 

当ブログ「てつごろぐ」では下図のように、「Web」カテゴリーの下に存在するサブカテゴリーの人気記事を表示しています。

カテゴリーページのカスタマイズ

 

Cocoonのショートコードを利用すると、このように簡単に人気記事を表示することができます。

 

また投稿と同じように見出しや説明、アイキャッチを入れることで、新着記事が並ぶだけのアーカイブから、まとめページのようにすることができるのです。

 

この記事で、その方法をお伝えしていきます。

てつごろう
てつごろう

10分もあればできるんだよ!

 

カスタマイズをして、他のブログとの差別化を図りましょう!

 

ショートコードとは?

よく利用する機能を呼び出すためのコードです。

例えば今回紹介する人気記事の他、メニューリスト、新着記事一覧などを簡単に呼び出して表示することができます。

特定のファイル(functions.php)に予め機能を登録されていて、使い回しができるようになります。

 

1. Cocoonでカテゴリーページに人気記事を表示する方法

Cocoonでカテゴリーページをカスタマイズ

「てつごろぐ」では「Web」という大カテゴリーの下に「ブログ」「Webディレクション」というサブカテゴリーが存在します。

 

ここでは「Web」のカテゴリーページに、「ブログ」の人気記事を表示する方法をご紹介します。

作業の流れは以下の通りです。

 

人気記事を表示する手順

1-1. 表示したいカテゴリーのIDを調べる

1-2. カテゴリーページに人気記事を表示する

 

1-1. 表示したいカテゴリーのIDを調べる

まずは、人気記事を表示したいカテゴリーのIDを調べましょう。

今回は「ブログ」というサブカテゴリーの人気記事を乗せる場合を想定します。

 

(1)WordPressの管理画面にログインします。

 

(2)「投稿」→「カテゴリー」の順にクリックします。

カテゴリーの編集

 

(3)編集するカテゴリー名をクリックします。

人気記事を表示したいカテゴリー(ここでは「ブログ」)を選択します。

カテゴリーの編集

 

(4)ブラウザーのアドレスバーに表示されている「tag_ID=XXX」の数字を控えておきます。

この例ではIDは「133」となっています。

カテゴリーのID

 

1-2. カテゴリーページに人気記事を表示する

続いてカテゴリーページに人気記事を表示する方法です。

ここでは「Web」というカテゴリーページに「ブログ」カテゴリーの人気記事を表示する場合です。

 

(1)人気記事を表示したいカテゴリー名をクリックして、編集画面に入ります。

カテゴリーに人気記事を表示する手順

 

(2)「カテゴリ本文」の入力エリアで「ショートコード」のボックスから「人気記事」を選択します。

ショートコード

 

(3)以下のように、人気記事を表示するためのコードが挿入されました。

人気記事のショートコード

 

(4)挿入されたコードで「cats=all」となっていると思いますが、下図のように「all」の部分を、先ほど控えたカテゴリーのIDに書き換えます。

ショートコードの編集

 

(5)最後に左下にある「更新」ボタンをクリックして完了です。

カテゴリーページを実際に確認してみましょう。

 

2. カテゴリーページに見出しや説明、アイキャッチを入れる方法

Cocoonでカテゴリーページをカスタマイズ

続いて、カテゴリーページに見出しやアイキャッチを入れましょう。

 

(1)カテゴリ本文で、通常の記事と同じように「見出し」を入れます。

例えば「ブログ」カテゴリーの人記事と分かるように「ブログの人気記事」と入れてみました。

カテゴリーページに見出しを入れる

 

(2)さらに下図のように、カテゴリーの説明文を入れることもできます。

カテゴリーページに説明文を入れる

 

(3)続いて「アイキャッチ」の「選択」ボタンをクリックします。

カテゴリーにアイキャッチを入れる

 

(4)好きな画像を選択したら「画像の選択」をクリックします。

カテゴリーにアイキャッチを入れる

 

(5)選択した画像が表示されていることを確認します。

カテゴリーにアイキャッチを入れる

 

(6)下にある「更新」ボタンをクリックして、完成です!

 

最後にページを確認してみましょう。

 

まとめ|Cocoonでカテゴリーページをカスタマイズ

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をコピーしました