WordPress無料テーマCocoonのショートコードの使い方

WordPress無料テーマCocoonにはショートコードもたくさん用意されています。

 

新着記事一覧・人気記事一覧のショートコードが初期状態でついてるとか嬉しいですよね。素晴らしいよCocoon。

Cocoonのショートコードの機能の使い方や設定できる項目についてまとめておきます。

 

 

Cocoonのショートコードの使い方

使い方と言ってもビジュアルエディタで好きなショートコードを選択するだけ、です。
ただし好きなように表示するためにはオプションを設定する必要があります。

よく使うもの（というかAPIキーが不必要なもの）だけですが、それぞれのショートコードで使用できるオプションなどを書いておきます。

 

ショートコード：新着記事一覧

こういうやつですね。

 

基本ソースはコレ。

[new_list count="5" type="default" cats="all" children="0" post_type="post"]

 

新着記事一覧のオプション

基本ソースでいえば、「count=”5″」がオプションです。
「count」は表示記事を表し、「5」がその数。つまり「記事を5つ表示せよ」というオプションが付いているのですね。

デフォルトだと「新着記事一覧、5記事、表示はサムネイルとタイトル、子カテゴリを除く全てのカテゴリを表示、投稿記事だけ」という指定がされています。
パラメータは半角スペースで区切って複数書くことができます。

その他にも使えるものがあるのでまとめます。

 

オプション	あらわすもの	書き方
count	記事の数	数字で指定。「count=”10″」など。
type	リストの見た目	default：左にサムネイル+記事タイトル border_partition…左にサムネイル+記事タイトル+区切り線 border_square…左にサムネイル+記事タイトル+枠線 large_thumb…大きなサムネイル+タイトル large_thumb_on…大きなサムネイル+重ねてタイトル
bold	記事タイトル文字の太さ	bold=”1″…太字 bold=”0″…ふつうの太さ（デフォルト）
arrow	リスト右の矢印	arrow=”1″…矢印を表示する arrow=”0″…矢印を表示しない（デフォルト）
class	独自のクラス	独自のクラスをつけるか。 class=”sample”と書くと「sample」というクラスが付与される。スペース区切りで複数記述可。
cat	表示するカテゴリ	カテゴリ番号で指定。カンマ区切りで複数指定可。「all」で全カテゴリ。
children	カテゴリの子カテゴリの表示	children=”1″…子カテゴリを表示する children=”0″…子カテゴリを表示しない（デフォルト）
tags	表示するタグ	タグ番号で指定。カンマ区切りで複数指定可。
modified	記事を更新日順に並べるか	modified=”1″…更新日順に並べる modified=”0″…投稿日順に並べる（デフォルト）
order	記事の並び順	order=”asc”…昇順に並べる order=”desk”…降順に並べる
sticky	固定表示記事の表示切り替え	sticky=”0″…表示しない sticky=”1″…表示する（デフォルト）
post_type	投稿タイプの指定	post_type=”post,page”など。 postが投稿、pageが固定ページ。
taxonomy	カテゴリーやタグなどで絞り込んで表示	taxonomy=”post_tag”など。 デフォルトは”category”。

 

「type=”large_thumb_on”」のこの表示かっこいいですよね。

 

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

こういうやつですね。

 

基本ソースはコレ。

