WordPressの問い合わせフォームをプラグインを使わずに自作してみた

2014-02-01_1803

WordPressの問合せフォームはプラグイン「Contact Form7」を使うのが定番中の定番です。無難です。しかし、あえてデフォルトで付いているコメントフォームをカスタマイズして問合せフォームにしたので、行った作業などをまとめました。

問合せフォームを作ろうと思った訳

@Enjiさんの記事の影響が大きいです。

[img-link url=”http://rentalhomepage.com/internet-trouble/” title=”インターネットのトラブル回避。訴えられる前にコンタクトフォームをつけよう！”]

問い合わせフォームは作っとくに越したことはないですよね。どう考えても。

Contact Form 7を使わず、コメントフォームを改造して問い合わせフォームにする理由

「WordPressで問い合わせフォームといえばContact form 7」と言っても過言ではありません。

しかし、以下の理由から、当サイトでは採用を見送り、デフォルトのコメントフォームを改造して問い合わせフォームにすることにしました。

Contact Form 7はオーバースペック

まず、当ブログのような零細個人ブログには、Contact Form 7は高機能すぎてオーバースペックに感じました。

@web_shufuとしては、相手方の情報で欲しいのは「名前」「メールアドレス」「問合せ内容」の３つだけ。

それであれば、デフォルトで付いてくるコメントフォームを改造すれば充分です。

高速化を妨げるかも?

Contact form 7に限らず、独自のjsやcssを使うプラグインの場合、プラグインを利用しているページに限らず、すべてのページでjsやcssがロードされてしまいます。

プラグインを使わないページにおけるjsやcssのローディングは、ページ表示スピードを遅くするだけ。何のメリットもありません。

とはいえ、普通ならそこまでこだわるべきポイントではないかもしれません。

しかし、私は「WordPress高速化日記」なる記事をいくらか書いています。（ただの体験記に過ぎませんが‥）

そのせいか、心の中のリトル@web_shufuが「そこはこだわれよ」とうるさいので、こだわることにしました。

過去の問合せ（コメント）を絶対に表示しないためのカスタマイズ

コメントフォームを問い合わせフォームに改造する為に最初にやったことは、過去の問合せ（コメント）を絶対に表示ないようにすることでした。

デフォルトのコメントフォームの仕様では、うっかり承認してしまったコメント（問い合わせ）はコメントフォームの上あたりに表示されてしまいます。

しかし、問合せフォームでは、過去の問合せ（コメント）を表示する必要はありません。‥と言うより過去の問合せを表示してはいけません。

そこでTwenty twelveのpage.phpで、コメント表示に関わる部分に注目してみました。

するとなんと以下の一行だけ。

<?php comments_template( '', true ); ?>

comments_template( ”, true )はcomments.phpを読み込んでいるので、Twenty twelveのcomments.phpを観察。

<div id="comments" class="comments-area">
    ・・・・・・・
    ・・・・・・・
    ・・・・・・・
    <?php comment_form(); ?>
</div><!-- #comments .comments-area -->

長々と続く「・・・・・・・」は過去の問合せ（コメント）を表示する部分です。

コメントフォームを表示する部分はこの一行のみ。

<?php comment_form(); ?>

したがって、問合せページに必要なのは<?php comments_template( '', true ); ?>で呼び出されるcomments.php全体ではなく、そのうちの

<div id="comments" class="comments-area">
    <?php comment_form(); ?>
</div>

だけとなります。

問合せページ専用テンプレートを作成

ここまで調べたことを基に、過去の問合せ（コメント）が絶対表示されないような、問合せページ専用のテンプレートを造ります。

造り方はとても簡単です。

page.phpの

<?php comments_template( '', true ); ?>

を

<div id="comments" class="comments-area">
    <?php comment_form(); ?>
</div>

に置き換えるだけです。その結果、問合せページ専用のテンプレートは以下のようになります。

<?php get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <div id="comments" class="comments-area">
                    <?php comment_form(); ?>
                </div>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

テンプレートの名前はpage-inquiry-blog.phpにして下さい。

タイトル「お問合せ」スラッグ「inquiry-blog」という固定ページを作成

さて、テンプレートを作っただけでは問合せページは表示されません。

問合せページ用テンプレートであるpage-inquiry-blog.phpは、inquiry-blogというスラッグを持つ固定ぺ－ジを作ってはじめて有効になります。

というわけで、タイトル「お問合せ」スラッグ「inquiry-blog」という固定ページを造ります。

本文は「当ブログ『web Shufu』へのお問合せは、お問合せフォームにて承っております。お手数ではございますが、お名前とメールアドレスを必ずご記入下さいますようお願い致します。入力された情報は公開されることはありません。」とでもしておきましょう。

承認したコメントも絶対に表示されません！！

さて、今作ったタイトル「お問合せ」スラッグ「inquiry-blog」という固定ページを公開して、ログアウトすると以下のような普通のコメント欄が出てきます。

2014-02-01_1731

しかし、デフォルトのコメント欄とは違い、幾らコメント（問合せ）を送信しても、絶対に公開されない仕様にはなっています。

試しにコメントをいくつか送信･承認して、絶対に公開されないことを確かめてください。

送信した内容が絶対に公開されなくなったので、お問合せフォームに一歩近づきました。

次はフォーム自体をお問合せっぽくカスタマイズします。

フォームを問合せっぽくカスタマイズ

次に<?php comment_form(); ?>をカスタマイズして、問合せフォームらしくしました。

テーマTwenty twelveではcomment_form();が次のようなコメントフォームを出力します。

2014-02-02_1352

これをそのまま問い合わせフォームとして使うのは厳しいですよね。

問合せフォームらしくするために次のように改造します。

「コメントを残す」を削除
「メールアドレスが～必須項目です」を削除
*を削除
ウェブサイト入力欄を廃止
「コメント」を「お問合せ内容」に変更
コメントフォームの後ろにある、使用できるHTMLについての注釈を削除
「コメントを送信」を「送信」に変更

コメントフォームをカスタマイズするにはcomment_form();について勉強する必要があります。

これについてはとても詳しくわかりやすい記事があったので参考にしました。

[img-link url=”http://www.nxworld.net/wordpress/wp-default-comment-form-customize.html” title=”WordPress：コメントフォームをカスタマイズする方法 | NxWorld”][img-link url=”http://www.nekotricolor.com/blog/2013/01/10/745/” title=”Wordpressのコメントフォーム（comment_form）をカスタマイズ | トリコロールな猫”]

comment_form();のカッコの中に引数を渡すことで色々カスタマイズできます。

問合せページ専用のテンプレートpage-inquiry-blog.phpを、以下のように作り変えると、思ったとおりに改造できました。

<?php get_header(); ?>

    <div id="primary" class="site-content">
        <div id="content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <?php
                $my_comment_fields =  array(
                    //<span class="font-red">*</span>を削除
                    'author' => '<p class="comment-form-author">' . '<label for="author">' . 'お名前'. '</label> ' . ( $req ? '' : '' ) .
                                '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
                    //<span class="font-red">*</span>を削除
                    'email'  => '<p class="comment-form-email"><label for="email">' . 'Email'. '</label> ' . ( $req ? '' : '' ) .
                                '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
                    //ウェブサイト入力欄を廃止            
                    'url'    => '',
                ); ?>
                <?php $my_comment_args = array(
                    'fields'               => apply_filters( 'comment_form_default_fields', $my_comment_fields ),
                    //「コメント」を「お問合せ内容」に変更
                    'comment_field'        => '<p class="comment-form-comment"><label for="comment">' .'お問い合わせ内容'. '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
                    //「メールアドレスが～必須項目です」を削除
                    'comment_notes_before' => '',
                    //コメントフォームの後ろにある、使用できるHTMLについての注釈を削除
                    'comment_notes_after'  => '',
                    //「コメントを残す」を削除
                    'title_reply'          => '',
                    //「コメントを送信」を「送信」に変更
                    'label_submit'         => '送信',
                );
                ?>
                <div id="comments" class="comments-area">
                    <?php comment_form($my_comment_args);  ?>
                </div><!-- #comments .comments-area -->

            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

$my_comment_fieldsや$my_comment_argsをcomment_form();に渡す引数として設定しています。

$my_comment_fieldsや$my_comment_argsに関する各記述の意味は、「//～」で説明しております。

問合せフォーム完成！！

タイトル「お問合せ」スラッグ「inquiry-blog」の固定ページを表示すると、ページの下の方に以下のようなお問合せフォームが現れます。

2014-02-02_1404

固定ページの記事本文部分を適当に設定すれば、こんな感じで表示することも出来ます。

2014-02-02_1408

ずいぶん問い合わせフォームっぽくなったと思います。個人的にはこれでも大満足です。

送信後、サンクスページにリダイレクトするためのカスタマイズ

問合せを受け取った時に、送信が完了してこちらが間違いなく問合せを受け取った旨の表示ををするようにカスタマイズしました。

送信完了ページは問い合わせページの子ぺージとしました

問い合わせページのURLは

（サイトドメイン）/inquiry-blog/

なので、送信完了ページのURLは

（サイトドメイン）/inquiry-blog/inquiry-blog-thanks/

として、問い合わせページの子ページとしました。

2014-02-04_1223

コメント送信後のリダイレクトを送信完了ページに設定

WordPressではコメントを送信するとリダイレクトされます。

例えば、「確定申告書の見直し･確認について」という税務署からの素敵なお手紙が到着｜ウェブシュフにコメントをつけると、

https://webshufu.com/a-letter-from-tax-office/#comment-(数字)

にリダイレクトされます。

このリダイレクト先を送信完了ページに変更すれば、問い合わせ送信後に送信完了ページにリダイレクトさせることが出来るわけです。簡単です。

リダイレクト先はwp-comments-post.phpの以下の部分で設定されています。

$location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;

/**
 * The location URI to send commenter after posting.
 *
 * @since unknown
 *
 * @param string $location The 'redirect_to' URI sent via $_POST.
 * @param object $comment  Comment object.
 */
$location = apply_filters( 'comment_post_redirect', $location, $comment );

wp_safe_redirect( $location );

最後の行でコメント（問い合わせ）送信後に$locationにリダイレクトされることが分かります。（参考：Function Reference/wp safe redirect ≪ WordPress Codex）

送信完了ページにリダイレクトするための関数

問い合わせページで送信ボタンが押されたときのみ

$location＝（サイトドメイン）/inquiry-blog/inquiry-blog-thanks/

となるようにユーザー定義関数を作って、フィルターフック ‘comment_post_redirect’ にフックします。

具体的には以下のようにfunction.phpに書き込みました。

function custom_comment_post_redirect( $location ) 
{
    if(strpos($location,'inquiry-blog')&&!strpos($location,'thanks'))
    {
    $redirect_to = get_bloginfo('url').'/inquiry-blog/inquiry-blog-thanks/';    
    }
    else
    {
    $redirect_to = $location;
    }
return $redirect_to;
}
add_filter( 'comment_post_redirect', 'custom_comment_post_redirect' );

ちゃんとリダイレクトされました＼(^o^)／

で、試しに、

（サイトドメイン）/inquiry-blog/

で問合せを適当に打ち込んで送信したら

（サイトドメイン）/inquiry-blog/inquiry-blog-thanks/

にリダイレクトされていました。

これで@web_shufuとしては満足な問い合わせフォームが出来ました。

こんなのが出来ました。

奮闘の結果出来上がったお問合せページがこちら。⇒お問合せ｜ウェブシュフ

投稿日

2014年10月21日

カテゴリー:

未分類

投稿者:

webshufu

　最終更新日:

2024年3月2日

タグ: