WordPress無料テーマCocoonにはショートコードもたくさん用意されています。
新着記事一覧・人気記事一覧のショートコードが初期状態でついてるとか嬉しいですよね。素晴らしいよCocoon。
Cocoonのショートコードの機能の使い方や設定できる項目についてまとめておきます。
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。
わいひらさん作。個人的には無料テーマでは最強ではないかと思っています。
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から順に設定してみましたので参考に。
ショートコード:プロフィールボックス
プロフィールボックスを表示します。
基本ソースはコレ。
[author_box label=この記事を書いた人]
プロフィールボックスのオプション
オプション | あらわすもの | 書き方 |
id | ユーザID | 数字で指定 |
label | キャプションを表示 | 文字列。 label=”この記事を書いた人”のように使用。 |
ショートコード:タイムライン・タイムラインアイテム
たとえばこんな年表とか、申し込み手順などに使うやつです。
タイムライン、イチからスタイルを書こうとすると結構大変なんですよね…
- 20XX年1月誕生寒い国で生まれる
- 20XX年3月卒業XXXX高校を卒業
- 20XX年4月就職XXXXXX株式会社に就職
「タイムライン」「タイムラインアイテム」を組み合わせて使用します。
「タイムライン」基本ソースはコレ。
[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、他にもアフィリエイトなどで便利に使えるショートコードがあります。
何度も言いますけど本当にすごいなあ。
コメント