まずはSSL が正常かを確認

正常にSSLページにアクセスできている

今からお話しする事は、SSL 証明書が正常にインストールされている事が前提となりますので、まずは正常にhttps:// でアクセスできるかを確認しましょう。WordPress は動的CMS で、プラグインも多く利用されており、一旦不具合が起こると、どこに問題があるのかを特定するのは結構難しいものです。そこで、WordPress とは切り離して、ルートにダミーページ（test.html など） を置いて、直接アクセスしてみてください。ダミーページを作成する場合は、「SSLテスト」などシンプルなテキストのみにしてください。適当に他のページのソースをコピーしてしまうと、そのソース自体に問題がある可能性も有ります。確実に正常な事を確認しましょう。
Chrome でアクセスした場合、正常ですと右の様な表示になります。

ブラウザーによる警告の違い

IE はアラートが表示される

警告の出方はブラウザーによって異なります。Chrome などはとても控えめで警告が出ている事に気が付かない場合も有りますが、かといって安心はできません。IE ではこの様に表示され、なんだかすごく悪い印象を閲覧者に与えてしまいます。どのブラウザを使っても構いませんが警告を見逃さないよう気をつけましょう。JavaScript とSSL はIE でテストするのが良いかもしれませんね。

Chrome はこんな表示

ここで一つ注意。
Chrome でSSL のテストをする場合は要注意です。Chrome では一旦SSL の警告マークが出ると、その後正常になっても警告マークが取れません。ブラウザを起動しなおすと正常な表示になります。Chrome でSSL のテストはやめた方が良さそうです。

FireFox は右下に表示

FireFox はブラウザ右下に申し訳なさそうにびっくりマークが出ています。

Safari は異常が分からない

Safari は正常なときと若干表示が違いますが、こうなるともう異常であることすら分かりません。
問題は、IEで閲覧している人に対して、とても深刻そうなアラートが出ているということです。自分だけ気が付かなかったなんてことのない様に、IEでもチェックしてみましょう。（ここではIE7を使用しています。）

警告が出る原因は？

ほとんどの場合この警告は、SSL を通らないコンテンツを表示しようとしていますよと訴えています。「SSL を通らないコンテンツ」とはそのページで表示する画像や、スタイルシートやJavaScript などの外部ファイルです。これらのコンテンツが安全であると証明できなければ、現在のページは安全だと保障できないと言うわけです。これはAPI の様に外のサイトから取得してくる場合も例外ではありません。つまり、そのページで表示する画像、取り込まれるソース全てがSSL を通っていないといけないわけです。余計なお世話だと言いたい所ですが（笑）、これはサイトのオーナーを守るものではなく閲覧者を守る為のものなので仕方がありません。制作者は責任を持ってセキュリティー警告をつぶしていかなくてはいけないのです。

対処法

やらなければいけないことは意外と単純です。
ブラウザのソースを確認して、以下の部分をSSLのURLに変更してやるだけです。

パターン1（スタイルシートのリンク）　****href="http://********/****.css****
パターン2（画像やスクリプトなどのリンク） ****src="http://********

修正後はこちら

パターン1（スタイルシートのリンク）　****href="https://********/****.css****
パターン2（画像やスクリプトなどのリンク） ****src="https://********

共有SSL を利用している場合はドメインなども変りますので注意が必要です。また、クオートがシングルだったりスペースが入っていたりするとパターンは増える事になります。


しかし、これはブラウザのソースで確認できるものであって、WordPress がどこでこのURLを出力しているのかを知るのは大変です。また知った所で制御できるのかどうかも分かりません。

という訳で、やっと本題にやって参りました。

こちらのコードは、WordPress がせっせと作り上げたソースを、出力の一歩手前で書き換えてしまおうというものです。

add_action('init', 'ssl_ob_start');
function ssl_ob_start(){
	if( !is_admin() )
		ob_start('ssl_ob_callback');
}
function ssl_ob_callback($buffer){
	$pattern = array(
		'|(<[^<]*)href=\"'.get_option('home').'([^>]*)\.css([^>]*>)|',
		'|(<[^<]*)href=\''.get_option('home').'([^>]*)\.css([^>]*>)|',
		'|(<[^<]*)src=\"'.get_option('home').'([^>]*>)|',
		'|(<[^<]*)src=\''.get_option('home').'([^>]*>)|'
	);
	$replacement = array(
		'${1}href="https://SSLのトップページのパス${2}.css${3}',
		'${1}href=\'https://SSLのトップページのパス${2}.css${3}',
		'${1}src="https://SSLのトップページのパス${2}',
		'${1}src=\'https://SSLのトップページのパス${2}'
	);
	$buffer = preg_replace($pattern, $replacement, $buffer);
	return $buffer;
}

