「アルバトロス」「ハミングバード」「ストーク」を使っている場合、記事下にCTA（コールトゥーアクション）を設置している方が多いかと思います。
弊社テーマのCTAは専用ショートコードを設置して表示するのが一般的な使い方なのですが、その他のショートコードと組み合わせることも可能です。今回は、このサイトで設置しているCTAの設置方法を例に、CTAの効果的な設置例をご紹介したいと思います。
もくじ
まずは通常のCTAの設置方法をおさらい
まずはデフォルトのCTAの設置方法をおさらいしましょう。
テーマの使い方でも紹介させていただいておりますが、【外観 > ウィジェット】内の【CTA設定】というウィジェット領域に、「テキスト」というウィジェットパーツを配置し、その中に表示させたいCTAを設置します。
うまく設置できれば、記事下に下記キャプチャのようなCTAが表示されるようになります。
CTAサンプルのスクリーンショット
デフォルトのサンプルコード
ウィジェットの「テキスト」内に設置するサンプルコードが下記です。画像URLやリンク先URLに置き換えていただくことで設置が可能となっています。
[cta_in] [cta_ttl]ここにキャッチコピーを記入[/cta_ttl] ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述ここに説明文章を記述 [cta_btn link="ここにボタンのリンク先を"]ここにボタン内のテキストを[/cta_btn] [/cta_in]
【応用編】CTA用のショートコードとその他のショートコードを併用する
この記事の主題でもある、CTA部分のちょっと変わった見た目を表現する方法です。
現在このサイトで設置しているCTAは下記のキャプチャのような見た目で、デフォルトのCTAの見た目とは少し違います。
これを実現するには、CTA用のショートコードとボタン用ショートコード、2カラムショートコードを併用して使います。
まずは上記の見た目を再現するためのコードをそのままご紹介。（ご自身のサイトで利用する場合は下のサンプルコードをご利用ください。）
[cta_in] [colwrap] [col2]<img src="https://open-cage.com/wp-content/uploads/2016/05/stork-img.png" class="aligncenter">[/col2] [col2] <h3 style="text-align:center;"><span style="font-size:12px;">新作！究極のモバイルファースト</span><br>WPテーマ「ストーク」</h3> 「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。 [btn class="rich_yellow"]<a href="https://open-cage.com/stork/">テーマ詳細をみる</a>[/btn] [/col2] [/colwrap] [/cta_in]
▼サンプルコード（利用する場合はこちらをご利用ください）
[cta_in] [colwrap] [col2]<img src="ここに画像URLを" class="aligncenter">[/col2] [col2] <h3 style="text-align:center;"><span style="font-size:12px;">ここに小さなテキストを</span><br>ここに見出しや商品名を</h3> ここに簡単な説明などを記載。ここに簡単な説明などを記載。ここに簡単な説明などを記載。 [btn class="rich_yellow"]<a href="ここにリンク先のURLを">ここにボタン内テキストを</a>[/btn] [/col2] [/colwrap] [/cta_in]
このように設定することで、表示可能です。
サンプルコードを使って「テキスト」内にCTAを設置する場合、「自動的に段落追加する」にはチェックをいれないことをおすすめ致します。チェックを入れてしまうと文章の改行が段落として扱われてしまうため、予期せぬ表示崩れが起こる場合があります。
ポイントはCTA用のボタンショートコードを使わずに、主に記事内で使うために用意されている「リッチボタン（黄色）」のショートコードを使っている点。それと2カラムレイアウト用のショートコードを利用して、画像とテキストをPC表示の際に左右に表示している点です。
よって、スマートフォンでみた際には、画像と文字が縦並びに表示されるようになります。
スマートフォンでのCTA表示
これでCTA部分の見た目をちょっと変えることができますね。
CTAは複数設置可能
そしてこれはあまり知られていないのですが、CTAは複数設置可能です。
CTAウィジェット内に複数の「テキスト」パーツを配置し、その中にそれぞれ別々のCTAを設置するだけです。
紹介したいCTAがひとつではなく複数ある場合にこういった使い方もできます。
カテゴリーごとにCTAを切り替えたい場合
ついでにもうひとつ便利な使い方をご紹介しておくと、Display Widgetsというプラグインを使うことでCTAをカテゴリーごとに切り替えることが可能です。
Display Widgetsの使い方は下記記事を参照。
下記記事内ではAdSenseを設置したウィジェットを非表示にする方法をご紹介しておりますが、これを応用することでCTAウィジェットも切り替え設定が可能です。
プラグインの具体的な使い方は記事を参照してもらうとして、CTAを切り替える設定としては下記の手順。
ウィジェットの表示条件を設定（【外観 > ウィジェット】内の各パーツにて設定可能）
- Display Widgetsプラグインを有効化
- 複数のCTAウィジェットパーツを設置する
- 表示条件を設定したいウィジェットパーツを開き条件を設定
このサンプルでは「ストークのお知らせ」と「テーマ編集」というカテゴリーの場合に表示するという設定にしています。 - 設定が完了したら「保存」を押して実際に確認
指定したカテゴリーのみで表示される
この設定をうまく行うことでCTAを表示するカテゴリーや特定の記事をうまく設定することが可能になり、記事の内容に合わせて表示をわけることができます。
より一層便利にCTAウィジェットを活用できますね。
まとめ
今回はCTAウィジェットのデフォルトとは違う使い方をご紹介させていただきました。各ショートコードをうまく組み合わせることで様々な表現が可能になりますので、よろしければ他にも試してみてください。私の方でも想定していなかったようなうまい使い方があるかもしれません。
ご参考になりましたら幸いです。