このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

Cocoon*ショートコードを活用して、ブログを簡単に整える

ブログ

みなさん、ショートコードってご存知ですか?

「よく知らないな」「知ってはいるけどあまり使っていない」というみなさんはとっても損をしています…!

トップページや記事の作成時に、記事リンクや装飾などが簡単に実装できる便利な機能。

この記事を読んで、きちんとショートコードを理解し、もっとブログを効率的に書きましょう!

この記事でわかること
  • ショートコードとは
  • ショートコードの設置方法
  • 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="日にち"]です。日にちには、相対時間を表示させたい日にちを記入します。

『[yago from="2018-01-01"]年前』と記入すると、『4年前』と表示されるよ。

年齢経過 [age from="****-**-**"]

時間経過の年齢版です。記事内に『20歳です。』と記載した場合、更新日時点では20歳ですが、1年後には21歳となります。

こういった場合にこのショートコードを使えば、1年後は自動的に21歳と表示されるので、手直しの必要がなくなります

基本コードは、[age from="誕生日"]です。日にちには、相対時間を表示させたい日にちを記入します。

『[age from="2018-01-01"]』と記入すると、『4歳』と表示されるよ。

テンプレート [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]

数値での評価を星マークで表現します。


 ↓ [star] ↓

5.0

以下のオプションを追加することもできます。

  • 評価値(0~100) … rate=***
  • 評価最大値(1~100) … max=***
  • 評価数値の非表示 … number=0

カウントダウン  [countdown to="****-**-**"]

設定した日付までの日数をカウントダウン表示します。

ショートコードは、[countdown to="****-**-**"]です(年月日を入力)。

ブロックエディターも使いこなそう

ここまで、ショートコードをずらっと紹介してきましたが、これらを活用すると同時に、ブロックエディターを使いこなしましょう

ブロックエディターでは、文章や画像の位置調整やレイアウトの変更が、HTMLやCSSの知識がなくても簡単にでき、ブログ執筆に関する大半のことはできます。

簡単に画像を入れられたり、ファイルを埋め込めたりするもんね!

Cocoonテーマでのブログ作成時に使えるブロックについては、こちらの記事↓で詳しく紹介しています。

意外と知らない機能がたくさんあるから、試してみると良いよ!

まとめ

今回はCocoonテーマで利用できるショートコードについてお話ししました。

  • 読者に優しいデザインにしたい
  • 手直しの手間を減らしたい

といったプラスαの願いを無料テーマで叶えてくれるなんて、Cocoonテーマはすごいですね!

ブロックエディタを使いこなして、さらにショートコードを理解すれば、より見やすく読者ファーストな記事が書けるはずです。

みなさんも色々試してみてくださいね!

それでは。

コメント