[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

 

使えるオプションは「days」「rank」「pv」「count」「cats」「type」で、基本的な使い方は新着記事一覧と同じです。
人気記事一覧のみで使えるオプションをまとめておきます。

 

人気記事一覧のオプション

オプション	あらわすもの	書き方
days	daysには、データの集計期間	日数で指定。「all」だと全期間。
rank	ランキング番号の表示	rank=”1″…ランキング番号を表示する rank=”0″…ランキング番号を表示しない（デフォルト）
pv	PV数の表示	pv=”1″…PV数を表示する pv=”0″…PV数を表示しない（デフォルト）

 

ショートコード：ナビカード

WordPressの「メニュー」で作成したメニューを表示します。
先にメニューを作る必要があります。

手順に関しては公式のマニュアルが解りやすいと思います。

好きなページをリストにして表示する事ができるんですね。
対応しているのは2020年1月現在「投稿」「固定ページ」「カテゴリー」「タグ」ページです。

 

基本ソースはコレ。

[navi_list name="メニュー名" type="default" bold="0" arrow="0"]

 

使えるオプションは「type」「bold」「arrow」「class」で、基本的な使い方は新着記事一覧と同じです。

メニューの設定「CSS class (オプション)」で設定できるのは以下の数字。
こちらの設定をするとサムネイルにリボンがかかったスタイルが適用されます。

1. おすすめ
2. 新着
3. 注目
4. 必見
5. お得

上のサンプルで1から順に設定してみましたので参考に。

 

ショートコード：プロフィールボックス

プロフィールボックスを表示します。

 

基本ソースはコレ。

[author_box label=この記事を書いた人]

 

プロフィールボックスのオプション

オプション	あらわすもの	書き方
id	ユーザID	数字で指定
label	キャプションを表示	文字列。 label=”この記事を書いた人”のように使用。

 

ショートコード：タイムライン・タイムラインアイテム

たとえばこんな年表とか、申し込み手順などに使うやつです。
タイムライン、イチからスタイルを書こうとすると結構大変なんですよね…

「タイムライン」「タイムラインアイテム」を組み合わせて使用します。

 

「タイムライン」基本ソースはコレ。

[timeline title=""][/timeline]

 

「タイムラインアイテム」基本ソースはコレ。

[ti label="" title=""][/ti]

 

タイムラインアイテムをタイムラインに入れて…

[timeline title="タイムラインの大タイトル"]
[ti label="タイムラインの左側" title="タイムラインのタイトル"]タイムラインの内容[/ti]
[ti label="タイムラインの左側" title="タイムラインのタイトル"]タイムラインの内容[/ti]
[/timeline]

このように書きます。

 

ショートコード：過去日時

入力した日付から経過年を出してくれるショートコード。
「デビューからXX年」、などのときいちいち書き変えなくて済む…！

 

基本ソースはコレ。

[ago from=""]

 

fromオプションはYYYY-MM-DDやYYYY/MM/DDやYYYYMMDDで記述。
from=”2001-01-01″、from=”2001/01/01″、from=”20000101″、のようになります。

単位は固定です。

 

ショートコード：過去年

過去日時とほぼ同じ、ですが単位を変えられるようになっています。
年齢などにも対応。

 

基本ソースはコレ。

[yago from=""]

 

過去年のオプション

オプション	あらわすもの	書き方
unit	単位	文字列。 unit=”歳”のように使用。

 

ショートコード：年齢

過去年とほぼ同じ、ですがオプションが「from」でも「birth」でもOKになってる。

 

基本ソースはコレ。

[age from=""]

オプションは「unit」も使えます。

 

ショートコード：カウントダウン

未来の日付までカウントダウンします。

 

基本ソースはコレ。

[countdown to=""]

 

toオプションはYYYY-MM-DDやYYYY/MM/DDやYYYYMMDDで記述。
to=”2100-01-01″、from=”2100/01/01″、from=”21000101″、のようになります。

指定日を過ぎると「0」表示になります。

オプションは「unit」も使えます。

 

ショートコード：評価スター

レーティングスターとも呼ばれる、★の数で度合いを表すアレです。

基本ソースはコレ。

[star rate="" max="5" number="1"]

 

評価スターのオプション

オプション	あらわすもの	書き方
rate	評価	0.1刻みで数値を入力。
max	最大の星の数	整数で星の数を設定。
number	数値表示	数値表示をするかどうか。 number=”1″…数値を表示する（デフォルト） number=”0″…数値を表示しない

 

WordPress無料テーマCocoonのショートコードの使い方　まとめ

思ったよりボリュームが大きくなってしまった…ページ分ければよかった…そして後半息切れして雑になってしまった。

Cocoon、他にもアフィリエイトなどで便利に使えるショートコードがあります。
何度も言いますけど本当にすごいなあ。