Cocoonカスタマイズ

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

スポンサーリンク

どうもこんにちわ、だいぐぅです。

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

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

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

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

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

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

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

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

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

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

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

最終的にトップページとして表示させるために、固定ページを作成します。

固定ページにショートコードで表示させたい状態に指定する。

固定ページにショートコードを用いて、表示させたいトップページの状態になるように指定します。

CSSで表示を調整する。

CSSで固定ページの表示について調整します。日付などの表示を、トップページ表示分だけ非表示にします。

固定ページがトップページになるようフロントページに設定する。

作成した固定ページを、トップページとして表示されるように設定します。

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

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

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

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

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

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

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

コメント

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