• このエントリーをはてなブックマークに追加

メルマガ登録フォーム設置方法

どうも。葉です。

情報発信を始めた時にやることは、
メルマガの読者さんを集めることです。

そこで、ブログにメルマガ登録フォームを設置してメルマガ読者さんを集めよう!
と思い立ったのですが、

『意外とメルマガ登録フォームをブログに設置するのが難しい!』
なんて思いはしていませんか?

この記事では、そんな悩みを解決するために、
賢威7.0のトップページや記事下にメルマガ登録フォームを作成する方法
を解説していきますよ。

なお、賢威6.2でメルマガ登録フォームを作成する方法は、こちらの記事で解説しています。

1.メルマガ登録フォームを設置した時の表示

まずは、メルマガ登録フォームを設置した場合にどのような画面になるのかを見てみましょう。

トップページにメルマガ登録フォーム設置時の表示

賢威7.0トップページにメルマガ登録フォーム

記事下にメルマガ登録フォーム設置時の表示

賢威7.0記事下にメルマガ登録フォーム

これで、ブログのトップページや記事下に
メルマガ登録フォームを設置した時のイメージができたと思います。

ここからは、実際の作業を解説していきます。

2.賢威7.0のトップページや記事下にメルマガ登録フォームを設置する手順

2-1.メルマガ登録フォームのコードを作成

まずは、WordPressの機能を使って、
メルマガ登録フォームのコードを作成します。

phpやCSSなどの知識がなくても
簡単にできる安心して取り組んでくださいね。

 
まず、WordPress管理画面より、『共通コンテンツ一覧→新規追加』をクリックします。

賢威7.0メルマガ登録フォーム作成1

次に、適当にタイトルを付けて、メルマガ登録フォームを作成していきます。

登録フォームを目立たせるための画像を入れてみました。
画像の作り方がわからない人は、文字でも大丈夫です。

賢威7.0メルマガ登録フォーム作成2

    

次に、メール配信スタンドより、登録フォームのコードを取得します。

※メルマガ登録フォームのコード取得方法は、メール配信スタンドごとに異なるので、
使用しているメール配信スタンドごとに方法を調べてください。

僕は、メール配信スタンドにマイスピーを使用しているので、
今回は、マイスピーのメルマガ登録フォームコードの取得方法を解説します。

マイスピーにログインし、『メルマガ一覧』をクリックします、。

賢威7.0メルマガ登録フォーム作成3

次に、任意のシナリオを選択します。

賢威7.0メルマガ登録フォーム作成4

『登録フォームタグの発行(HTML)』をクリックします。

賢威7.0メルマガ登録フォーム作成5

表示されたコードをコピーします。

賢威7.0メルマガ登録フォーム作成6

これで、メルマガ登録フォームのコード取得は完了です。

次に、WordPressの共通コンテンツ画面に戻り、『テキスト』をクリック、
先ほど、コピーしたコードをメルマガ登録フォームを表示させたい場所に貼り付けてください。

賢威7.0メルマガ登録フォーム作成7

ここで、『ビジュアル』をクリックすると、
メルマガ登録フォームがどのように表示されているか確認できます。
※プレビューをクリックするとより正確なメルマガ登録フォームの表示を確認できます。

賢威7.0メルマガ登録フォーム作成8

メルマガ登録フォームを後で編集できるように、
『保存する』をクリックしておきましょう。

賢威7.0メルマガ登録フォーム作成9

以上で、メルマガ登録フォームの作成は完了です。

2-2.メルマガ登録フォームコードのコピー:
(トップページ、記事下共通作業)

ここからは、作成したメルマガ登録フォームを
賢威7.0のトップページや記事下に設置していきます。

まずは、先ほど作成したメルマガ登録フォームのコードをコピーします。

『テクスト』をクリックし、
表示されたコードすべてをコピーしてください。

賢威7.0メルマガ登録フォーム作成10

そのまま、WordPressのサイドバーより『外観→テーマの編集』をクリックします。

賢威7.0メルマガ登録フォーム作成11

これで、メルマガ登録フォームを設置する準備が完了しました。

以下より、メルマガ登録フォームをトップページ記事下に設置していきます。

※記事下のみメルマガ登録フォームを設置したい人は、
『2-4.記事下にメルマガ登録フォームを設置』へ飛んでください。

2-3.トップページ上部にメルマガ登録フォームを設置する場合

では、ブログのトップページにメルマガ登録フォームを設置する方法を
解説していきます。

ます、『メインインデックスのテンプレート(index.php)』をクリックしてください。

賢威7.0トップページにメルマガ登録フォーム設置1

次に、『Ctrl+F』で

<!–▼メインコンテンツ–>
< main>
< div class="main-conts">

と記述されている場所を探します。
そして、その下に先ほどコピーしたメルマガ登録フォームのコードを貼り付けます。

賢威7.0トップページにメルマガ登録フォーム設置2

『ファイルを更新』をクリックします。

賢威7.0トップページにメルマガ登録フォーム設置3

この状態で、ブログのトップページを見ると
メルマガ登録フォームがあるはずです。

なお、下図のようにメルマガ登録フォームを枠で囲みたい場合は、

