MENU

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=”***”]] と入力します。

詳しい設定の仕方はこちらの記事↓で説明しています。

あわせて読みたい
Cocconのナビカードで記事一覧を作成<おすすめ・カテゴリー別など>/WordPress サイトのトップページに自分が見て欲しい記事の一覧を表示したいと思うことはありませんか? Cocoonでは、簡単に記事一覧をカスタマイズすることができます。 また、Coc...

ちなみに、ここまでの一覧表示設定はオプションの追加ができます。上記のナビカード記事で紹介していますので、ここでは一部を記載します。

  • 表示デザイン変更 … type=***
  • 表示記事数の変更 … count=***
  • タイトルを太字  … bold=1
  • カテゴリーを指定 … cats=***
  • 説明文の表示   … snippet=1

ボックスメニュー [[box_menu name=”***”]]

サイト上部やサイドバーなどに、カテゴリーや固定ページに飛べるアイコン型メニューを表示できます。

こんなやつ

先ほどのナビカード同様、ワードプレスの「外観」内のメニューの設定で記事リストを作成し、
ページに載せる際、[[box_menu name=”***”]] と入力することで表示できます。

詳しい設定の仕方はこちらの記事↓で説明しています。

あわせて読みたい
Cocoon*ボックスメニューの使い方・アイコンや画像をメニューボタンに ブログの回遊率をあげたいなぁ もっとカテゴリーなどを見やすくしたい! 『ブログは、まずは見た目よりも中身だ』と言いますが、やっぱり見た目も良くしたいですよね。 ...

記事作成時に使えるショートコード

時間経過  [yago from="****-**-**"]

例えば、記事内に『10年前に〜しました。』という文を記載した場合、更新日時点では10年前ですが、1年後には11年前となります。

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

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

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

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

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

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

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

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

テンプレート [temp id="***"]

Cocoon設定でテンプレートを保存しておくと、ショートコードで呼び出すことが出来ます。

ショートコードは、[temp id="***"]です。

詳しくはこちらの記事↓をご覧ください。

あわせて読みたい
Cocoon*テンプレートの使い方/再利用ブロックも紹介 繰り返し使う文言を毎回打つのはめんどくさい 簡単に設定できる良い方法はないのかな? ブログを書くときって、毎回同じような流れになりませんか? 「この文章毎回使う...

プロフィールボックス [author_box]

記事内の好きな場所に自分のプロフィールを表示できます。

id=** で、ユーザーidを指定すると他のユーザーのプロフィールを表示することもできます。

ランキング  [rank id="***"]

表示したいランキングをあらかじめ作成、設定しておけば、簡単に記事内やサイドバーにランキングを導入できます。

ショートコードは、[rank id="***"]です。

詳しくはこちらの記事↓をご覧ください。

あわせて読みたい
Cocoon*簡単に商品ランキングを作成・カスタマイズする方法 商品ランキングを簡単に作れないかな。 リンク付きのランキングを作りたいな! このように思うことはありませんか? Cocoonテーマでは、簡単にランキングの作成が出来て...

広告表示に使えるショートコード

広告表示 

Cocoon設定にて設定したアドセンス広告を任意の位置に表示できます。

Cocoon設定でアドセンス広告を設定する際は、 ショートコードを有効にするにチェックを入れると使用可能になります。

詳しい設定方法はこちらの記事↓をご覧ください。

あわせて読みたい
Cocoon*Googleアドセンス広告の貼り方3選〈審査用コードについても解説〉 Googleアドセンスに申請しようと思うんだけど、審査用コードってどこに貼るの? 審査通ったんだけど、どうやって広告設定したらいいのかな? ブログを始めたらGoogleア...

アフィリエイトリンク [affi id="***"]

Cocoon設定のアフィリエイトタグにコードを登録しておくと、ショートコードで表示することが出来ます

ショートコードは、[affi id="***"]です。

amazon・楽天のリンクに関しては、Cocoon設定のAPIにて設定をすると、それぞれのリンクをショートコード化できます。

詳しい設定方法はこちらの記事↓をご覧ください。

あわせて読みたい
Cocoon*アフィリエイトタグのショートコードでのリンクの貼り方 アフィリエイトタグ長いんだよなー アフィリエイトタグを簡単に作れたり、 同じタグを楽に何度も貼れたりする方法はないかな ブロガーさんにとって、アフィリエイトタグ...

キャンペーン中のみ表示設定

広告を表示させる際、中には広告に期限があるものも存在します。

ある一定期間だけ表示したい内容がある場合にこのショートコードを使えば、期間外には非表示となります。

いちいち消さなくても勝手に消えてくれるんだね!

クリスマスを例に挙げると、


[[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~100) … rate=***
  • 評価最大値(1~100) … max=***
  • 評価数値の非表示 … number=0

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

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

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

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

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

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

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

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

あわせて読みたい
【WordPress】ブロックエディターの使い方/Cocoon 「みなさん、ブロックエディターは使いこなせていますか?」 そんな問いを私自身に問いかけるとNOになります。(今から説明しようとしてる人がそういうこと言う?笑) W...

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

まとめ

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

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

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

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

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

それでは。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次