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


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

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

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

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

というわけで、私自身も自分のWordPressサイトには通常版を設置しますし、クライアントにも通常版をおすすめしています。
もちろんこのサイトのお問い合わせページのメールフォームは通常版です。
(このサイトはWordPressサイトです)

その設置方法をこのページでは解説します。

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

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

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

index.htmlとthanks.htmlはアップロードしなくても構いません。
この2つのページは固定ページや投稿ページで代用します。(以下を参照)

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

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

後でこれらのページにindex.htmlやthanks.htmlの内容をコピーしますので、現時点では何も内容の無いページのまま生成しておけばOKです。

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です。

WordPress管理画面の編集画面で貼り付ける場合は、ビジュアルエディタではなくテキストエディタに切り替えてから貼り付けましょう。

【注意点】
ソースを貼り付けた後もビジュアルエディタに切り替えたりしないほうが無難です。
なぜなら、ビジュアルエディタに切り替えた際にWordPressの機能によってspan要素が勝手に削除されたり、p要素が勝手に挿入されてしまうからです。
HTMLがおかしくなることによってメールフォームプログラムの動作エラーが発生する場合があります。

【中級者以上のやり方】
上記のような理由から、私ならFTPソフトを介してテンプレートファイルにform要素を直接記述します。

メールフォームを設置するページが固定ページならpage.php、投稿ページならsingle.phpなど、ページの種類によってどのテンプレートファイルが優先して適用されるかはルールがあります。
以下のページにわかりやすい図がありますので、参考にどうぞ。
テンプレート階層 – WordPress Codex 日本語版
テンプレートの優先順位を示した画像

補足解説:今回のような作業に限らずWordPressサイトを0から構築する場合などでも、中級者以上の方ならWordPress管理画面上で行う作業はほとんどありません。
WordPress本体のインストールからカスタマイズまで、すべてFTPソフトを介して直接作業をするでしょう。

それはなぜかと言うと、上記のようなWordPress独自の機能による想定外のミスを避けるためです。

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

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

<form action="ここを変更/php/mailform.php" method="post" id="mail_form">

この部分もhttpからの絶対URLで書くと間違いないですが、テンプレートファイル内にform要素を直接書くのであれば、以下のようにWordPressのテンプレートタグを使えば、お使いのテーマのディレクトリまでのURLを自動で出力してくれます。

<form action="<?php echo get_template_directory_uri(); ?>/mailform/php/mailform.php" 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" />

すべてのページではなく、特定のページでのみ読み込ませたい場合のやり方は「WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法」を参考にしてください。

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

具体的なコードとしては以下のような感じでしょうか。
この手法を使えば、テンプレートファイルに直接書かずとも、すべてのページのCSS読み込みコードをfunction.phpで一元管理できます。

function mailform_style() {
  wp_enqueue_style( 'mailform-css', get_template_directory_uri().'/mailform/css/mailform.css' );
}
add_action( 'wp_enqueue_scripts', 'mailform_style' );

また、例えばメールフォームを設置しているのがお問い合わせページだけの場合など、特定のページにだけ上記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"></script>

すべてのページではなく、特定のページでのみ読み込ませたい場合のやり方は「WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法」を参考にしてください。

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

具体的なコードとしては以下のような感じでしょうか。
この手法を使えば、テンプレートファイルに直接書かずとも、すべてのページのJavaScriptの読み込みコードをfunction.phpで一元管理できます。

function mailform_script() {
  wp_enqueue_script( 'mailform-js', get_template_directory_uri().'/mailform/js/mailform-js.php', array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'mailform_script' );

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

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

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

RewriteEngine Off

このファイルがなくても正常動作するようですが、私は念のために設置しています。

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

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

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

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

レスポンシブBBS

ダウンロード一覧へ

スレッド式BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

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