【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です。

サイトマップ

サイトマップについては下の記事でより詳しく説明しています。要チェック願います。

テンプレート

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

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

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

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

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

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

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

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

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

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

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

アフィリエイトタグ

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

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

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

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

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

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

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

アフィリエイト広告の貼り方について詳しく説明した記事があります。広告の貼り方についてはこちらも確認ください。

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

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

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

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

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

お疲れさまでした

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

記事の書き方

特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

上記記事でまとめています

  • 記事作成の一連の流れ
  • 具体的な記事の書き方
  • リスト(箇条書き)の使い方
  • 吹き出しの使い方
  • ブログカードの使い方
  • テーブル(表)の使い方
  • 各種ボタンの使い方
  • ショートコードの使い方
  • しっておきたい投稿画面でよく使う機能

コメント