Web Coding


Warning: Use of undefined constant   - assumed ' ' (this will throw an Error in a future version of PHP) in /home/wanwan888/www/wordpress01/wp-content/themes/w-note1102/single.php on line 25

2011年03月02日

さくらの共有SSLでContact Form 7を使う

WordPress の共有SSL環境下に、メールフォームのプラグイン
Contact Form 7 を導入したときの記録です。
それはプラグインAdmin SSL を使えば簡単にできるはずでしたが
それがなぜかまったくうまくいかない…。

七転八倒した末にネット上の情報から知ったのは
さくらインターネットの共有SSLではAdmin SSLが使えないらしい、ということ。

レンタルサーバの乗り換えも頭をよぎりましたが、
このこと以外で不満はないし、評判もいいサーバなので何とか他の方法で
共有SSLを使えるようにならないか試行錯誤しました。

以下はそれが成功したときの方法です。
Admin SSLを使用していないですし、手間のかかる方法ですがけっこう確実かと。
*表示上の都合によりページ中のphpコードの一部「<」に日本語を使用しています。コードをコピーする際はご注意ください。

全体の流れ
1、新規作成でメールフォームのページをつくる
2、Contact Form 7 のインストール
3、CSSで体裁を整える
4、メールフォームのページをSSLに対応させる
5、wp-config.phpに加筆する
6、メールフォームへの全リンクをhttps://~にする
7、動作確認をする(+thanksページ)

1)新規作成でメールフォームのページをつくる

ページを新規作成する。本文はまだ空でよい。
それをブラウザで表示し、IDを控える。
(例:http://wanwan.jpn.org/?page_id=72 なら IDは72)

2)Contact Form 7 のインストール

オリジナルサイト(英語)日本語サイトからプラグインをダウンロードする。
それを wp-content>plugins フォルダに入れればインストール完了。

WPの管理画面のメニューからプラグインをクリックし、開いた画面で
Contact Form 7 を有効化する。
メニューに現れた、お問い合わせ>編集 をクリックし編集画面を開く。
そこで以下の設定をする。

2-1)フォームのカスタマイズ(タグやHTMLを加える)

*応答メッセージの表示位置を変えるには、[response] を入れるとその位置に
 メッセージが表示されるようになる。
*idやclassはタグに組み込める仕様になっているけれど、後でそのことに気づいたので、
 今回は使っていない。
2-2)メールのエリアにタグやメール文などを入れる

*「追加ヘッダー」にはCc:やBcc:を入れられる。
*メール(2)を上記のようにすれば、送信者への自動返信メールになる。
2-3)メッセージの文章を精査する
必要があればメッセージ文章をカスタマイズする。
2-4)コードをメールフォームのページに貼る
保存ボタンをクリックし、ページ上部のコード
(デフォルトの状態であれば↓これ)

をコピーし、1)で作ったメールフォームのページに貼る。
*新規に作ったフォームの場合は、Untitled を自分用の名前に書きかえる。
*この時点ではまだCSSを整えていないので生成する表示が崩れていても気にしない。

ここでいったん、Contact Form 7 の編集画面を閉じる。

3)CSSで体裁を整える

CSSで表示をカスタマイズする。
この際、Contact Form 7 フォルダ中のstyle.cssに書きこむと
バージョンアップの際に戻ってしまうということなので、page.cssに加筆した。

4)メールフォームのページをSSLに対応させる

4-1)page-72.phpをつくる
page.phpを複製しpage-72.phpと名前を変える。
*1)で控えたIDが72だったので。
4-2)header-2.php/sidebar-2.php/footer-2.php を作る
header.php/sidebar.php/footer.php を複製し
header-2.php/sidebar-2.php/footer-2.php と名前を変える。
4-3)上記4つのファイルを書き換える
page-72.php header.php sidebar.php footer.php
の中の参照URL(cssやjsやimgの読み込み)をすべて
https://hoge.jp/wordpress01/wp-contents/themes/w-note~~
のようにhttps://からの絶対パスに書き換える。
*<?php bloginfo(‘url’); ?> <?php bloginfo(‘template_url’); ?> 
<?php bloginfo(‘stylesheet_url’); ?> などとなっているところを「検索・置き換え」するが、リンク先は置き換えてはいけないので、目視でひとつずつ確認しながら置き換える。
いったん保存。
4-4)<?php wp_head(); ?>と<?php wp_footer(); ?>を消す
・ブラウザでいったん page-72.php を開き、そのソースコードを表示する。

・header.php の中の <?php wp_head(); ?> に当たる部分を
 そのソースコードからコピーし<?php wp_head(); ?> と入れ替える。
・footer.php の中の <?php wp_footer(); ?> も同じように入れ替える。

・両方のファイルの入れ替えた部分の参照URLを 4-3 と同じように
 https://hoge.jp/wordpress01/wp-contents/themes/w-note~~
 のようにhttps://からの絶対パスに書き換える。

書き換えが終わったら
https://wanwan888.sakura.ne.jp/wordpress01/?page_id=72
にアクセスしてみる。鍵のマークが現れれば成功。
現れずに警告メッセージがでたら、どこかにまだhttp://が残っている証拠なので、
探し出してhttps://に変える。

5)wp-config.phpに加筆する

wp-config.phpをTeraPadなどで開き、
/* 編集が必要なのはここまでです ! 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が読み込まれなくなる。

6)メールフォームへの全リンクをhttps://~にする

サイト内の、メールフォームページへのリンクをすべて
https://wanwan888.sakura.ne.jp/wordpress01/?page_id=72
に変える。(文中のリンクにも気を付ける)

7)動作確認をする(+thanksページ)

実際にメールを送って確認する。
*送信完了(thanks)ページが欲しい場合は、
・ページを新規作成し「送信されました」などの文章を記事欄に書き、
 ページのIDを書き留めておく(仮に85とする)
・page-72.phpを複製し、page-85.phpとID番号を変える。
・Contact Form 7の編集画面の一番下の「その他の設定」欄に、
 on_sent_ok: “location = ‘http://wanwan.jpn.org/?page_id=85’;”と入力する。
 すると、送信された後でpage-85.phpに遷移するようになる。

今回参照させていただいた記事はこちら

本家本元Contact Form 7
さくらインターネットでAdmin SSLが使えない

W-Note http://wanwan.jpn.org/