ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

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

   

don’t_click

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

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

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

などなど。

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

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

 

SPONSERD LINK

CTAエリアの追加方針

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

 

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

 

今回の方針は、

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

といった所です。

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

 

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

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

 

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

僕の場合、フッターにもウィジェットを3つ追加しているので、今回で8に。
(Stinger3デフォルトではウィジェットが4つ搭載されてますので、その場合は5です)

 

次に、ウィジェットを記事に挿入

今回は、単一記事にウィジェットを挿入するので、修正対象は、single.phpです。

僕の場合、記事下にあるSNSボックスの更にその下についかしましたので、修正箇所は、下記コードの下にしました。

挿入先はお好みで変えても良いかも知れませんね。^^

追加したコードは下記です。

 

次は、デザインの変更

今回は、目立つようにグレー系の背景に白抜きの文字にしました。

コードは下記の通りですが、ここもお好みで~ですね。^^

style.cssの最後にでも追記してあげて下さい。

ちなみに、ここのデザインは、バズ部さんの「E-BOOKをダウンロード」のCTAのデザインを参考にさせて頂きました。^^;

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

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

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

 

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

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

といった感じですね。

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

CTA_box

 

まとめ

以上、修正箇所は

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

の3点です。

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

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

 

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

SPONSERD LINK

 - stinger3 ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 471 follow us in feedly
SPONSERD LINK

  関連記事