イメージ

2024/03/22 コンテンツ・メーカー2のバージョン3.0を公開しました。

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


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

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

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

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

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

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

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

テーマディレクトリ内に設置した場合に後述する手順5~7でパス(URL)がわからないという方は、ルートディレクトリ(最上位階層)にでも設置しておけばOKでしょう。
ルートディレクトリに設置すれば、そのフォルダのパス(URL)は以下のようになるのでわかりやすいかと思います。

https://ここにドメイン/設置したフォルダ/

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

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

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

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

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

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

メールフォームの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独自の機能による想定外のミスを避けるためです。

上記手順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">

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

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

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

<link rel="stylesheet" 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()関数などを使って分岐させるとベターでしょう。

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

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

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

<script 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()関数などを使って分岐させるとベターでしょう。

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

RewriteEngine Off

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

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

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

提供サポートなど