本ページはプロモーションが含まれています

Stinger3カスタマイズ;Call To Actionをウィジェット形式で記事下に追加してみた。

don’t_click

せっかくブログを訪れて頂いた方には、プラスアルファの行動をして頂きたいですよね。

例えば、よくあるパターンは、

  • feedlyへの登録
  • Facebookやtwitterでのフォローなど
  • メルマガへの登録

などなど。

マーケティング業界では、それらの行動を促すことを「Call To Action(コール トゥ アクション;略してCTA)」と言います。

このCTAですが、行動を明確にうながす事で、その行動を起こす人が増えると言われています。

 

スポンサーリンク

CTAエリアの追加方針

で、今回は、この「Call To Action」領域を、Stinger3に埋め込むカスタマイズをやってみました。

 

といっても、やる事は、フッターのカスタマイズと概ね同じです。

 

今回の方針は、

  • 場所は、記事下にあるSNSボックスの更にその下
  • 埋め込み方式は、メンテ効率を考慮してウィジェットに

といった所です。

※ 以下、ウィジェットの追加のためにコードを修正して行きますが、必ず各ファイルのバックアップを取っておいて下さい。w

 

まずは、ウィジェットの追加

ウィジェットは、function.phpのウィジェットのコードに下記を追加します。

 

//ウィジェットの追加1
register_sidebars(1,
    array(
    'name'=>'CTA-記事下',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4>',
    'after_title' => '</h4>',
    ));

加えて、下記コードの数字を+1します。

僕の場合、フッターにもウィジェットを3つ追加しているので、今回で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をダウンロード」のCTAのデザインを参考にさせて頂きました。^^;

最後にウィジェットに挿入したいものを追加

以上で、Wordpressの管理画面のウィジェットに「CTA-記事下」というのが出来ていますので、

ここにテキストウィジェットなどを追加してあげればOKです。

 

例えば、ソーシャルサービスのフォローを促す場合だと、

  • タイトル:FOLLOW ME!
  • 本文:<適当に>+ソーシャルアイコンとリンク

といった感じですね。

出来上がりのイメージはこんな感じ。

CTA_box

 

まとめ

以上、修正箇所は

  • ウィジェットの追加
  • 単一記事への挿入
  • デザインの修正

の3点です。

これで、ウィジェット化できましたので、ソーシャルメディアのフォローやメルマガ登録などなど、お好みでウィジェットに追加してあげればOKです。

一度ウィジェット化しておけば、配布物のダウンロードボックスにするなど、将来的に色々と活用できて良いかも知れません。

 

以上、参考になれば幸いです。

タイトルとURLをコピーしました