どや!?共有SSLでWordPressプラグインContact Form 7を使う方法

06 12月

  • このエントリーをはてなブックマークに追加

今回共有SSLを使用したお問い合わせを作成することになりました。お問い合わせフォームはいつもお世話になっているContact Form 7を使用しましたが、以前出来たやり方では上手く動作しなかったので、改めて利用できる方法をご紹介します。

はじめに

今回自分が行った動作環境はこちらです。

  • WordPress バージョン 3.1.3
  • Contact Form 7 バージョン 2.4.5
  • レンタルサーバー「heteml」
  • ドメインは独自ドメイン(SSLだけ共有SSL)

レンタルサーバーはhetemlを利用しましたので、今回はhetemlの共有SSLを使用した方法になります。
hetemlの共有SSLについて

※1 今回の方法は特にプラグインなどを利用した方法ではないので、 他のレンタルサーバーでも動作は問題無いと思います。
※2 今回の説明ですが、Contact Form 7の作成方法はサラっと流しでご紹介しています。

目次

  1. お問い合わせフォームのページを作成
  2. Contact Form 7 のインストール、モロモロの設定
  3. お問い合わせフォームのページをSSLに対応させる
  4. page.phpを複製しpage-29.phpを作成
  5. 複製したpage-29.phpを編集する
  6. 表示の確認
  7. Contact Form 7で自動的に吐き出しているソースを削除する
  8. もう一度表示の確認
  9. 最後に動作確認をする
  10. まとめ

①お問い合わせフォームのページを作成

WordPressにてページを新規作成します。
この時新規作成したページのpage_idをメモして下さい。

■page_id確認方法

page_id確認方法

今回共有SSLに対応するpage_idは29で説明していきます。

②Contact Form 7 のインストール、モロモロの設定

こちらからプラグインをダウンロードして下さい。

ダウンロード

通常通り、プラグインを有効化しメニューに現れた、お問い合わせ>編集 をクリックし編集画面で好きなようにフォームを作成して下さい。
※こちらの作成方法はこちらが参考になります。
WordPressプラグインContact Form 7のメールフォームのデザインカスタマイズ

Contact Form 7

作成できましたら、①で作ったページにショートコードを貼りつけてフォームは完成です。

③お問い合わせフォームのページをSSLに対応させる

作成したお問い合わせページを早速SSLに対応させていきましょう。こちらの作業が若干面倒ですが、面倒なぶん確実なのではないでしょうか。もっと効率よくする方法があるかもですが、ご了承下さい。

1)page.phpを複製しpage-29.phpを作成

テンプレートファイルのpage.phpを複製します。FTPでpage.phpをローカルにダウンロードし、名前をpage-29.phpに変更します。
数字の部分が①で確認した数字になります。

2)複製したpage-29.phpを編集する

ここで編集する箇所は【<?php get_header(); ?>】【<?php get_sidebar(); ?>】【<?php get_footer(); ?>】で呼び出しているcssやjsやimgの読み込みを全て、共有SSLのアドレスに変更することです。
SSLを設定するページは全てhttpsを使用したパスで指定しないとエラーが表示されます。

はheader.phpを呼び出している部分ですので、を削除して削除した箇所にheader.phpのソースをコピーします。同じ様にsidebar.php、footer.phpをpage-29.phpにコピーします。

cssやjsやimgパスを共有SSL付きのhttps://からの絶対パスに書き換え

cssやjsやimgパスを共有SSL付きのhttps://からの絶対パスに書き換えます。書き換えが完了したらpage-29.phpをpage.phpと同じ階層にアップロードします。

3)表示の確認

ここの時点で一度表示の確認をしてみます。
表示の確認

※文字化けした際は、保存する際エンコードがUTF-8になっているか確認して下さい。

鍵のマークが現れれば成功。現れずに警告メッセージがでたら、どこかにまだhttp://が残っている証拠なので、探し出してhttps://に変更します。

4)Contact Form 7で自動的に吐き出しているソースを削除する

一度表示の確認をしますが、鍵のマークは表示されません。
理由としてContact Form 7は自動的にcssやjsを吐き出している記述が存在するからです。

wp-config.phpを開き、
/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */
よりも前に、下記コードを加える。

define ('WPCF7_LOAD_JS', false); // Added to disable JS loading
define ('WPCF7_LOAD_CSS', false); // Added to disable CSS loading

これにより、他のページにContact Form 7用のcssやjsが読み込まれなくなります。
この記述をかくとお問い合わせフォームのページも読み込まれなくなるので、Contact Form 7で必要になる記述を手動で記述します。

■header

<link rel='stylesheet' id='contact-form-7-css'  href='https://doya.heteml.jp/wp-content/plugins/contact-form-7/styles.css?ver=2.4.5' type='text/css' media='all' />	

■footer

<script type='text/javascript' src='https://doya.heteml.jp/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52'></script>
<script type='text/javascript' src='https://doya.heteml.jp/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.5'></script>

5)もう一度表示の確認

ここまでの作業で実際に画面を見ると共有SSLに対応したお問い合わせフォームになると思います。
鍵のマークが出ない場合は何処かにhttp://が残っているので修正していきましょう。

6)最後に動作確認をする

実際に動作確認をしていきましょう。
特に問題なくメールが届けば完了になります。

まとめ

共有SSLについては色々な記事がありますが、プラウグインで行う方法が簡単みたいでした。

さくらインターネットでAdmin SSLが使えない
備忘録 Contact form 7 + WordPress HTTPS プラグインで共用SSL使用可に

WordPressのバージョンや、サーバー環境では上手くいかない場合が多いようです。
今回の方法は特にその辺は関係ない部分になるので、困ったとき試して見て頂ければと思います。

コメント

  1. たく より:

    こんな記事にコメントするのも何なんですが、共有SSLは危ないらしいですよ。

トラックバック

  1. […] どや!?共有SSLでWordPressプラグインContact Form 7を使う方法 photo by: Nicole Lee このページをシェア :共有FacebookRedditTwitterメールアドレスDiggStumbleUpon […]


  2. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users156/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1711

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users156/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1711

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL