Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonショートコード-人気記事一覧の使い方と表示サンプル

スポンサーリンク
使い方
この記事は約3分で読めます。
スポンサーリンク

人気記事一覧ショートコード

投稿ページ・固定ページ・カスタム投稿ページを表示できます。

件数・カテゴリー指定・投稿日順or更新日順などの様々なオプションがあり、任意のクラス名を追加する事も出来るので、思い通りの表示が可能です。

ショートコード

 ↓コピーできます。
[popular_list]

 

初期表示

オプションなしの上記ショートコードで表示した例は以下の通り。

 

表示例

人気記事一覧ショートコード:デフォルト

  • 全期間で集計
  • ランキング順位非表示
  • 表示件数=5件
  • すべてのカテゴリー対象
  • PV数非表示
上記それぞれオプションで変更出来ます。

 

オプション

見た目のオプション

 デザイン

type

・default: 通常リスト
・border_partition: カードの上下に区切り線
・border_square: カードに枠線
・large_thumb: 大きい画像
・large_thumb_on: 大きい画像にタイトルを重ねる

 

書き方

 ↓コピーできます。
[popular_list type=large_thumb_on]

 

デザインサンプル

border_partition

記事一覧ショートコード:border_partition

 

border_square

記事一覧ショートコード:border_square

 

large_thumb

記事一覧ショートコード:large_thumb

 

large_thumb_on

記事一覧ショートコード:large_thumb_on

 

タイトルを太字にする

bold

0:標準 1:太字

初期値:0

 

書き方

 ↓コピーできます。
[popular_list bold=1]

記事一覧ショートコード:bold

 

矢印を表示

arrow

0:非表示 1:表示

初期値:0

 

書き方

 ↓コピーできます。
[popular_list arrow=1]

記事一覧ショートコード:arrow

 

ランキングナンバーを表示

rank

0:非表示 1:表示

初期値:0(非表示)

 

書き方

 ↓コピーできます。
[popular_list rank="1"]

人気記事一覧ショートコード:ランキング順位表示

 

PV数の表示

pv

0:非表示 1:表示

初期値:0(非表示)

 

書き方

 ↓コピーできます。
[popular_list pv=1]

人気記事一覧ショートコード:PV数表示

 

表示内容オプション

表示件数

count

数値で指定

初期値:5

 

書き方

 ↓コピーできます。
[popular_list count=3]

 

集計期間を指定

days

数値(日数)

初期値:all(全期間)

 

書き方

 ↓コピーできます。
[popular_list days=7]

 

表示カテゴリーの指定

cats

表示するカテゴリーのIDを指定。複数の場合はカンマ区切り。

初期値:all(すべてのカテゴリー表示)

 

書き方

 ↓コピーできます。
[popular_list cats=3,6,7]

 

カテゴリーIDの調べ方

投稿」→「カテゴリー」で設定画面が編集画面のブラウザアドレスに表示される「tag_ID=XX」の数字部分。

カテゴリーID

 

 

任意のクラス属性追加

class

クラス属性を追加したい場合に指定。複数の場合は半角スペース区切り。

 

書き方

 ↓コピーできます。
[popular_list class=任意のクラス名]

 

 

 

コメント

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