Gutenberg、だいぶ使いやすくなったので移行中です

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

WORDPRESS

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

Cocoonショートコード

 

新着記事一覧・人気記事一覧のショートコードが初期状態でついてるとか嬉しいですよね。素晴らしいよ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. おすすめ
  2. 新着
  3. 注目
  4. 必見
  5. お得

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

 

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

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

この記事を書いた人
nullll

未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。
同じような方の参考になれば幸いです。

nullllをフォローする

 

基本ソースはコレ。

[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年」、などのときいちいち書き変えなくて済む…!

デビューから23年!!

 

基本ソースはコレ。

[ago from=""]

 

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

単位は固定です。

 

ショートコード:過去年

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

今年で23年!!

 

基本ソースはコレ。

[yago from=""]

 

過去年のオプション

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

 

ショートコード:年齢

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

今年で23歳!!

 

基本ソースはコレ。

[age from=""]

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

 

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

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

ドラえもんの誕生日まで32489年!!

 

基本ソースはコレ。

[countdown to=""]

 

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

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

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

 

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

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

5.0
3.5

基本ソースはコレ。

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

 

評価スターのオプション

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

 

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

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

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

コメント

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