みなさん、ショートコードってご存知ですか？
「よく知らないな」「知ってはいるけどあまり使っていない」というみなさんはとっても損をしています…！
トップページや記事の作成時に、記事リンクや装飾などが簡単に実装できる便利な機能。
この記事を読んで、きちんとショートコードを理解し、もっとブログを効率的に書きましょう！
- ショートコードとは
- ショートコードの設置方法
- Cocoonテーマで使えるショートコード
ショートコードとは
ここで言うショートコードは、WordPress固有のコードです。
通常、
- サイトにファイルを埋め込む
- ボタンの装飾などオブジェクトを作成する
といった場合には、通常は複雑なコードを書くことが必要です。
初心者には高い壁…
ですが、ショートコードを利用すれば簡単にできます。
例えば、サイトマップを表示したい場合、ショートコードが無いと、「＊＊＊と打って、〜と指示させて…」などプログラミングを駆使して設定しなければなりません。
この際、ショートコードを設定すれば、[[sitemap]]と打つだけで表示することができます。
ショートコードの設定って何？できないよ？
そう思われる方もいらっしゃるかもしれませんが、心配ご無用！
WordPressやデザインテーマには既にショートコードが設定されている場合が大半です。
設定されているショートコードを知っていれば、簡単に使うことができます。
ショートコードの設置の仕方
ショートコードの設置方法は簡単で、段落ブロックで、[***] と括弧で既定のコードを囲むだけです。
Cocoonにはショートコードブロックというものも存在します。
以前はショートコードブロックを使用しなければ設定できませんでしたが、今は使わずとも設定できます。もちろん使用しても問題はありません。
ショートコードを別サイトからコピペした場合は出現することもあるよ
Cocoonテーマのショートコード
Cocoon開発者のわいひらさんが紹介していたショートコードを簡単に紹介します（Coccon公式ブログも併せてご覧ください）。
どれも便利なものなので、是非使ってみてくださいね。
トップ画面に使えるショートコード
新着記事一覧 [new_list]
[new_list] と書くと、ブログ内の新着記事を新しい順に表示します。
人気記事一覧 [popular_list]
[popular_list] と書くと、ブログ内の人気記事をよく読まれている順に表示します。
1位・2位などのランキングナンバーも表示させたいときは、コードにrank=1を追加しましょう。
人気記事の集計期間の指定もdays=***で設定きます。
ナビカード [[navi_list name=”***”]]
自分が読んでほしい記事をカスタマイズして表示できます。
ワードプレスの「外観」内のメニューの設定で記事リストを作成し、
ページに載せる際、[[navi_list name=”***”]] と入力します。
詳しい設定の仕方はこちらの記事↓で説明しています。
ちなみに、ここまでの一覧表示設定はオプションの追加ができます。上記のナビカード記事で紹介していますので、ここでは一部を記載します。
- 表示デザイン変更 … type=***
- 表示記事数の変更 … count=***
- タイトルを太字 … bold=1
- カテゴリーを指定 … cats=***
- 説明文の表示 … snippet=1
ボックスメニュー [[box_menu name=”***”]]
サイト上部やサイドバーなどに、カテゴリーや固定ページに飛べるアイコン型メニューを表示できます。
先ほどのナビカード同様、ワードプレスの「外観」内のメニューの設定で記事リストを作成し、
ページに載せる際、[[box_menu name=”***”]] と入力することで表示できます。
詳しい設定の仕方はこちらの記事↓で説明しています。
記事作成時に使えるショートコード
時間経過 [yago from="****-**-**"]
例えば、記事内に『10年前に〜しました。』という文を記載した場合、更新日時点では10年前ですが、1年後には11年前となります。
こういった場合、このショートコードを使えば、1年後は自動的に11年前と表示され、手直しの必要がなくなります。
基本コードは、[yago from="日にち"]です。日にちには、相対時間を表示させたい日にちを記入します。
年齢経過 [age from="****-**-**"]
時間経過の年齢版です。記事内に『20歳です。』と記載した場合、更新日時点では20歳ですが、1年後には21歳となります。
こういった場合にこのショートコードを使えば、1年後は自動的に21歳と表示されるので、手直しの必要がなくなります。
基本コードは、[age from="誕生日"]です。日にちには、相対時間を表示させたい日にちを記入します。
テンプレート [temp id="***"]
Cocoon設定でテンプレートを保存しておくと、ショートコードで呼び出すことが出来ます。
ショートコードは、[temp id="***"]です。
詳しくはこちらの記事↓をご覧ください。
プロフィールボックス [author_box]
記事内の好きな場所に自分のプロフィールを表示できます。
id=** で、ユーザーidを指定すると他のユーザーのプロフィールを表示することもできます。
ランキング [rank id="***"]
表示したいランキングをあらかじめ作成、設定しておけば、簡単に記事内やサイドバーにランキングを導入できます。
ショートコードは、[rank id="***"]です。
詳しくはこちらの記事↓をご覧ください。
広告表示に使えるショートコード
広告表示 [ad]
Cocoon設定にて設定したアドセンス広告を任意の位置に表示できます。
Cocoon設定でアドセンス広告を設定する際は、[ad]ショートコードを有効にするにチェックを入れると使用可能になります。
詳しい設定方法はこちらの記事↓をご覧ください。
アフィリエイトリンク [affi id="***"]
Cocoon設定のアフィリエイトタグにコードを登録しておくと、ショートコードで表示することが出来ます。
ショートコードは、[affi id="***"]です。
amazon・楽天のリンクに関しては、Cocoon設定のAPIにて設定をすると、それぞれのリンクをショートコード化できます。
詳しい設定方法はこちらの記事↓をご覧ください。
キャンペーン中のみ表示設定
広告を表示させる際、中には広告に期限があるものも存在します。
ある一定期間だけ表示したい内容がある場合にこのショートコードを使えば、期間外には非表示となります。
クリスマスを例に挙げると、
[[campaign from=”2020-12-24 00:00:00″ to=”2020-12-25 23:59:59″]
メリークリスマス！
[/campaign]]
以上のように表記すると、12/24の00：00から12/25の23:59まで、「メリークリスマス！」と表示されます。
その他
サイトマップ [[sitemap]]
公開中のページをすべて、タイトルリスト形式で表示します。
固定ページに[[sitemap]] と書いて保存するだけで設定できるので、まだの方はぜひ設定しておきましょう。
以下のオプションを追加することもできます。
- 固定ページの非表示…page=0
- 投稿ページの非表示…single=0
- カテゴリーページの非表示…category=0
- 月別アーカイブページの表示archive=1
目次 [toc]
目次の表示場所を自由に変更できます。
例えば、ウィジェットの「サイドバースクロール追従」に[toc] と書いておくと、記事を読む際に目次がサイドバーにずっと追従するよう設定できます。
評価スター [star]
数値での評価を星マークで表現します。
以下のオプションを追加することもできます。
- 評価値(0～100) … rate=***
- 評価最大値(1～100) … max=***
- 評価数値の非表示 … number=0
カウントダウン [countdown to="****-**-**"]
設定した日付までの日数をカウントダウン表示します。
ショートコードは、[countdown to="****-**-**"]です（年月日を入力）。
ブロックエディターも使いこなそう
ここまで、ショートコードをずらっと紹介してきましたが、これらを活用すると同時に、ブロックエディターを使いこなしましょう。
ブロックエディターでは、文章や画像の位置調整やレイアウトの変更が、HTMLやCSSの知識がなくても簡単にでき、ブログ執筆に関する大半のことはできます。
Cocoonテーマでのブログ作成時に使えるブロックについては、こちらの記事↓で詳しく紹介しています。
まとめ
今回はCocoonテーマで利用できるショートコードについてお話ししました。
- 読者に優しいデザインにしたい
- 手直しの手間を減らしたい
といったプラスαの願いを無料テーマで叶えてくれるなんて、Cocoonテーマはすごいですね！
ブロックエディタを使いこなして、さらにショートコードを理解すれば、より見やすく読者ファーストな記事が書けるはずです。
みなさんも色々試してみてくださいね！
それでは。
コメント