せっかくブログを訪れて頂いた方には、プラスアルファの行動をして頂きたいですよね。
例えば、よくあるパターンは、
- feedlyへの登録
- Facebookやtwitterでのフォローなど
- メルマガへの登録
などなど。
マーケティング業界では、それらの行動を促すことを「Call To Action（コール トゥ アクション；略してCTA）」と言います。
このCTAですが、行動を明確にうながす事で、その行動を起こす人が増えると言われています。
CTAエリアの追加方針
で、今回は、この「Call To Action」領域を、Stinger3に埋め込むカスタマイズをやってみました。
といっても、やる事は、フッターのカスタマイズと概ね同じです。
今回の方針は、
- 場所は、記事下にあるSNSボックスの更にその下
- 埋め込み方式は、メンテ効率を考慮してウィジェットに
といった所です。
※ 以下、ウィジェットの追加のためにコードを修正して行きますが、必ず各ファイルのバックアップを取っておいて下さい。ｗ
まずは、ウィジェットの追加
ウィジェットは、function.phpのウィジェットのコードに下記を追加します。
//ウィジェットの追加1
register_sidebars(1,
array(
'name'=>'CTA-記事下',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title' => '</h4>',
));加えて、下記コードの数字を＋１します。
僕の場合、フッターにもウィジェットを３つ追加しているので、今回で8に。
（Stinger3デフォルトではウィジェットが4つ搭載されてますので、その場合は5です）
//ウィジェットの追加2
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(8) )次に、ウィジェットを記事に挿入
今回は、単一記事にウィジェットを挿入するので、修正対象は、single.phpです。
僕の場合、記事下にあるSNSボックスの更にその下についかしましたので、修正箇所は、下記コードの下にしました。
挿入先はお好みで変えても良いかも知れませんね。＾＾
//ウィジェットの挿入位置
<div class="kizi02">
<?php get_template_part('sns');?>
</div>追加したコードは下記です。
//ウィジェットの挿入用コード
<!--CTA ここから-->
<div id="call-to-action">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(8) ) : else : ?>
<!-- <p>CTA</p> -->
<?php endif; ?>
</div>
<div class="clear"></div>
<!-- call-to-action ここまで-->
次は、デザインの変更
今回は、目立つようにグレー系の背景に白抜きの文字にしました。
コードは下記の通りですが、ここもお好みで～ですね。＾＾
//call-to-actionウィジェットのスタイル
/*-----------------------------------
call-to-actionウィジェットのスタイル
------------------------------------*/
#call-to-action {
overflow: hidden;
background: #666;
border-top: solid 1px #dddddd;
border-bottom: solid 1px #dddddd;
margin: 20px -40px;
padding: 50px 50px;
}
#call-to-action h4 {
background-color: #666;
color: #dddddd;
font-size: 150%
}
#call-to-action .textwidget {
color: #dddddd;
}
style.cssの最後にでも追記してあげて下さい。
ちなみに、ここのデザインは、バズ部さんの「E-BOOKをダウンロード」のＣＴＡのデザインを参考にさせて頂きました。＾＾；
最後にウィジェットに挿入したいものを追加
以上で、Wordpressの管理画面のウィジェットに「CTA-記事下」というのが出来ていますので、
ここにテキストウィジェットなどを追加してあげればＯＫです。
例えば、ソーシャルサービスのフォローを促す場合だと、
- タイトル：FOLLOW ME!
- 本文：<適当に>＋ソーシャルアイコンとリンク
といった感じですね。
出来上がりのイメージはこんな感じ。
まとめ
以上、修正箇所は
- ウィジェットの追加
- 単一記事への挿入
- デザインの修正
の３点です。
これで、ウィジェット化できましたので、ソーシャルメディアのフォローやメルマガ登録などなど、お好みでウィジェットに追加してあげればＯＫです。
一度ウィジェット化しておけば、配布物のダウンロードボックスにするなど、将来的に色々と活用できて良いかも知れません。
以上、参考になれば幸いです。