賢威7.0トップページにメルマガ登録フォーム2

次のようにメルマガ登録フォームコードを囲んでください。

<article class="section-wrap">
メルマガ登録フォームのコード
</article>

以上で、トップページ上部にメルマガ登録フォームを
設置する方法の解説は、終わります。

2-4.記事下にメルマガ登録フォームを設置

次に、記事下にメルマガ登録フォームを設置する方法を解説します。

まず、個別投稿(sngle.php)をクリックします。

賢威7.0記事下にメルマガ登録フォーム設置1

次に、『Ctrl+F』で

<?php if (the_keni(‘social_post_view’) == "y") get_template_part(‘social-button2’); ?>

と記述されている場所を探してください。

※上のコードが見つからない人は、次のコードを探してください。

</div><!–article-body—>

そのコードの下に、そして先ほどコピーしたメルマガ登録フォームのコードを貼り付けます。

賢威7.0記事下にメルマガ登録フォーム設置2

『ファイルを更新』をクリックします。

賢威7.0記事下にメルマガ登録フォーム設置3

この状態で、投稿した記事を確認してみると、
記事下にメルマガ登録フォームが設置されているはずです。

3.メルマガ登録フォームの編集を便利に行う方法(応用)

メルマガ登録フォーム一括編集

では、ここからは、メルマガ登録フォームをより便利に編集する方法を紹介します。
この方法を行うことで次のようなメリットが有ります。

  • 複数箇所にメルマガ登録フォームを設置した場合
    1度の編集作業ですべてのメルマガ登録フォームを変更できる
  • コードが綺麗で見やすくなる
  • メルマガ登録フォームのコード編集時間短縮

では、以下より手順を紹介していきますね。
※テンプレートは賢威を使っていることとします。

まずは、メモ帳にて新規テキストファイルを作成してください。

メルマガ登録フォーム編集応用1

次にファイル名を変更し、txtファイルをphpファイルに変更します。
このとき、ファイル名は英語にしてくださいね。

今回は、メルマガ登録フォームであることがすぐに分かるように
『my_mail_form.php』という名前にしました。

メルマガ登録フォーム編集応用2

次に、FFFTPというソフトを使って、『my_mail_form.php』を
サーバ上にアップロードしていきます。

FFFTPを開き、次のディレクトリに移動してください。

サイトドメイン/public_html/wp-content/themes/使用中のテンプレートファイル/

そうしたら、先ほど作成したファイルをドラッグ&ドロップでアップロードします。

メルマガ登録フォーム編集応用3

次にWordPressに戻り、『外観→テーマ編集』をクリックすると、
右側に、先ほど作成した『my_mail_form.php』があるはずです。
それをクリックしてください。

メルマガ登録フォーム編集応用4

そうしたら、『my_mail_form.php』に作成したメルマガ登録フォームのコードを貼り付け
『ファイルを更新』をクリックします。

メルマガ登録フォーム編集応用5

次に、メルマガ登録フォームを設置したい場所に次のコードを貼り付けます。

<?php get_template_part(‘ファイル名‘); ?>
※ファイル名に、『.php』は不要。

今回の場合は、ファイル名が『my_mail_form.php』なので
次のコードを貼り付けます。

<?php get_template_part(‘my_mail_form‘); ?>

実際に、このコードを使ってトップページ上部と記事下に
メルマガ登録フォームを設置します。

ブログトップにメルマガ登録フォームを設置

メインインデックスのテンプレート (index.php)に移動後、
メルマガ登録フォームを設置したい場所に
下のコードをを貼り付け『ファイルを更新』をクリックします。

<?php get_template_part(‘my_mail_form’); ?>

  

メルマガ登録フォーム編集応用6

この状態でトップページを確認してみてください。
メルマガ登録フォームが設置されているはずです。

記事下にメルマガ登録フォームを設置

個別投稿(index.php)に移動後します。

メルマガ登録フォーム編集応用7

メルマガ登録フォームを設置したい場所に
下のコードをを貼り付け『ファイルを更新』をクリックします。

<?php get_template_part(‘my_mail_form’); ?>

メルマガ登録フォーム編集応用8

この状態で記事下を確認してみてください。
メルマガ登録フォームが設置されているはずです。

そして、このようにしておけば、
メルマガ登録フォームを変更したくなった時に、
『my_mail_form.php』を編集するだけで
すべてのメルマガ登録フォームを修正できます。

4.まとめ

賢威7.0にメルマガ登録フォームを設置する方法を丁寧に解説しました。
やり方さえマスターしてしまえば、賢威以外のテンプレートを使っていたり、
マイスピー以外のメール配信スタンドを使っていても
問題なくメルマガ登録フォームを設置できるはずです。

ただ、わかっているとは思いますが、本当に大変なのは、ここから

  1. ブログに多くのアクセスを集めること。
  2. ブログを読んでくれた人にしっかりと価値を感じてもらい、
    メルマガ読者さんになってもらうことです

メルマガ登録フォームを設置するだけでなく、
【しっかりと価値あるコンテンツを届ける】
ことを意識しましょうね。

 

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

最新情報をお届けします

賢威カスタマイズ