WordPressの定番無料テーマ「Cocoon 」を使ってカテゴリー・タグ毎の記事一覧を表示させたいときに躓いたので備忘録として残しておきます。
実装イメージとしては、こんな感じです。
同カテゴリ、またはタグの記事一覧を縦に表示します。
ブログのトップページやサイドバーに特定カテゴリーやタグの記事を表示したいときに使えそうですね。
このような一覧表示はCocoon の標準機能で簡単に実装できるのでその方法を説明します。
実装方法
記事の一覧表示はCocoon の「ショートコード」というもので実装が可能です。
ショートコードというのは、便利な機能を短いコードで実装できるようなものですね。
Cocoon には標準でいくつかのショートコードが使えるようになっているのでそれを使わせていただきましょう。
まず、Cocoon のブロックエディタから「+」ボタンをクリックして「ショートコード」を追加しましょう。
ショートコードを追加すると以下のようなブロックが追加されます。
ここにショートコードを入力すれば良いのですが、コードをわかってないと使えません。
今回のように記事の一覧を表示させたい場合は以下の文字列を入力します。
これだけの記載だと記事数は5、新しい記事の順番で表示されます。
[new_list cats="10"]「cats」の中の数字は表示させたい記事のカテゴリーの「ID」を指定します。
「ID」はWordpress管理画面の「投稿」→「カテゴリー」から確認できます。
タグ毎の一覧を表示させたい場合は、ショートコードの「cats」を「tags」に変更してあげましょう。
「tags」の数字は表示させたいタグの「ID」を入力してください。
[new_list tags="50"]
一覧表示はできましたが、記事数や表示の大きさ、並べる方向はオプションで指定することも可能です。
記事数の指定
指定がない場合は5つ表示されますが、表示数を指定したい場合は「count」オプションを追加します。
[new_list count="3" cats="10"]
表示の大きさ
指定がない場合は記事が小さく表示されますが、大きく表示させたい場合は「type」オプションを追加して「large_thumb」を指定します。
[new_list type="large_thumb" count="3" cats="10"]
並べる方向
指定がない場合は記事縦に並びますが、横に並べたい場合は、「horizontal」オプションを追加して「1」を指定します。
見切れた場合でも矢印ボタンでのスクロールが可能なので便利ですね。
[new_list horizontal="1" type="large_thumb" count="5" cats="10"]
ランダム表示
記事をランダムに表示させたい場合は「random」オプションを追加して「1」を指定します。
[new_list horizontal="1" type="large_thumb" count="5" cats="10" random=1]カテゴリIDが「10」の記事をランダムに5つ表示させてみました。
まとめ
というわけで今回僕が使ってみた機能を説明しました。
ショートコードは他にも色々便利な機能があるので、興味がある方は調べてみてください！
コメント