こんにちは。ママレボリューション 高橋由奈です。

今回はメルマガ登録フォームをWordPress テンプレートである『賢威 7.0』の
トップページや記事下に追加する方法
についてご説明致します。

以下の手順の通りに実施することであなたのメルマガ読者さんを
WordPressブログで効率的に集めることが出来るようになります
ので
是非挑戦してみてくださいね。

【完成イメージ】賢威7.0+メルマガ登録フォーム

先に完成した時のイメージ(ゴール)を確認しておきましょう。

  1. トップページ上部にメルマガ登録フォームを設置した例
  2. keni7.0-mailmagazine-top

  3. 記事下にメルマガ登録フォームを設置した例
  4. keni7.0-mailmagazine-kijishita

手順どおりに実施いただけばこのようにメールマガジン登録フォームを設置できますよ。
それでは一緒にやっていきましょう。

メルマガ登録フォームのコード生成

まず最初にメルマガ登録フォームを表示させるHTMLコードを
あなたが使っているメルマガ配信スタンドで作ります。

今回は私がメルマガ配信スタンドとして使っている
MyASP(マイスピ-)を例にご説明しますね。

※メルマガ登録フォームのHTMLコード取得方法は、
メール配信スタンドごとに異なるので、
使用しているメール配信スタンドのマニュアルサイトや
カスタマーサポートで調べてみてください。

メルマガ登録フォームHTMLコード作成手順@MyASP(マイスピ-)

  1. マイスピーにログインし、『メルマガ一覧』をクリックします。
  2. メルマガシナリオを選択します。
  3. 『登録フォームタグの発行(HTML)』をクリックします。
  4. 表示されたコードを全てコピーします。
  5. 表示されたコードをコピーします。

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

WordPress上でメルマガ登録フォームを完成させる

WordPressの機能を用いて必要なHTMLコードを完成させます。

  • WordPressにログインし、『共通コンテンツ一覧→新規追加』をクリックします。
  • 記事タイトルはメルマガ登録フォームなど自由に入力して下さい。
  • 必要に応じて『メディアを追加』からメルマガ登録を促進する画像を配置して下さい。
  • 先ほどコピーしたメルマガフォームのHTMLコードを貼り付けて下さい。
  • 『変更をプレビュー』をクリックし、出来上がりを確認します。
  • 問題なければ『保存する』をクリックして下さい。
  • なお登録フォーム全体を枠で囲って表示したい場合には以下のタグで今作成したHTMLを囲んで下さい。
  • < article class="section-wrap">
    先ほど作成したメルマガ登録フォームHTMLコード
    < /article >

    トップページにメルマガ登録フォームを設置する

    それではトップページの中央記事上部にメルマガ登録フォームを設置しましょう。

  • まず先ほど完成させたメルマガ登録フォームのHTMLコードを全てコピーします。
  • 次にWordPressのサイドバーから『外観→テーマの編集』をクリックします。
  • 『メインインデックス(index.php)』をクリックしてください。
  • 『Ctrl+F』で< !–▼メインコンテンツ–> < main> < div class="main-conts"> という箇所を探します。
  • < !–▼メインコンテンツ–> < main> < div class="main-conts">の下に先ほど作成したメルマガ登録フォームHTMLコードを貼り付けます。
  • 『ファイルを更新』をクリックします。
  • 以上が完了した段階でブログのトップページを確認すると
    完成イメージのようなメルマガ登録フォームが挿入されたトップページになっていると思います。

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

    続いて個別の記事下にメルマガ登録フォームを表示させる設定をします。

  • まず先ほど完成させたメルマガ登録フォームのHTMLコードを全てコピーします。
  • 次にWordPressのサイドバーから『外観→テーマの編集』をクリックします。
  • 『個別投稿(single.php)』をクリックしてください。
  • 『Ctrl+F』で< /div>< !–article-body—> という箇所を探します。