【Cocoon】トップページにカテゴリ別記事を表示する方法【ショートコード利用】

ショートコードによるカテゴリ別記事表示方法
  • 少しお洒落なトップページを作りたい
  • デフォルトの新着記事一覧から変えたい



このようなお悩みを解消します。


サイトのデザインを弄りたくてもやり方がわからずいじれない…というブログ初心者の方は多いのではないかと。


そんな方のために、サイトのトップページにカテゴリ毎の記事一覧を表示する簡単な方法を解説していきます。


結論を言うと、この方法を使う事で当サイトのホームのようなデザインを作る事が可能です。


前提としてWordPressテーマのCocoonを使用している方に向けた記事である事をご了承ください。

スポンサーリンク

カテゴリ別記事を一覧表示したトップページ例

デスク

まずCocoonのデフォルト(標準)トップページは下の画像のように最新記事が並ぶようになってます。

この状態から以下の画像のように、カテゴリ別に記事を一覧表示するように変更します。

最新記事のままでも悪くは無いですが、個性を出して他のブロガーさんのトップページと差別化を図ろうという意図です。


ちょっと味気無いので一工夫しよう!という感じ。

ぱなだ
ぱなだ

デザイン変更といっても大変な設定等は一切ありません。


大まかな手順は以下の通り

  1. トップページ用の固定ページを作成
  2. 2カラムに分ける
  3. ショートコードを書く
  4. フロントページに設定する


4つのステップに分かれます。


「ショートコード」という聞きなれない単語がありますが、今回の手順では一番重要な部分です。


順を追って説明致します。

トップページ用の固定ページを作成

本棚

まずはトップページ用の固定ページを新しく作ります。


WordPressの管理画面から


「固定ページ」「新規追加」で作成します。

固定ページ作成方法

新しく作成した固定ページはタイトル部分に「ホームページ」と名前を付けておきます(自分でわかればなんでもOK)。

2カラムに分ける

本

今回は2列でカテゴリ別表示をしていくので、カラムを用意していきます。


「Cocoonレイアウト」「2カラム」を選択。

カラム作成

そうするとカラム(列)が二つできたかと思います。

カラム作成後

カラムを作る段階はこれで完了です。


続いてこのカラム内にショートコードを記述していきます。

ショートコードを書く

模様

では早速ショートコードを書いていく…の前にまず「ショートコードって何だよ」って話ですよね。


簡単に説明していきます。

そもそもショートコードとは?


ショートコードとは

  • 動作や表示の仕方を簡単なコードひとつで設定できる機能
  • [](かっこ)内に記述する
  • WordPressならテーマに関係無く使える
  • 通常はphpというファイルを操作する必要がある



となっています。


本来だとショートコードの利用にはWordPress内にあるphpというファイルをいじる必要があるのですが、このphpファイルは十分な知識が無いまま記述すると最悪サイトが壊れる恐れがあります。


しかしCocoonユーザーならphpファイルの操作は不要


作成する記事内にショートコードを記述するだけで簡単に設定できます。

ショートコード早見表

記事を一覧表示する上で役立つショートコード、意味、記述例を紹介します。


使用する際は[]内に記述するのを忘れないようにしてください。


[]が無いと機能しませんので注意。

ショートコード意味記述例
new_list新着記事を表示new_list
popular_list人気記事(PV数が多い記事)を表示popular_list
count表示する記事数count=5
(5記事表示)
cats
(別途補足有り)
カテゴリーを指定cats=2
rank
(popular_listのみ有効)
ランキング順位ナンバーの表示の有無rank=0,rank=1
(0は非表示、1は表示)
days
(popular_listのみ有効)
集計期間days=7,days=all
(7日間、全期間)
pvPV数の表示pv=0,pv=1
(0は非表示、1は表示)
typeデザインdefault(通常)
border_partition(上下線)
border_square(枠線)
large_thumb(大きい画像)
boldタイトルを太字にするbold=0,bold=1
(0は標準、1は太字)

catsの値の探し方

表示するカテゴリを指定する際catsの値(カテゴリID)を探す必要があります。


まずはWordPress管理画面から


「投稿」「投稿一覧」「カテゴリー」へ移動

カテゴリへ移動

カテゴリー一覧ページに移動したら以下の手順でcatsの値を探します。

  1. 指定したいカテゴリにマウスオーバー
  2. マウスオーバーした際画面下に出るURLから「ID=〇」を探す
  3. 〇をcatsの値として指定


画像で見ると以下のような手順です。
※プライバシー保護のためURLにモザイク加工を施しています。

catsの見つけ方

ショートコードの記述例

当サイトのトップページのショートコードは以下のように記述されていました。

ショートコード記入例

左のパソコンカテゴリの記述例は次の通り。

 new_list pv=0 count=5 cats=4 type=default


それぞれの要素の役割は

  • 新規投稿順(new_list)
  • PV数表示無し(pv=0)
  • 5記事表示(count=5)
  • パソコンカテゴリここではcats=4)
  • 標準表示(type=default)


となっています。


右のブログ運用カテゴリはcatsの値のみ違うだけなのでほぼ一緒です。


catsの値以外は、この記述を真似してもらえば当サイトのカテゴリ別記事一覧表示の部分と同じにする事が可能です。


もしトップページに2つ以上カテゴリ別記事一覧表示をしたい場合はその都度カラムを増やし、記述を追加すればOKです。

フロントページに設定する

パズルピース

トップページ用の固定ページを作成してもフロントページ(サイトのホーム)に設定しなければ意味が無いので忘れずにやっておきましょう。


WordPress管理画面から


「外観」→「カスタマイズ」を選択。


するとこのような画面が出てきます。

カスタマイズ画面

更に「ホームページ設定」をクリックするとホームページにどのページを使うか設定できます。


「固定ページ」にチェックを入れ、最初に自身で設定した固定ページを選択(この記事ではホームページというタイトル名)して設定完了です。

フロントページ設定画面

これで最新記事一覧表示ではなくカテゴリ別記事表示のホームページに設定できました。


今回はカテゴリ別記事一覧を作成しただけなので、必要に応じてフロントページはカスタマイズするようにしてください。

まとめ:トップページをお洒落にしよう

名案

以上がホームにカテゴリ別記事一覧を表示する方法の紹介でした。


デフォルトの新着記事一覧よりちょっとサイトがお洒落になったかと思います。


ショートコードはホームページ以外にも勿論使えるので、自分だけのオリジナリティ溢れる記事にする事も可能です。


是非活用してみてください!

コメント

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