通常版のメールフォームをWordPressサイトに設置する手順を解説


このサイトで公開しているメールフォームは通常版WordPressプラグイン版があります。

プラグイン版はバージョンが古いままアップデートをさせていないので、これを書いている2017年現在となっては、WordPressサイトに対しても通常版を使用するほうがベターだと思います。

また、プラグイン版はWordPress管理下で動作するため、WordPress本体の文字コード設定や時刻設定などの影響を受ける場合があり、そのような不具合が発生する場合に通常版を使用すると解決するかもしれません。

レスポンシブ・メールフォーム通常版はJavaScriptファイルやPHPファイルを極力カプセル化させているので、他のプログラムファイルとの競合は起きにくくできています。

というわけで、私自身も自分のWordPressサイトには通常版を設置しますし、クライアントにも通常版をおすすめしています。
その設置方法をこのページでは解説します。

1、メールフォームをアップロードする

メールフォームのファイルをすべて、サーバ上のどこかにアップロードする。
設置する場所はテーマディレクトリ内などが良いのではないでしょうか。

「mailform」みたいな適当な名前のフォルダを作っておき、その中にcssフォルダやjsフォルダ、phpフォルダなど、初期状態のままアップロードしておけばOKです。

2、お問い合わせページとサンクスページを用意する

WordPress管理画面から、お問い合わせページとサンクスページを生成しておく。(固定ページや投稿ページなどで)

3、config.phpにサンクスページのURLを設定しておく

上記2で用意したサンクスページのURLを、config.phpに設定しておく。
WordPressの場合、URLの相対指定がわかりにくいため、httpからの絶対URLにしておくと間違いがないでしょう。

//(必須) サンクスページのURL -- index.htmlからの相対パス、またはhttp://からの絶対パス --
$rm_thanks_page_url = 'ここに記述';

4、form要素をお問い合わせページにコピーする

メールフォームのindex.html内のform要素をすべてコピーし、上記手順2で用意したお問い合わせページに貼り付ける。
WordPress管理画面の編集ページで貼り付けてもOKですし、テーマテンプレート内に直接貼り付けてもOKです。

5、form要素のaction属性値を変更する

上記手順3で貼り付けたform要素にあるaction部分を、メールフォーム本体を設置した場所に合わせて変更する。

<form action="ここを変更" method="post" id="mail_form">

6、CSSファイルを読み込ませる

メールフォームのindex.html内のhead要素内にあるCSSファイルの読み込みコードを、WordPressのテーマテンプレートのheader.php内に貼り付ける。

メールフォームを設置するページから、mailform.cssなどのCSSファイルが読み込めればそれでOKなので、header.phpのどこかにコピーしてください。

以下のようにWordPressのテンプレートタグを使えば、お使いのテーマのディレクトリまでのURLを自動で出力してくれます。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/mailform/css/mailform.css" />

上級者であれば上記の読み込みコードをheader.phpに直接記述しなくても、function.phpにwp_enqueue_style()関数を使用することで、wp_head()部分に出力することができるでしょう。

また、例えばメールフォームを設置しているのがお問い合わせページだけの場合など、特定のページにだけ上記CSSファイルを読み込ませたい場合は、is_page()関数is_single()関数などを使って分岐させてください。

7、JavaScriptファイルを読み込ませる

メールフォームのindex.html内のbody要素の最下部にあるJavaScirptファイルの読み込みコードを、WordPressのテーマテンプレートのfooter.php内に貼り付ける。

メールフォームを設置するページから、mailform-js.phpなどのJavaScirptファイルが読み込めればそれでOKなので、footer.phpのどこかにコピーしてください。
このメールフォームはjQueryを必要としますので、body要素の最下部がベストでしょう。

これも以下のようにWordPressのテンプレートタグを使えば、お使いのテーマのディレクトリまでのURLを自動で出力してくれます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/mailform/js/mailform-js.php">

上級者であれば上記の読み込みコードをfooter.phpに直接記述しなくても、function.phpにwp_enqueue_script()関数を使用することで、wp_footer()部分に出力することができるでしょう。

また、例えばメールフォームを設置しているのがお問い合わせページだけの場合など、特定のページにだけ上記JavaScirptファイルを読み込ませたい場合は、is_page()関数is_single()関数などを使って分岐させてください。

8、WordPressによるURLリライトを無効化する

【重要かも】
mailformフォルダの中に以下の内容の.htaccessファイルを設置しておくと、そのフォルダ内ではWordPressによるURLリライトの影響が無効化されるので、より確実な動作が期待できます。

RewriteEngine Off

9、送信テストをしてみて完了

設置作業は以上です。
自分でフォーム入力・送信をして、正常に動作するかをご確認ください。

フォーム領域の横幅など、見た目のデザインに関するものはすべてmailform.cssで定義されていますので、そちらを編集して既存サイトに合わせてください。

サポートBBS

サイト内を検索
サイト運用事例
提供サービス
メールフォーム

ダウンロード一覧へ

アンケートフォーム

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+