【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい

ショートコード使い方Cocoon

本記事の目的はWordPressテーマCocoonにそなわっているショートコードの基本を学んで、そしていくつか使えるようになることです。

ブログをやっているけど、あまりプログラミングやワードプレスに親しみがない方にとっては、ショートコードの意味からよく分からないはずです。

私自身、ブログ運営を始めるまではショートコードって何なん?

って感じだったのですが、実際使えるようになると「これほど便利なのか」と今ではショートコードを記事に使いまくってます。

是非あなたも使ってみてください

あると超絶便利な機能ショートコードについて、見ていくことにしましょう。

ショートコードとは

まずはショートコードがなんなのか、ざっくりでいいので理解するところから始めましょう。

ショートコードとは、事前に登録してあるいろいろな機能や動作、装飾などを[ ]で囲った短いコードで呼び出せるとても便利な機能のこと

言葉だけだとあんまりよくわからない

例えば、サイトマップを作成するときにいちいち自分で全記事分のリンクを貼るのはめちゃめちゃしんどいですよね。

それを[sitemap]て段落ブロックに打ち込むだけで、勝手に全記事一覧を作ってくれる。そんな便利な機能のことです。

僕のイメージはBLEACHブリーチ詠唱破棄えいしょうはきなんですよね。ショートコードって、本来必要な詠唱コードをいちいち唱えなくてもパッと技名だけショートコードで効果が発動するので。

要するに、ショートコードはあらかじめCocoonの中にある技を呼び出すための呪文みたいなもんって覚えてもらえればいいと思います。

Cocoonショートコードの種類一覧

Cocoonのショートコードは数が多いため、ある程度機能ごとに分類してまとめます。

全種類をバーっと並べるだけになりますので、それぞれの詳しい使い方はご自身でお調べいただきますようお願いします。解説記事は近いうちにアップする予定です。

ショートコードの分類と種類一覧
  1. 自動生成系
    • 新記事一覧
    • 人気記事一覧(記事ランキング)
    • サイトマップ
    • 目次
    • ブログカード
    • RSS記事一覧
  2. 自分で登録・設定する系
    • ボックスメニュー
    • プロフィールボックス
    • ナビカード(任意の記事一覧)
    • テンプレート(定型文)
    • ランキング(商品等の任意のアイテム)
  3. 広告・アフィリエイト系
    • 広告(アドセンス)表示
    • アフィリエイトタグ
    • Amazon商品リンク
    • 楽天商品リンク
  4. 装飾系
    • 評価スター(レーティングスター)
    • タイムライン(時系列・年表)
  5. 便利系
    • (期間限定)キャンペーン中だけ表示する
    • ログインユーザーのみに表示する
    • (過去~)経過時間
    • (過去~)年齢
    • (~未来)カウントダウン

以上がCocoonショートコードです。めちゃくちゃたくさんありますが、全種類を使いこなせる必要は全然ありません。

あなたが興味を持った機能やこれから紹介していくものを使っていただければ、それだけで十分です。

このショートコードの分類についてはものぐさWEBノートさんの記事を参考にさせていただきました。
外部リンクCocoonで使える[ショートコード]のオプションと使い方まとめ

ショートコードの基本的な使い方

前置きでショートコードの知識をざっと吸収していただきましたので、いよいよこの項目でショートコードの使い方を説明していきます。

私はブロックエディタしか使わないので、ブロックエディタの画面で説明していきますね。

どこに書くか

  • 投稿ページ,固定ページの段落ブロック
  • カテゴリーページ,タグページの本文
  • ウィジェットのカスタムHTML

上記のようなところに書き込むとショートコードが発動します。

本文など普通に文章を書くところに書けばいいってことですね。

どうやって書くか

基本中の基本ですが、ショートコードはすべて半角で書きます。かっこもスペースも英数字も記号も半角で書きます。

また、小文字は小文字・大文字は大文字で書かないと発動しませんので注意が必要です。

ひとつ例を見てみましょう

例えば、プローフィールボックスをショートコードで呼び出す時は下の画像のように書きます。

▼編集画面▼
▼実際の投稿画面▼
プロフィールボックスが出る

そして、ショートコードは本文の途中に書いたとしてもきちんと効果が発揮されます。

なので、こんな感じで文章の途中に[temp id=42]みたいに書いてテンプレートを呼び出してもいいわけです。
※本文章の編集画面ではショートコードが発動しないように細工をしているため[temp id=42]と読めています。普通に書いたら発動します。

以上をまとめると、ショートコードの書き方はこんな感じになります。

  • ショートコードはすべて半角で書く
  • 小文字は小文字,大文字は大文字できちんと分ける
    ※例外はありますが基本はそう思ってください
  • 文章の間に書いてもきちんと発動する

ツールバーから呼び出せるショートコードもある

ブロックエディタのツールバーから呼べるショートコードもいくつかあります。

▼ツールバーからショートコードを選べる▼

ショートコードの右となりのテンプレートを押せば、登録したテンプレートショートコードを呼び出すことも可能です。

ちなみにツールバーは投稿画面右上の下書き保存,プレビュー,公開,⚙マークの右にあるを選択→トップツールバー

にチェックを入れると画面上部に常にツールバーが出ている状態になるのでおすすめです。

▼ツールバーはトップに固定するのがおすすめ▼

何を書くか

これは、全部書くと大変なことになりますので、次の項目で使いこなしたいショートコードを紹介していきます。

全種類のショートコードで何を書けばいいのか知りたいという方はCocoon公式のショートコードのページなどをご覧ください。

