wordpressのコンタクトフォームをSSL化した際のメモ

mocadlogo

さくらサーバーでwordpressの問い合わせフォーム用プラグイン「Contact Form 7」を共通SSL化した際の手順です。
基本的にはどのサーバーでも同じかと思います。

※共通SSLは様々な理由からおすすめ出来ません。詳細はググってみてください。
※後からサイトのレイアウトを大幅に変える必要がある場合やAjaxをgoogleから読み込んでいる場合等はおすすめできません。

さくらのサーバー管理画面設定

さくらのサーバー管理画面のドメイン設定から共通SSLをONにします。

wordpressでにてコンタクトフォーム設置

wordpressにてコンタクトフォームを設置＆設定＆ページ作成します。

ページテンプレート（page.php）の複製

コンタクトフォーム用のページテンプレートを作成してアップロードしておきます。

プラグインの編集

wp-content/plugins/contact-form-7/settings.php

最後のほうにある　return (string)・・・・uri;　の部分を、以下に訂正

return (string) 'https://secure****.sakura.ne.jp/example.com'.$wpcf7_request_uri;

（アドレスは自分の環境に合わせる）

いったん、SSLの問い合わせページを表示

いったん以下アドレスにて問い合わせページを表示
（この時点ではページの全てがSSL化されていないため、IEでは警告がでます）
https://secure****.sakura.ne.jp/example.com/contact

表示されたページのソースを参考に、テンプレートへ置き換え

表示されたページのソースのヘッダー部分とフッター部分とサイドバー部分をコピーしておき、先ほど作成したコンタクトフォーム用のテンプレートのヘッダー.phpとフッター.php部分に置き換えます。
（サイドバーについては、画像を使用していない場合や外部プログラムを利用していない場合は

<?php get_sidebar(); ?>

のままでOK。）
リンク部分以外の　http://example.com　となっている部分を全て　https://secure****.sakura.ne.jp/example.com　に変更。
メニュー部分やバナーなどで利用している画像　http://example.com/title.gif なども上記SSL付のアドレスに変更。

最初の1行を以下のように、

<?php echo '<?xml version=・・・・>'; ?>

でくくる。
phpかじった人なら解ると思いますが、これやらないと画面真っ白！ってことになります。

当たり前ですが、とにかくリンク部分以外で、http// ではじまるアドレスが無いようにすることが重要です。
例えば、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery･･･>

みたいなgoogleからのajaxの読み込み等も外すように。

問い合わせページの編集画面で、テンプレートをデフォルトからコンタクトフォーム用テンプレートに変更

https://secure****.sakura.ne.jp/example.com/contact　にアクセスして、
IEの場合は、ブラウザのアドレスの右側に鍵マークがついていればSSL化成功、FIREFOXの場合はアドレスの左側に青いボタンが表示されれば成功です。

注意：これをやった後は、Contact Form 7をアップグレードした際、4の部分の再変更を忘れないように！

参考：http://blog.honeylab.jp/20100507/wordpresscontact-form-7.html

ページテンプレートを複製せずに行う方法

以下のようにページIDが8のときは、httpsとなり、それ以外のときは通常通りというようなコードをいれる方法もありますが、コンタクトフォームが自動で吐き出すタグに対応しずらいような気がします。

<?php
if ( is_page('8') ) {
   echo '<img src="https://●●●/title.jpg" />';
} else {
   echo '<img src="http://●●●/title.jpg" />';
}
?>
このエントリーをはてなブックマークに追加