インターネットマーケティングをする上で、リストビルディング=メルマガ読者さん集めは非常に重要なステップになる。したがって、ブログを読んでくださった方にメルマガ登録をしてもらうための導線作りは大切な作業になる。

メルマガ登録を促すには記事下にCTA（Call To Action=行動してもらう誘い）を置くことが重要なのだが、WordPressのデザインをいじれない人はとても多いと思う。かくいう私も、HTML、CSS、PHPなどは詳しくない。

私のようにデザインは詳しくないが、適切なメルマガ登録フォームを記事下に配置したい人のために、メルマガ登録フォームの埋め方を解説する。

１．single.phpを編集する

メルマガ登録フォームを埋め込む post-meruamga-form2

ダッシュボード>外観>テーマ編集>単一記事の投稿（single.php）にアクセス。すると下図のような画面になるはずだ（私はXeoryBaseという無料テンプレートを使っている。テンプレによってsingle.phpの記述は異なる。）

記事下にメルマガ登録フォームを埋め込む方法

このソースを実際の記事ページと照らしあわせて見てみると、なんとなくどこに何が書かれているか分かる。

これがsingle.phpの部分

記事下にメルマガ登録フォームをHTML形式で埋め込む

これが実際の記事下の部分

Xeoryでのsingle.php記事下

なんとなく対応が分かるだろうか？そしてメルマガ登録フォームはなるべく記事の真下に配置したい。細かいコトは抜きにして、私がブログで設置しているソースをどこに書いているか見せたいと思う。

下記の記述をsingle.phpから見つけて欲しい。XeoryBaseなら51〜59行目くらいに記載されているはずだ（バージョンによって違う場合も有り）。赤字の部分に登録フォームのHTMLを埋め込もう。

　<ul class=”post-footer-list”>
　　<li class=”cat”><i class=”fa fa-folder”></i> <?php the_category(‘, ‘);?></li>
　　<?php
　　$posttags = get_the_tags();
　　if($posttags){ ?>
　　<li class=”tag”><i class=”fa fa-tag”></i> <?php the_tags(”);?></li>
　　<?php } ?>
　</ul>
</footer>
←この部分！！！→
<?php echo bzb_get_cta($post->ID); ?>

<div class=”post-share”>

２．JCityの登録フォームの場合

私のブログの登録フォームは下記のようになっている。

JCity登録フォームをWordPress記事に直接埋め込む

JCityのメルマガ画面からHTMLタグを取得する

メールマガジン管理画面にアクセスして、「【登録方法1】メルマガ登録フォームを利用する（HTMLソースコード）」を押そう。

JCityで登録フォームをHTMLタグを使ってブログに直接埋め込む

ソースコード作成の詳細設定枠を下図のように設定しよう。

JCityでHTMLタグでフォームを埋め込む
  • 確認画面のある・なし：確認画面を出さない設定にした方が登録率は上がる。
  • 登録フォームの文字コード設定：UTF-8にしないと文字化けしてしまうのできちんと設定しよう。

最後に「再作成」ボタンを押すと改めてソースコードが出るので、下図のコードをコピーしてsingle.phpに貼り付けよう。

JCity

実際に貼ってみるとこうなる

JCity登録フォームを記事に直接埋め込む

デザインは不格好だが、とりあえず埋め込むことが出来た。他のメルマガスタンドでも要領は同じなのでぜひ試してみて欲しい。

私の登録フォームのソースコード

私のブログの記事下はこのようになっている。これはCSSなどを編集してデザインを整えたのだ。JCityの登録フォームタグをベースに考えているので、他のメルマガスタンドでは同じように行くかは分からないが、参考までにソースコードをシェアしておく。

post-meruamga-form6

single.phpを編集

single.phpに下記のようなソースを埋め込んでいる。

<ul class=”post-footer-list”>
<li class=”cat”><i class=”fa fa-folder”></i> <?php the_category(‘, ‘);?></li>
<?php
$posttags = get_the_tags();
if($posttags){ ?>
<li class=”tag”><i class=”fa fa-tag”></i> <?php the_tags(”);?></li>
<?php } ?>
</ul>
</footer>

<!– CTA BLOCK –>
<div class=”post-cta”>
<h4 class=”cta-post-title”>よなたん公式メールマガジン無料登録</h4>
<div class=”post-cta-inner”>
<div class=”cta-post-content clearfix”>

<div class=”post-cta-cont”>
<p>与那嶺のライフワークである「コーチング」「ビジネス」その他思いついた事を不定期でお送りする公式メールマガジンです。受験が終わって大学生になった人にも読んで欲しい内容となっています。<br>
<ul>
<li>自分に自信が持てない。</li>
<li>大学に入ったが、自分が思ったような大学生活ではなくて困惑している。</li>
<li>人間関係に深い悩みがある。</li>
<li>気付いたら自分を責めてしまっている。</li>
</ul><br>
あなたの現状を打破するヒントがあるかもしれません。登録は完全無料です。</p>

<div class=”mm”
>
<form name=”form_106″ action=”https://asp.jcity.co.jp/FORM/?ac=31977S1802S17S68?userid=tshiki&formid=106 &action=proc&ie=UTF-8″ method=”post”>
<table>
<tr>
<td>お名前</td>
<td> <input type=”text” name=”scustname” value=”” size=”60″> </td>
</tr>
<tr>
<td>メールアドレス</td>
<td> <input type=”text” name=”semail” value=”” size=”60″> <input type=”hidden” name=”mm_app” value=”1″> </td>
</tr>
<tr>
<td colspan=”2″ align=”center”><input type=”submit” value=”登録する”></td>
</tr>
</table>
</form>

</div>
<!– front-mm –>
</div>

</div>
</div>
</div>
<!– END OF CTA BLOCK –>

<div class=”post-share”>

このようにsingle.phpに登録フォームのHTMLタグを挿入すれば良い。

style.cssにソースを追加

次にCSSだ。style.cssのページ最下部に下記のコードを追加している。

/*————————-

追加修正情報

————————*/
body.home.color02 #front-contact {
padding-bottom: 20px;
}

form {
padding-left: 20px;
padding-right: 20px;
}

form input[type=”text”] {
/* max-width: 96%; を消去修正　70行目 */
width: 93%;
}

/*–491,495行のボーダーを消去(コメントアウトをはずす) –*/
td {
display:block;
}

form {
padding-left: 20px; /*修正*/
padding-right: 20px;/*修正*/
}

これでおおよその体裁が整うと思う。上手くいかない場合はコメントで教えて欲しい。