好きなもの、好きなだけ、盛り合わせ

ウィジェットでCTAを簡単に設定する方法【全テーマ共通】

      2016/11/17

たまに他のワードプレステーマに触れる機会があるんですが、ずっと気になっていながらも使わずにいた機能(?)がありました。

それは、「CTA(Call To Action)」という、ユーザーの次の行動を促すことができる機能です。(バズ部のXeory Extensionにもありました)

ただ、設置するメリットや意味は理解しているものの、このブログのテーマであるStinger5ではCTAを設定できないんですよね…

そこで!今回は、CTAが設定できないテーマでもCTAを簡単に設定できるようになるカスタマイズをご紹介してみます!

CAUTION

必ずバックアップを取ってからお試しください!

CTAをウィジェットから設定する

今回のカスタマイズは、ワードプレスの標準機能である「ウィジェット」からCTAが設定できるようになる…という内容です。この利点は下記の通り。

  • 一つずつ個別に記事を修正しなくても良い
  • リンクが切れても、簡単に別のリンクを設定できる
  • 特定のカテゴリーや記事ごとにCTAが設定できる

当初、バズ部のXeoryのように、CTAの部分を作成して記事ごとに設定できるようにしようと思ったんですが、管理が面倒なことに気づいたので、ウィジェットから設定できるようにしました。

例えば、100の記事があって、途中で50の記事のCTAを違うCTAに変更しようと思った時。Xeoryの場合は、一つずつ記事を修正しなければいけません。今から100の記事に対してCTAを設定する場合も同じです。

ということで僕は、特定の「カテゴリー」や「記事」ごとに一括でCTAを設定できるようにしました。昔の僕のブログような「めちゃくちゃな内部構造」だとできないんですが…笑

ウィジェットを追加する

では、早速カスタマイズを始めましょう。まずは、ウィジェットエリアに「CTAが設定できるウィジェット」を追加します。(修正するファイルはfunction.php)

詳しいやり方は下記の記事が参考になると思うので、チェックしてみてください。

ヘッダー下をウィジェットで管理!ワードプレスカスタマイズ!

CTA用のウィジェットを追加した後のコードはこうなりました。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバーウイジェット',
    'before_widget' => '<ul class="%2$s"><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'Googleアドセンス用336px',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用300px',
    'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));
//CTA用のウィジェット
register_sidebars(1,
    array(
    'name'=>'CTA_求人サイト',
    'before_widget' => '<div class="cta">',
    'after_widget' => '</div>',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));
register_sidebars(1,
    array(
    'name'=>'CTA_美容室',
    'before_widget' => '<div class="cta">',
    'after_widget' => '</div>',
    'before_title' => '<p style="display:none">',
    'after_title' => '</p>',
    ));

下記の2つのウィジェットが、僕が追加したCTA用のウィジェットです。

  • おすすめの求人サイト
  • 美容室が探せるサイト

へのリンクをウィジェットから設定できます。

POINT

ウィジェットを増やす場合は、

  1. register」から「 ));」までの8行をコピペして、「CTA_〇〇」の名前を変更
  2. 上の(6)の部分を変更(ウィジェットを増やした分だけ数を増やす)

だけです!

 

カスタマイズ後は、CTA用のウィジェットがウィジェットエリアに追加されます。

cta-1

 

後は、左からテキストウィジェットを持ってきて、その中にコードを追加するだけ。

  • カエレバ・ヨメレバのコード
  • 関連記事のコード
  • アフィリエイトのコード

など、リンクできるコード(テキストリンク推奨)であればなんでもOK。コピーしたコードをそのまま貼ってください。

cta-2

▲ちなみに、タイトルは記事中に反映されないので、ご安心ください。「これ何のコードだっけ?」ということがなくなるので、タイトルがある方が管理が楽だと思います。

CTAを表示する部分にコードを追加する

次に、このCTAを表示する部分にコードを追加します。今回は、記事の最後に表示させてみます。(修正するファイルはsingle.php)

▼例えば、Stinger5ならこんな感じ。

          <?php the_content(); //本文 ?>
          <?php wp_link_pages(); ?>
            <!--CTA開始-->
          <?php if(in_category('industry-research')) { ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
<?php endif; ?>
<?php
} else if(is_single(array('mens-hair','zion'))) {
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
<?php endif; ?>
<?php
} else {
?>
<?php
}
?>
            <!--/CTA終了-->
          <p class="tagst"><i class="fa fa-tags"></i>&nbsp;-
            <?php the_category(', ') ?>
            <?php the_tags('', ', '); ?>
          </p>

条件分岐してウィジェットを表示させる