公式記事作成時に利用できるショートコード集
外部リンクCocoonで使える[ショートコード]のオプションと使い方まとめ

使いこなしたい便利なショートコード5選

この項目では、数あるショートコードの中から使いこなせるととても便利なショートコードを厳選して紹介していきます。

新着記事一覧

ショートコード名新記事一覧
基本の書き方[new_list]
機能記事を新しい順に一覧で表示する
使いどころ固定ページでトップページを作るとき
記事の最後に関連記事として表示など
▼編集画面で[new_list]▼
実際に表示される記事一覧

新記事一覧のショートコードは使いどころの多いショートコードです。

ショートコードにオプションを追記することでカテゴリごとの新着記事とか表示させる記事数などを指定することができます。

▼オプション一覧▼
▼オプションを含めた書き方の例▼

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

オプションとオプションの間は半角スペースが入っています。また、オプションの値を””で囲って”5”とかしてもOKです。

オプションがめちゃめちゃ多いですが、あまり気にせず、いじりたい設定の部分だけをピックアップしてショートコードを書けばいいです。

人気記事一覧

ショートコード名人気記事一覧
基本の書き方[popular_list]
機能記事をPVが多い順に一覧で表示する
使いどころ固定ページでトップページを作るとき
記事の最後に関連記事として表示など
▼編集画面で[popular_list]▼
実際に表示される記事一覧

人気記事一覧は新着記事一覧と並べて表示させる場合が多いですかね。サイドバーや記事下はウィジェットで制御できるのでそういうところではショートコードではないですな。

人気記事一覧はオプションを記入することでPV数表示や集計期間などを指定することができます。

▼オプション一覧▼
▼オプションを含めた書き方の例▼

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

オプションは""で囲わなくても効果は発揮されます。デフォルト値から変更したい部分だけピックアップしてオプションを記入すればOKです。

サイトマップ

ショートコード名サイトマップ
基本の書き方[sitemap]
機能全記事一覧リンクを作成する
使いどころ手軽にサイトマップページを作りたいとき
▼編集画面で[sitemap]▼
実際に表示される記事一覧(一部)

簡単お手軽にサイトマップページを作るのであれば、サイトマップショートコードで一発で作ることができます。

[sitemap]にもオプションが付いています。

▼オプション一覧▼
▼オプションを含めた書き方の例▼

[sitemap page=1 single=1 category=1 archive=0]

こだわりがない限りは[sitemap]で事足りると思います。

▼[sitemap]で表示したページを見てみる▼

テンプレート

ショートコード名テンプレート
基本の書き方[temp id=数字]
機能あらかじめ登録しておいた文章を呼び出す
使いどころ毎回使う決まり文句があるとき
本記事最後の項目「Cocoon関連記事」とか

僕の場合は本記事の最後の見出しにもなっている関連記事をこのテンプレートで表示させています。

あらかじめCocoon設定テンプレートに見出しと新着記事一覧を表示させるようにショートコードを書いて登録してあります。

Cocoon設定→テンプレート
からテンプレートを登録

テンプレートのエディタはクラシックエディタの書き方だと思うのですが、私はよくわからないので、

投稿記事の下書きでブロック記事を使い書いたものを一気にコピーしてテンプレートに貼り付けています。

テンプレート登録が完了すると投稿記事ツールバーのテンプレートから登録しておいたCocoon関連記事を選択するだけで[temp id=○○登録番号]と入力され実際には関連記事一覧が表示されます。

投稿画面ツールバーのテンプレートから呼び出せる

テンプレートと新着記事一覧のコンボです

テンプレートの良いところはもしも修正が必要になったときに、登録してあるテンプレートだけ修正すれば、全部に反映されるところ。

文章の管理がとても楽ですね。

アフィリエイトタグ

ショートコード名アフィリエイトタグ
基本の書き方[affi id=数字]
機能あらかじめ登録しておいたアフィリエイトタグを呼び出す
使いどころ何回も使う案件があるときに便利

テンプレートショートコードと同様に、アフィリエイトタグもあらかじめ登録しておくことで簡単に呼び出すことができるようになります。

登録はCocoon設定アフィリエイトタグ新規追加でできます。

使い方の一例として、もしもアフィリエイトのアフィリエイトタグを登録して使用するところまでを見てみましょう。

Cocoon設定→アフィリエイトタグ→新規追加画面
もしものサイトからタグをコピーして内容に貼り付け
タイトル入力
エディターのリストに表示
にチェックし保存する
▼保存ができると一覧にショートコードが登録される▼
▼投稿画面ツールバーのアフィリエイトタグを選択▼
さっき登録したもしもアフィリエイトを選択
▼段落ブロックにショートコードが記入される▼
▼実際のアフィリエイト広告▼

いろんな記事で使用するアフィリエイト案件はぜひ登録しておくことをおすすめします。仮に案件が停止してしまった場合、何か所も貼ってある広告を貼りかえるのはダルすぎます。

アフィリエイトタグなら登録情報を書き換えるだけで全箇所に反映されるのでめちゃくちゃ手間が省けますよね。

便利機能のショートコードを使ってみよう

本記事では、【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい

ということで、Cocoonのショートコードについて書いてきました。ショートコードって何?ってところから、実際に使用しているところまで網羅しています。

ブログ運営するのに絶対使えないとダメってわけではないですが、ショートコードを使えるのと使えないのとでは運営の幅に大きく差がでてきます。

ぜひショートコードに興味を持っていただいて、使いこなせるようになってもらえると私としてはとても嬉しく思います。

お疲れさまでした

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント