WordPress無料テーマ「Cocoon」のトップページに表示する記事をカスタマイズする

今回は、WordPressの無料テーマ「Cocoon」でトップページに表示する記事をカスタマイズする方法について解説したいと思います。

トップページのカスタマイズはいくつかの方法で出来ますが、今回の方法はショートコードを利用しての方法になります。そのため、PHPなどの知識は必要ではありません。
PHPが全く分からない初心者の方でも、ショートコードさえ理解すれば大丈夫です。

これらのカスタマイズは、必ずご自身でテストした上で行なってください。

「Cocoon」でトップページに表示される記事

WordPressの無料テーマ「Cocoon」でトップページに表示される記事は、初期状態ですと新着記事が順番に並んだ状態になります。

当ブログのトップページは現状初期状態になっておりますので、そのように表示されています。
スキンは、オリジナルCocoonスキン「Natural（ナチュラル）」を使用しています。

わたしが運営しています別ブログでは、カスタマイズをしていますので違った表示になっています。このカスタマイズは、ショートコードを使用してトップページにカテゴリー別の記事を表示させています。

今回は、当ブログの記事をカテゴリ別にトップページに表示させてみようと思います。

トップページをカテゴリ別に表示させる手順

ショートコードを使ってトップページをカテゴリ別に表示させる手順の概要は、以下になります。

各手順の詳細について、以降で解説していきます。以降は、テスト環境にて実施していきます。

トップページにするための固定ページを作成

まずはトップページにするための固定ページを作成します。

固定ページは、ダッシュボードの［固定ページ］＞［新規追加］から追加します。

ショートコードで表示させたい状態に指定

新規作成した固定ページに、ショートコードを用いて表示させたい状態に指定します。

Cocoonで使用出来るショートコードで、記事一覧を表示させるためのものは以下になります。

[new_list]

このショートコードを、固定ページに書き込みます。
ブロックエディターを使用している場合は、コードエディターを使用するか、ショートコードを埋め込む形にしましょう。

この状態でプレビューを表示させると、以下のようになります。

シンプルな一覧になりますので、このショートコードにオプションを設定していきます。

新着表示ショートコードのオプション

オプションについて、簡単にまとめると以下になります。詳細については、公式の新着記事一覧を表示するショートコードの利用方法 | Cocoon (wp-cocoon.com)を参照してください。

オプション	内容	デフォルト値
count	アイテムの表示数を設定	5
type	リストのタイプを設定	default
bold	タイトルを太字にする設定	0(しない)
arrow	カードに矢印を表示する設定	0(しない)
class	独自のclass属性を指定	空欄
cats	表示するカテゴリーを指定	all(すべてのカテゴリー)
children	子カテゴリを含める設定	0(含めない)
tags	表示するタグを指定	空欄
modified	アイテムの並び順を指定	0(投稿日順)
order	アイテムの表示順を指定	desc(降順)
sticky	固定表示の表示を指定	1(する)
snippet	説明文の表示を設定	0(しない)
post_type	表示する投稿タイプを指定	post(通常の投稿のみ)
taxonomy	検索グループの指定	category
author	投稿ユーザの指定	空欄

今回は、カテゴリー別に表示させたいので、オプションの「cats」を使用します。

オプション「cats」の指定はIDで、複数のカテゴリを指定したい場合はカンマで区切ります。
カテゴリーのIDは、メニューの ［投稿］＞［カテゴリー］で目的のカテゴリーにアクセスした際のURLで確認出来ます。

http://ブログアドレス/wp-admin/term.php?taxonomy=category&tag_ID=2&post_type=post&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dcategory

こちらは私がローカル環境でアクセスしたカテゴリーのURLサンプルです。この場合、IDは「2」になります。

実際にショートコードを用いて指定してみる

今回は「暮らし」「四方山話」のカテゴリーと、「パソコン便利情報」「WordPress」のカテゴリーに分けて表示させています。

その場合、使用するコードは以下になります。

[new_list count=5 cats=5,4 children=1 type=large_thumb_on]

このショートコードで、カテゴリーIDの5と4（暮らしと四方山話）の新着記事を、子カテゴリーまで含めて5件、大きめサムネイルタイプで表示させるよう指定しています。

プレビューで表示させると、以下のように見えます。

デフォルトで目次を使用している場合、このままでは目次が表示されますので、固定ページの設定で［ページ設定］＞［目次を表示しない］にチェックをして、目次を非表示にしておきましょう。

CSSで表示を調整する

この状態だとトップページではなく固定ページの表示になっていますので、デザインをトップページらしくなるように調整します。

CSSは、ダッシュボードの［外観］＞［カスタマイズ］＞［追加CSS］に追加しても良いですし、新たに作成したstyle.cssファイルを子テーマのディレクトリにFTPなどでアップロードしても大丈夫です。
私は原則、後者で管理しています。

必要となるCSSは最低限、以下になると思われます。

• 不要なもの(トップページの日付、タイトルなど)の非表示
• ボックスのレイアウト、装飾

CSSの詳細については、コピペOKの形で別途記事にしてありますので、そちらからご覧ください。

フロントページに設定

作成した固定ページを、フロントページに指定します。

［設定］＞［表示設定］の先頭に［ホームページの表示］という項目があります。
この項目で［固定ページ］にチェックを入れ、プルダウンメニューから先程作成した固定ページを選択し、変更を保存してください。

設定を保存すると、トップページに固定ページが常に表示されるようになります。

まとめ

WordPressの無料テーマ「Cocoon」でトップページに表示する記事を、カテゴリー別に分類する方法のご紹介でした。今回はショートコードを使用して固定ページをトップページにしましたが、ウィジェットを利用する方法もあります。

Cocoonはカスタマイズしようと思えばしっかりとカスタマイズも出来ますし、簡単に設定だけでカスタマイズすることも可能です。いろいろなやり方で出来ると思いますので、その一部としてご覧いただけたら幸いです。