本記事の目的はWordPressテーマCocoonに備わっているショートコードの基本を学んで、そしていくつか使えるようになることです。
ブログをやっているけど、あまりプログラミングやワードプレスに親しみがない方にとっては、ショートコードの意味からよく分からないはずです。
私自身、ブログ運営を始めるまではショートコードって何なん？
って感じだったのですが、実際使えるようになると「これほど便利なのか」と今ではショートコードを記事に使いまくってます。
是非あなたも使ってみてください
あると超絶便利な機能ショートコードについて、見ていくことにしましょう。
ショートコードとは
まずはショートコードがなんなのか、ざっくりでいいので理解するところから始めましょう。
ショートコードとは、事前に登録してあるいろいろな機能や動作、装飾などを[ ]で囲った短いコードで呼び出せるとても便利な機能のこと
言葉だけだとあんまりよくわからない
例えば、サイトマップを作成するときにいちいち自分で全記事分のリンクを貼るのはめちゃめちゃしんどいですよね。
それを［sitemap］て段落ブロックに打ち込むだけで、勝手に全記事一覧を作ってくれる。そんな便利な機能のことです。
僕のイメージはBLEACHの詠唱破棄なんですよね。ショートコードって、本来必要な詠唱をいちいち唱えなくてもパッと技名だけで効果が発動するので。
要するに、ショートコードはあらかじめCocoonの中にある技を呼び出すための呪文みたいなもんって覚えてもらえればいいと思います。
Cocoonショートコードの種類一覧
Cocoonのショートコードは数が多いため、ある程度機能ごとに分類してまとめます。
全種類をバーっと並べるだけになりますので、それぞれの詳しい使い方はご自身でお調べいただきますようお願いします。解説記事は近いうちにアップする予定です。
以上がCocoonショートコードです。めちゃくちゃたくさんありますが、全種類を使いこなせる必要は全然ありません。
あなたが興味を持った機能やこれから紹介していくものを使っていただければ、それだけで十分です。
このショートコードの分類についてはものぐさWEBノートさんの記事を参考にさせていただきました。
外部リンクCocoonで使える[ショートコード]のオプションと使い方まとめ
ショートコードの基本的な使い方
前置きでショートコードの知識をざっと吸収していただきましたので、いよいよこの項目でショートコードの使い方を説明していきます。
私はブロックエディタしか使わないので、ブロックエディタの画面で説明していきますね。
どこに書くか
- 投稿ページ,固定ページの段落ブロック
- カテゴリーページ,タグページの本文
- ウィジェットのカスタムHTML
上記のようなところに書き込むとショートコードが発動します。
本文など普通に文章を書くところに書けばいいってことですね。
どうやって書くか
基本中の基本ですが、ショートコードはすべて半角で書きます。かっこもスペースも英数字も記号も半角で書きます。
また、小文字は小文字・大文字は大文字で書かないと発動しませんので注意が必要です。
ひとつ例を見てみましょう
例えば、プローフィールボックスをショートコードで呼び出す時は下の画像のように書きます。
プロフィールボックスが出る
そして、ショートコードは本文の途中に書いたとしてもきちんと効果が発揮されます。
なので、こんな感じで文章の途中に[temp id=42]みたいに書いてテンプレートを呼び出してもいいわけです。
※本文章の編集画面ではショートコードが発動しないように細工をしているため[temp id=42]と読めています。普通に書いたら発動します。
以上をまとめると、ショートコードの書き方はこんな感じになります。
- ショートコードはすべて半角で書く
- 小文字は小文字,大文字は大文字できちんと分ける
※例外はありますが基本はそう思ってください - 文章の間に書いてもきちんと発動する
ツールバーから呼び出せるショートコードもある
ブロックエディタのツールバーから呼べるショートコードもいくつかあります。
ショートコードの右となりのテンプレートを押せば、登録したテンプレートショートコードを呼び出すことも可能です。
ちなみにツールバーは投稿画面右上の下書き保存,プレビュー,公開,⚙マークの右にある︙を選択→トップツールバー
にチェックを入れると画面上部に常にツールバーが出ている状態になるのでおすすめです。
何を書くか
これは、全部書くと大変なことになりますので、次の項目で使いこなしたいショートコードを紹介していきます。
全種類のショートコードで何を書けばいいのか知りたいという方はCocoon公式のショートコードのページなどをご覧ください。
公式記事作成時に利用できるショートコード集
外部リンクCocoonで使える[ショートコード]のオプションと使い方まとめ
使いこなしたい便利なショートコード５選
この項目では、数あるショートコードの中から使いこなせるととても便利なショートコードを厳選して紹介していきます。
新着記事一覧
| ショートコード名 | 新記事一覧 |
| 基本の書き方 | [new_list] |
| 機能 | 記事を新しい順に一覧で表示する |
| 使いどころ | 固定ページでトップページを作るとき 記事の最後に関連記事として表示など |
実際に表示される記事一覧
新記事一覧のショートコードは使いどころの多いショートコードです。
ショートコードにオプションを追記することでカテゴリごとの新着記事とか表示させる記事数などを指定することができます。
[new_list count=5 type=default cats=all children=0 post_type=post]
オプションとオプションの間は半角スペースが入っています。また、オプションの値を””で囲って”5”とかしてもOKです。
オプションがめちゃめちゃ多いですが、あまり気にせず、いじりたい設定の部分だけをピックアップしてショートコードを書けばいいです。
私は新着記事一覧のショートコードを使ってサイトマップを作成しています。いい感じで作れましたので、サイトマップの作り方記事もみてみてください。
人気記事一覧
| ショートコード名 | 人気記事一覧 |
| 基本の書き方 | [popular_list] |
| 機能 | 記事をPVが多い順に一覧で表示する |
| 使いどころ | 固定ページでトップページを作るとき 記事の最後に関連記事として表示など |
実際に表示される記事一覧
人気記事一覧は新着記事一覧と並べて表示させる場合が多いですかね。サイドバーや記事下はウィジェットで制御できるのでそういうところではショートコードではないですな。
人気記事一覧はオプションを記入することでPV数表示や集計期間などを指定することができます。
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]
オプションは""で囲わなくても効果は発揮されます。デフォルト値から変更したい部分だけピックアップしてオプションを記入すればOKです。
サイトマップ
サイトマップについては下の記事でより詳しく説明しています。要チェック願います。
テンプレート
| ショートコード名 | テンプレート |
| 基本の書き方 | [temp id=数字] |
| 機能 | あらかじめ登録しておいた文章を呼び出す |
| 使いどころ | 毎回使う決まり文句があるとき 本記事最後の項目「Cocoon関連記事」とか |
僕の場合は本記事の最後の見出しにもなっている関連記事をこのテンプレートで表示させています。
あらかじめCocoon設定→テンプレートに見出しと新着記事一覧を表示させるようにショートコードを書いて登録してあります。
からテンプレートを登録
テンプレート登録が完了すると投稿記事ツールバーのテンプレートから登録しておいたCocoon関連記事を選択するだけで[temp id=○○]と入力され実際には関連記事一覧が表示されます。
テンプレートと新着記事一覧のコンボです
テンプレートの良いところはもしも修正が必要になったときに、登録してあるテンプレートだけ修正すれば、全部に反映されるところ。
文章の管理がとても楽ですね。
アフィリエイトタグ
| ショートコード名 | アフィリエイトタグ |
| 基本の書き方 | [affi id=数字] |
| 機能 | あらかじめ登録しておいたアフィリエイトタグを呼び出す |
| 使いどころ | 何回も使う案件があるときに便利 |
テンプレートショートコードと同様に、アフィリエイトタグもあらかじめ登録しておくことで簡単に呼び出すことができるようになります。
登録はCocoon設定→アフィリエイトタグ→新規追加でできます。
使い方の一例として、もしもアフィリエイトのアフィリエイトタグを登録して使用するところまでを見てみましょう。
もしものサイトからタグをコピーして内容に貼り付け
タイトル入力
にチェックし保存する
さっき登録したもしもアフィリエイトを選択
いろんな記事で使用するアフィリエイト案件はぜひ登録しておくことをおすすめします。仮に案件が停止してしまった場合、何か所も貼ってある広告を貼りかえるのはダルすぎます。
アフィリエイトタグなら登録情報を書き換えるだけで全箇所に反映されるのでめちゃくちゃ手間が省けますよね。
アフィリエイト広告の貼り方について詳しく説明した記事があります。広告の貼り方についてはこちらも確認ください。
便利機能のショートコードを使ってみよう
本記事では、【Cocoon】ショートコードの使い方！便利さをマジで知ってもらいたい
ということで、Cocoonのショートコードについて書いてきました。ショートコードって何？ってところから、実際に使用しているところまで網羅しています。
ブログ運営するのに絶対使えないとダメってわけではないですが、ショートコードを使えるのと使えないのとでは運営の幅に大きく差がでてきます。
ぜひショートコードに興味を持っていただいて、使いこなせるようになってもらえると私としてはとても嬉しく思います。
お疲れさまでした
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
コメント