コードを適用したページ

このコードはシングルとダブル両方のクオートに対応してみました。このコードをテーマ内のfunctions.php にペーストして、トップページを確認してみてください（ファイルの保存はUTF8にて）。スタイルが効かなくなり、画像も一切表示されていないはずです。もし画像が表示されてるとしたら、そのURLはパターンからもれている事になります。ソースを確認してみてください。

外部サイトのリソースを読み込んでいる場合もパターンから漏れます。このような場合は、外部サイトのリンクをそのままパターンとしてコードに追加してやることでｈｔｔｐｓ：// に書き換えてしまえばOKです。ただし、そのAPI がSSLに対応していなければいけません。ｈｔｔｐｓ：// にして表示できなくなってしまうサービスはSSL ページには利用できないということです。

グラバターのリソースを表示している

まとめ

今回ご紹介したコードは、管理パネル以外、つまりフロント全てのページを対象にしていますが、3行目の !is_admin() の条件を変更すれば、好きなページに対して書き換えを行う事ができます。また、パターンを変える事でSSLの対応以外にもいろんな事ができますよね。なんだか禁断の香りがしてきますが、決して悪用はしないでくださいね。

ネットショップ構築プラグイン「Welcart」の専用テーマには、既にこのコードはfunctions.php に入っており、SSLの必要なページのみで書き換えが行なわれています。（プラグイン内部で処理しているものも有ります。）もちろん、子テーマで書き換えパターンを操作する事も可能です。

これであなたのサイトからもSSL警告が消える！・・かも

注意

このコードを使用してデータが壊れてしまう事はありませんが、表示がおかしくなる場合は直ちに使用をやめてください。また、保管はお子様の手の届かない所にてお願いいたします。

この処方が有効であることはこちらの環境で検証済みなのですが、コードを見ていただいて分かるとおり出力バッファリングを操作しています。この操作が他のプラグインにどう影響を与えるか、また各サーバーでどの様に振舞うことになるのかはやってみなくては分からないといったところです。

どうしてもSSL のエラーから抜け切れない方は是非お試しください。

この件に関してのコメントは開発フォーラムの下記トピックにお願いいたします。おまじないコードもそちらに記載されています。
http://www.welcart.com/forum/topic.php?id=327

そこで、特に報告の多い「Lightbox 2」と「FuncyBox for WordPress」の2つのプラグインでの対処法を説明いたします。つまり本体へのハックです。（フックが無かったのでハックするしかありませんでした）

Lightbox 2 での対処

修正箇所は2箇所です。

1. lightbox2.php 内にある関数、lightbox_styles() を次のように書き換えます。

function lightbox_styles() {
	/* What version of WP is running? */
	global $wp_version;
	global $stimuli_lightbox_plugin_prefix;
    /* The next line figures out where the javascripts and images and CSS are installed,
    relative to your wordpress server's root: */
    $lightbox_2_theme = urldecode(get_option('lightbox_2_theme'));
    $lightbox_style = ($stimuli_lightbox_plugin_prefix."Themes/".$lightbox_2_theme."/");

	wp_enqueue_style('lightbox_styles_customize', $lightbox_style."lightbox.css");
}

2.最後から2行目のアクションフックを変更します。

add_action('wp_head', 'lightbox_styles');
↓
add_action('init', 'lightbox_styles');

FuncyBox for WordPress での対処

変更はfancybox.php 内、2箇所です。

1. 関数mfbfw_css() 内にある次の行を1行削除します。

	echo "\n".'<link rel="stylesheet" href="'. FBFW_URL . '/css/fancybox.css" type="text/css" media="screen" />'."\n";

2. コードの一番最後に次のコードを付け足します。

add_action('init', 'mfbfw_css_customize');
function mfbfw_css_customize(){
	$url = FBFW_URL . '/css/fancybox.css';
	wp_enqueue_style('mfbfw_css_customize', $url);
}

どちらのプラグインも、スタイルシートをインクルードする際はwp_enqueue_style（） 関数を使うように変更しているだけです。

汎用性を持たせるために、WordPress には様々な関数が用意されていますが、wp_enqueue はこんなに重要だったんですね。プラグインを作るときは気をつけましょう。

