![](https://gyroibaraki.com/wp-content/uploads/2021/02/kaisya_komaru_woman.png)
ホーム画面に新着記事一覧が表示されている。
カテゴリー別に記事を表示したい。
どうやって設定するの?
こういった疑問にこたえます。
- cocoonでホーム画面にカテゴリー別記事一覧を表示できるようになる
cocoonのデフォルトでは新着記事の一覧がホームページに表示されます。
![](https://gyroibaraki.com/wp-content/uploads/2021/05/7c813d8883c33455a15f62678ffb528d-1024x840.jpg)
このようなレイアウトからカテゴリー別に分けて記事一覧を表示するレイアウトに変更していきます。
![](https://gyroibaraki.com/wp-content/uploads/2021/05/994ba5cb31339ce9db576ac22ea8106d.jpg)
当サイトもこれから紹介する方法でレイアウトを作成しました。
初心者でもできるよう手順をまとめますのでぜひ参考にしてください。
カテゴリー別に記事を表示する手順
カテゴリー別に記事一覧を実装するまでの流れは次の通りです。
- トップページ用の固定ページを作成する
- 2カラムに分ける
- ショートコードを作成する
- ホームページに設定する
それぞれ順に説明していきます。
トップページ用の固定ページを作成する
まずはトップページ用の固定ページを作成します。
管理画面の固定ページの新規追加をクリックします。
![固定ページ新規追加](https://gyroibaraki.com/wp-content/uploads/2021/05/8724e9dfc0003c13d267749686296869.png)
2カラムに分ける
固定ページが作成できたらページを2カラムに分けていきます。
「+」ボタンから「すべて表示」をクリックします。
![ブロック追加](https://gyroibaraki.com/wp-content/uploads/2021/05/9c5e1a7ede807a82ab17f145aec59878.png)
ブロックの一覧から「カラム」を選択します。
![カラムブロックを選択](https://gyroibaraki.com/wp-content/uploads/2021/05/c54581e751e47f5dca55d79aef490b64.png)
「50/50」を選択します。
![カラムパターンの選択](https://gyroibaraki.com/wp-content/uploads/2021/05/ba27ff5dd95f020b0b3bbbc6684f88fb.png)
するとブロックが左右に別れて表示されるようになります。
![2カラムレイアウト](https://gyroibaraki.com/wp-content/uploads/2021/05/077f67111fe689d0826bcf7f565692eb.png)
ショートコードを作成する
次に作成したカラムにショートコードを記述していきます。
例えば、僕のブログの場合は次のようなコードになります。
どのカテゴリーの記事一覧かを示すためにh3タグでタイトルをつけ、その中にショートコードを記述しています。
![ショートコード例](https://gyroibaraki.com/wp-content/uploads/2021/05/ba6b317d65d124c7c998eba2bf50da78.png)
ショートコード内に記述できるコード意味を次の表にまとめます。
ショートコード | 意味 | 記述例 |
---|---|---|
new_list | 新着記事を表示 | new_list |
popular_list | 人気記事を表示 | popular_list |
rank (popular_listの場合のみ) | ランキング順位の表示 | rank=0, rank=1 (0:非表示, 1:表示) |
days (popular_listの場合のみ) | 集計期間 | days=7, days=all |
pv | PV数の表示 | pv=0, pv=1 (0:非表示, 1:表示) |
count | 表示する記事数 | count=5 |
cats | カテゴリーの指定 | cats=1 |
type | デザイン | default(通常) border_partition(上下線) border_square(枠線) large_thumb(大きい画像) |
catsに指定する数字はカテゴリーIDの数字です。
カテゴリーIDはカテゴリーごとに割り当てられている数字でこの数字を指定することでそのカテゴリーの記事を表示することが可能になります。
カテゴリーIDは簡単に見つけることができます。
管理画面の投稿からカテゴリーを選択します。
![カテゴリーの設定](https://gyroibaraki.com/wp-content/uploads/2021/05/f623e7a5412b7ea28cd16539939bee6e.png)
カテゴリーの一覧が表示されます。
この中からカテゴリーを一つクリックします。
![](https://gyroibaraki.com/wp-content/uploads/2021/05/ee3ab02269bdc2315c5b65a09bcebd49.png)
カテゴリー編集画面のURLのtag_ID=2となっているところがカテゴリーIDです。
![](https://gyroibaraki.com/wp-content/uploads/2021/05/33802b1f6556c598b0ff517e68c76b33.png)
この数字をcatsに指定するようにしてください。
ホームページに設定する
最後に作成した固定ページをホームページに設定します。
管理画面の外観からカスタマイズを選択します。
![外観のカスタマイズ](https://gyroibaraki.com/wp-content/uploads/2021/05/126e79458937f92c1fb68dbcf9e55ed5.png)
ホームページ設定を選択します。
![ホームページ設定](https://gyroibaraki.com/wp-content/uploads/2021/05/9f5d242a456b40f7d492b8372a9d0ed2.png)
ホームページの表示を固定ページに変更し、先ほど作成した固定ページを選択します。
![ホームページの表示設定](https://gyroibaraki.com/wp-content/uploads/2021/05/343439bcbe20127e92c7be6c0a3d0283.png)
カテゴリー別に記事を表示する方法まとめ
解説の内容をまとめます。
- トップページ用の固定ページを作成する
- 2カラムに分ける
- ショートコードを作成する
- ホームページに設定する
ここで紹介したレイアウトの変更方法を応用すれば3カラムにすることも可能です。
レイアウトの幅も広がると思うので色々試してみてください。
以上、お疲れ様でした。
コメント