SSL対応で思いのほか時間を喰ってしまった

スタティックな1枚ファイルを差し替えリニューアルした時に、サーバーの方の設定は済ませていた。ほぼほぼ相対パスで書いてあるスタティックファイルで問題の起きようもなく、それきり忘れていたが、wordpressでブログを設置した途端、font-awesomeのアイコンが表示されないのに気づき、「http://」で呼び出していたCDNや、Sassの中で絶対パスを使っていた画像URLなど全部書き換え。

その辺りまでは自分が書いたものなので難なく作業は進んだが、 wordpressの <?php wp_head(); ?> がある限り「mixed contents」の誹りはなかなか逃れられない。

対処方法としては下記の記事中にある「functions.phpで一括で混在コンテンツを置き換える」ソースをそのまま使わせていただきました。

ワードプレスhttpsのサイトでwp_head()が混在コンテンツ(http)を出力する時の対処方法

先に出ていた<?php wp_head(); ?>の出力バッファをその場で書き換えるソースというのは、他でも多く書かれていて

ob_start();
wp_head();
$wp_head_replaced = str_replace('http://', 'https://', ob_get_clean());
echo($wp_head_replaced);

これを先にお試ししていたんですが、「取りこぼし」がある事に早々に気づいたのと、後者の方法の方が納得がいくものだったので即差し替え。 子テーマ(-child)の functions.php に

add_action( 'wp_head', 'wp_head_buffer_start', 0 );
add_action( 'wp_head', 'wp_head_buffer_end', 100 );
function wp_head_filter($buffer) {
return str_replace('http://', 'https://', $buffer);
}
function wp_head_buffer_start() {
ob_start( 'wp_head_filter' );
}
function wp_head_buffer_end() {
ob_end_flush();
}

と加筆して、解消。


SSLで表示崩れなど起きた場合に原因探しをする方法は、

「このページは承認されていないソースからのスクリプトを読み込もうとしています」と言うエラーの解決方法について。

この記事がとにかく面白かった。

最終的に(お話の解る)Firefoxでチェックを済ませてからChrome(頑固ね)に戻ってデベロッパーツールを見る、というのを数回繰り返したんですが、途中まぁ多少鬱々とします。(俺のせいぢゃないのに俺を誹られてもぉ…)的な気分になった時に、同記事に戻って、勇気をいただきました。(勇気か?)

おかげ様で最後の最後に「jQuery.min.jsにエラーがありましてね…行番号はね…」みたいな杓子定規悪魔の囁きを読んで(えぇぇ、それは俺に言われても)となった時には、よく見ると無事赤々と、じゃなく緑々した「保護された通信」鍵マークが生きておりました。


とはいえ

Chromeに出る赤盾マークはまだ解消していない。WPプラグインをまだhttpで読み込んでいるので、その辺を手直ししないと、当面赤い盾が続くでしょう予報。

余談。

混在コンテンツ置換えのところで、後者の方が納得がいく。なんてのは、またジョジョラーが「納得がすべてに優先するっ!」モードかよ・・・て感じですが、記事に書かれている「一括」で漏れなし、という理由の他に、何よりも個々のテンプレートを汚さずに済むのが良かった。

<?php wp_head(); ?>は、多くの場合はheder.phpにしか書かず、<?php wp_footer(); ?>も footer.php以外にFooterデザインを複数用意するってそうそうない、とは思うものの、後日というよりは「後年」を想定すると、SSL対処に夢中になったことなんて、さっさと忘れていくと思うんですね。特に自分の場合。

3年経って<?php wp_head(); ?> という見慣れた肝の関数ではなく上の4行になってたら(何じゃこりゃ)と忘れていそう。で、何だったっけ、を辿らずに済むように、シコシコと日本語コメントアウトで //SSL対応:http→https 置換え などと書き込んでおくのも手かも知れないけど

子テーマの functions.phpというのは、そのままでModifiedの記録。 そもそも必要があってやらざるを得なかった、改変・改良の議事録のようなもの。

ここではない長年使ってきたブログがマルチブログなので、共有物としての「親テーマ」をいじってしまう習慣がまずないのだが、これまでシンプルなテーマをベースに選んで苦労知らずにきたせいか、今回は「子テーマ」の役割、使い分けの効能が身に沁みている。