はじめに
Webマーケンティングを行う上で大切な要素の一つでもあるCTAの設置ですが、スワローではCTAを作成する機能とショートコードが提供されているため簡単に作成することができ、公式ページでも作成の仕方の説明がされています。今回は実際にCTAを作成したため、作り方の手順について説明をします。
CTAとは
CTAとは「Call To Action」の略語で、「行動喚起」を意味する用語です。
例えばブログで紹介した商品を実際に購入してもらうためにサイトに誘導する、SNSのフォロワーになってもらうためにプロフィールページに誘導するなどがそれに当たります。
公式ドキュメントに沿ってCTAを作ってみる
まずは公式ドキュメントに沿ってCTAの作成をしていこうと思います。
ドキュメントのページはスワローではなくスワローの前に販売されていたストークスのページなのですが、基本的にスワローは互換性があるため特に問題ありません。
スワローのショートコードを利用することで簡単にCTAが作成できます。実際にできたのがこちらです。
[cta_in]
[cta_ttl]WPテーマ「スワロー」[/cta_ttl]
< img class="aligncenter" src="画像のURL">;
SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。
「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。
[cta_btn link="ここにボタンのリンク先を"]テーマ詳細をみる[/cta_btn]
[/cta_in]
CTA用のショートコードで囲むだけで簡単に作成することができました！
CTAのデザインを変えてみる
CTAのデザインですが、他のショートコードと併用することが可能なため、カラム数やボタンの色なども変えることが可能です。CTAのカスタマイズについても公式ページで説明されています。
上記のページを参考に作成したものがこちらです。
[cta_in]
[colwrap]
[col2]< img src="画像のURL" class="aligncenter">
[/col2]
[col2]
[cta_ttl]WPテーマ「スワロー」[/cta_ttl]
SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。
「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。
[btn class="rich_yellow"]
< a href="ここにボタンのリンク先を">テーマ詳細をみる
[/btn]
[/col2]
[/colwrap]
[/cta_in]
やっていることは2カラム配置のショートコード(colwrap, col2)とボタンのショートコード(btn)を組み合わせただけです。
実際にCTAを配置してみよう
次に実際にCTAを配置します。スワローではCTA配置のオプションも用意されているため、先ほどできたソースコードを各ページの文末にいちいちコピペしなくてもまとめて配置できるようにまります。
まず、「外観 -> ウィジェット」と進み、カスタムHTMLの「【共通】CTA設定」を選択し、ウィジェットに追加します。
すると「共通】CTA設定」の部分にHTMLを入力するフォームが現れるのでここに先ほど作成したCTAのソースコードを入力します。保存することで全てのページCTAが配置できるようになります。
まとめ
今回はスワローにおけるCTAの作成・配置の手順について説明しました。とても簡単に作成することができて有料テーマの有能さを改めて感じました。