ちょっと難しいと思うので、解説してみます。まず、先ほどの結果ですが、下記のようになります。

  1. 「industry-research」のカテゴリーの記事だけ、求人サイトのCTA(function.phpで追加した5番目のウィジェット)を表示する
  2. 「mens-hair」と「zion」というパーマリンクの記事だけ、美容室のCTA(function.phpで追加した6番目のウィジェット)を表示する

これは、PHPやjavascriptで使える「条件分岐」というやつで、様々な条件を組み合わせることで、任意のウィジェットを表示させることができます。

まぁ、きっと、同じカテゴリーに属する記事に表示させたいCTAは同じだと思うので、基本はカテゴリーの条件分岐でOKだと思います。記事ごとに表示させたい場合は上記のコードを参考にしてください。

ちなみに、「特定のカテゴリーや記事だけ表示させない」という条件分岐もできます。

条件分岐例(カテゴリーがたくさんある場合のCTAウィジェット設定)

例えば、カテゴリーがたくさんある場合の条件分岐はこうなります。

<?php if(in_category('a')) { //aというスラッグのカテゴリー ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
<?php endif; ?>
<?php
} else if(in_category('b')) {  //bというスラッグのカテゴリー
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
<?php endif; ?>
<?php
} else if(in_category('c')) {  //cというスラッグのカテゴリー
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : ?>
<?php endif; ?>
<?php
} else if(in_category('d','e','f')) {  //dというスラッグのカテゴリーとeというスラッグのカテゴリーとfというスラッグのカテゴリー
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(8) ) : else : ?>
<?php endif; ?>
<?php
} else if(in_category('g')) {  //gというスラッグのカテゴリー
?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(9) ) : else : ?>
<?php endif; ?>
<?php
} else {
?>
<?php
}
?>

条件分岐例(カテゴリーが一つしかない場合のCTAウィジェット設定)

反対に、CTAを設定したいカテゴリーが一つしかない場合はこうなります。

<?php if(in_category('a')) { //aというスラッグのカテゴリー ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
<?php endif; ?>
<?php
} else {
?>
<?php
}
?>

管理しやすいようにファイルを分割する

カテゴリーが少なければ問題ありませんが、条件分岐が多くなると、コードが多くなってごちゃごちゃしてしまうので、ファイルを分割してみましょう。やり方は非常に簡単。

  1. ファイルを作成する
  2. 作成したファイルに条件分岐のコードを記載する
  3. そのファイルを読み込む

これだけです。今回は例として、「cta.php」というファイルを作成して、条件分岐のコードを記載してみました。

cta-3

 

そして、「single.php」に下記のコードを追加するだけ。

<?php get_template_part('cta'); //CTAウィジェット読み込み ?>

cta-4

POINT

もちろん、「cta.php」をサーバーにアップロードする必要があるので、「ファイルマネージャー」か「FTPクライアントソフト」で忘れずにアップロードしましょう!

スタイルシートを修正する

最後に、スタイルシートを修正して、ウィジェットに追加したリンクを「ボタン化」して終わりです。下記のコードをコピペしてください。

/*--------------------
 CTAボタン
--------------------*/
.cta {
    width: 90%;
    position: relative;
	background: #00acee;
	border-radius: 6px;
    border: #00acee;
    font-size: 18px;
	line-height: 1.6;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 5px 0 #0092ca;
    text-align: center;
    display: block;
    margin: 20px auto;
    padding: 10px;
}
.cta:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}
.cta a {
    color: #fff;
    display: block;
}

これで、▼こんな感じにリンクがボタン化します。色やフォントは自由に変更可能。

cta-5

  1. おすすめの美容室の記事を読んでもらう
  2. その美容室をホットペッパーを通して安く利用してもらう(←これがCTAの部分)

という流れを期待してCTAを設定してみました。美容室を紹介されて終わり…というのは、読んだ方にとっても困りますからね。

まとめ

コードを修正する必要はありますが、一度カスタマイズしておけば管理が楽になりますよ。ウィジェットを入れ替えるだけでリンク先を変えることができますからね。

  • どのリンクが一番効果が良いか比較したい
  • バナーリンクの効果が悪い気がする
  • 記事の最後にテキストリンクだけ貼るのもカッコ悪い
  • 一括でCTAを設定したい

なんて方におすすめのカスタマイズです!ぜひお試しあれ!

カテゴリー WordPressカスタマイズ

注目 【dマガジン】初回31日間無料で170誌以上の雑誌が読み放題!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

注目 「freee」と「MFクラウド確定申告」を比較!おすすめは!?

この記事が気に入ったらいいね!しよう

最新情報をお届けします

この記事を書いた人:シェフ

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

閉じる

CLOSE

アーカイブ

CLOSE