今日初めてSSLを有効にして試してみたのですが、カートやユーザー登録以外のページでもPHP、CSS、画像などはすべてhttpsで読み込まれています。
これは、つまりサイト全体をSSLにしているのとほぼ同じだと思うのですが、パフォーマンスの面などではどうなんでしょうか？

当然、SSLのほうが処理時間がかかると思うのですが。

ここら辺は動的なコンテンツに対応するために仕方がないのかなとも思っていますが、できることなら選択したページのみSSLで読み込むような処理になるとうれしいです。

単独でSSLを利用することができるようになりました。リダイレクトを使用していませんので共有SSLも含めほとんどの環境で利用できるはずです。

SSLを利用するページは固定されていて、カートページ関連と会員ページ関連のみとなります。今のところ任意のページに対してSSLを通すという設定はできません。

また、Admin SSLとの併用は考慮していません。

以下はその設定方法です。

Welcart管理画面の「システム設定」にSSLオプションの項目が有ります。

• USE SSL
  SSLを利用するときにチェックをつけます。
• WordPress のアドレス (SSL)
  WordPress一般設定の 「WordPress のアドレス」の値を”https://”で始まるように設定します。共有SSLを利用する場合は同じパスを示すように設定してください。?
  これは管理画面がSSL化されるという意味ではありません。 管理画面をSSL化する場合はWPの一般設定自体をSSLのアドレスにすることで可能ですが、Wordpressがリダイレクトをした場合にどうなるかなどは検証していません。
• ブログのアドレス (SSL)
  WordPress一般設定の 「ブログのアドレス」の値を”https://”で始まるように設定します。 共有SSLを利用する場合は同じパスを示すように設定してください。

Xserverの共有SSLで動作確認を取りました。
各サーバーでの動作確認にご協力をお願いいたします。

更新内容は次の通りです。

• カートページなどの商品名欄の表示仕様を変更できるよう修正
  今まで固定だったこの欄の表示項目を選択できるようにしました。設定は管理画面の「カートページ設定」にて行います。
• 受注メールに購入者のIPアドレスを記載するよう修正
  オーナーに届く受注メールの最下段に購入者のIPアドレスを記載しました。
• 単独でSSLが使えるよう修正
  Admin SSL との併用は考慮に入れていません。「システム設定」にSSLを利用するか等のオプションを追加しました。共有SSLも利用できます。
• JavaScript読み込みの修正

よろしくお願いいたします。

早速試してみましたが、HTTPSでは、商品がカートに入らなくなりました。
また、商品画像とブロックのアイコンがHTTPから始まるURLになってしまったために、セキュリティーの警告が表示されてしまうようになりました。
ショッピングカートにはSSLが必須と考えていて、現状はWordpressをそっくりHTTPSで構築しています。

何か回避策がありましたらご教授いただければと思います。

よろしくお願いいたします。

そこで何とか利用したいのが、ホスティング契約のときについてくる共用ドメイン。このドメインがSSLに対応していれば無料でページを暗号化できるわけです。
uCart はこの共用SSLの利用を意識して開発してきました。といってもほとんどプラグイン「ADMIN SSL」の助けを借りることになるのですが。

とは言うもののタイトルにも「試み」と書いたとおり、動作確認しきれていないところが有ります。さらに利用に際しては条件付となります。

?

共用SSLを利用するための条件

?

• プラグイン　ADMIN　SSL 1.4.1　を併用します。
• ホームアドレスとサイトアドレスが同じでなければなりません。つまりindex.phpがWordpress ディレクトリ内に無ければならない。（はっきり分かりませんがADMIN SSL の仕様のように思います）

?

設定方法

?

ADMIN　SSL　を有効化するとuCart ショップ ホームの右サイドに下のような文字列が現れます。

?page_id=3

?page_id=5

これはカートページとメンバーページを表しています。この2行をメモしてください。

次にADMIN SSL の設定画面に入り、

Secure my site with SSL にチェックを付けます。

Use Shared SSL にチェックを付けます。

Shared SSL URL に

https://host_company.com/your_username/blog/wp-admin/

と記入します。host_company.comは共用ドメイン、your_username/blog は個別のパスになります。最後はwp-admin/ で終わるようにします。

Additional URLs に以下の4行を追加してください。

?page_id=3
?page_id=4
/usces-cart
/usces-member

?page_id=* は先ほどメモしたものです。環境によってIDは変わります。
管理画面を暗号化したい場合は wp-admin/ を追加します。

?

補足

ADMIN SSL を有効化すると再ログインを促されます。その際、しばしばログインできない（画面が遷移しない）症状がありました。そんな時はブラウザを立ち上げなおすとログインできるようです。