今回共有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の作成方法はサラっと流しでご紹介しています。
目次
- お問い合わせフォームのページを作成
- Contact Form 7 のインストール、モロモロの設定
- お問い合わせフォームのページをSSLに対応させる
- page.phpを複製しpage-29.phpを作成
- 複製したpage-29.phpを編集する
- 表示の確認
- Contact Form 7で自動的に吐き出しているソースを削除する
- もう一度表示の確認
- 最後に動作確認をする
- まとめ
①お問い合わせフォームのページを作成
WordPressにてページを新規作成します。
この時新規作成したページのpage_idをメモして下さい。
■page_id確認方法
今回共有SSLに対応するpage_idは29で説明していきます。
②Contact Form 7 のインストール、モロモロの設定
こちらからプラグインをダウンロードして下さい。
通常通り、プラグインを有効化しメニューに現れた、お問い合わせ＞編集 をクリックし編集画面で好きなようにフォームを作成して下さい。
※こちらの作成方法はこちらが参考になります。
WordPressプラグイン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://からの絶対パスに書き換えます。書き換えが完了したらpage-29.phpをpage.phpと同じ階層にアップロードします。
3）表示の確認
ここの時点で一度表示の確認をしてみます。
※文字化けした際は、保存する際エンコードがUTF-８になっているか確認して下さい。
鍵のマークが現れれば成功。現れずに警告メッセージがでたら、どこかにまだ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のバージョンや、サーバー環境では上手くいかない場合が多いようです。
今回の方法は特にその辺は関係ない部分になるので、困ったとき試して見て頂ければと思います。
