W
木材・石・貝殻のおすすめ iPhone ケースブランド

Chrome68 SSL警告対応 – WordPress 常時SSL設定その③ URLリンク置換

5分

SHARE

なめろうです！

今回は「WordPress を 常時SSL設定してみた」シリーズの③、これで最後となります。

前回は Google Search Console と Google アナリティクスへの新規URL 登録について投稿しました。

Chrome68 SSL警告対応 – WordPress 常時SSL設定その② Google Search Console & Analytics

これまで行なった作業は以下となります。

  1. ブログ ( WordPress ) のバックアップ
  2. XSERVER でのSSL設定を行う
  3. WordPressの設定変更
  4. リダイレクト用のコードの設定 ( .httaccess 修正 )
  5. Google Search Console への新規 URL 登録
  6. Google アナリティクス登録 URL の変更

サイトへのSSL接続ができるようになり、また Google 関連サービスへのURL反映が完了しました。

しかし、現状 Chrome アドレスバー表示では常時SSL化の合格はもらえておりません。

あいかわらず「このサイトへの接続は完全には保護されていません」と表示されたままとなっています。

前回も申し上げたとおり、サイト内外へのリンクに “http://〜” で始まる URL が残っているためであり、全てのリンクを “https://〜” に差し替える必要があります。

リンクの置換方法について

リンクを差し替えるには以下の2つの方法があります。

  1. 記事を全て目視で確認し、主導によりリンクを差し替える
  2. WordPress プラグイン Search Regex を用いて一括置換を行う

“1.” については記事の数にもよりますが、膨大な作業時間を必要とし現実的ではありません。

できれば “2.” が良いように思いますが、全ての記事に対して一気に行うと考えた場合、もし誤って置換してしまった場合の影響が計り知れません。

最悪ブログの閲覧が不可能になってしまう可能性もあると考えます。

最初にバックアップを取っていますので時間をかければ元に戻すことも可能ですが、できれば避けたいところです。

寝ログさまの記事にある PHP コードによる置換について

今回の 常時SSL化設定を行うにあたり、様々なブログ記事を拝見しましたところ 寝ログさまのブログ に phpコードの記載によるURL置換についての記事がございました。

WordPressサイトの内部リンクSSL対応（HTTPS化）をコードコピペでちょっと楽にする方法

まずは、この方法を借用させていただき対応してみたいと思います。

失礼かもしれませんが、この方法のデメリットについて寝ログさまの記事から確認させていただきますと。

  1. 表示前に毎回PHPで置換してするので多少の処理時間がかかる
  2. 表示の都度置換処理を行うのでサーバーに多少の負担がかかる
  3. ウィジェットなどの画像は自前でURLをhttpsにする必要がある
  4. 置換対象URLを普通に投稿本文に書いてしまうと置換されてしまう

引用：寝ログ – WordPressサイトの内部リンクSSL対応（HTTPS化）をコードコピペでちょっと楽にする方法

①の多少の時間がかかることや、②サーバへの負担は本当に微々たるものかと思います。

③ は対応後に手動で対応することとし、④については一旦目をつぶることにしたいと思います。

ただ今後、表示される記事に対して、常に文字列検索・置換処理が行われるのは気になるところです。

ですので、一旦寝ログさまの方法でセキュリティー状態が改善することを確認したのちに、PHP コードの内容にしたがって、Search Regex を利用して一括置換する方法を検討してみます。

サイトエラー情報の確認

実際の対応の前に、サイトのエラー情報を確認しておきます。

エラー情報は、Chrome または FireFox いずれも開発ツール ( デベロッパーツール ) を用いて確認することが可能です。

Chrome Security Overview の利用について

Crhome の Security Overview を利用することで、サイトのHTTPSの状態を詳しく確認することが可能です。

まず、利用方法について記載しておきましょう。

Security Overview を利用するには、デベロッパーツールを起動します。

Chorme 右上の点がみっつ縦に並ぶアイコンをクリックして「その他のツール」から「デベロッパーツール」を起動します。

site-ssl03-01.png

縦表示だと少し使いにくいので、横表示にします。右上の点がみっつ縦に並ぶアイコンがもう一つ現れますのでクリックして、その下の下部表示アイコンをクリックします。

site-ssl03-02.png

「Resources – mixed content」と表示されています。つまり “http://〜” で始まるコンテンツが混在しているということです。

右上の警告アイコンをクリックします。

site-ssl03-03.png

“http://〜” で始まる画像へのリンクがずらりと表示されました。

FireFox 開発ツールでの確認

FireFox 開発ツールでも確認が可能です。

FireFox の場合、メニューから「ツール」-「ウェブ開発」-「開発ツールを表示」を選択します。

site-ssl03-04.png

「コンソール」を選択すると以下の通り、やはりずらりとエラーが表示されます。

site-ssl03-05.png

この状態を踏まえ対応してみたいと思います。

スポンサーリンク

PHP コードによる置換

PHP コードによる置換方法については 寝ログさまの記事　をぜひ参照していただきたいと思います。

寝ログさまのブログ では実に有用な情報が多く、今回多くの記事を参考とさせていただきました。

寝ログさま、ありがとうございます。

記事中の PHP コードをそのまま借用させていただき、このブログの functions.php に適用させていただきました。

Chrome と FireFox でセキュリティ状態を確認する

PHP コードを適用した状態で、先に述べました Chrome と FireFox の機能を使って確認してみました。

まず、Chrome ですが…

状況は変わっておりませんが、WordPress テーマ設定によるサイトアイコンや、ウィジェット内のアフィリエイトリンクであることがわかります。

site-ssl03-06.png

FireFox でも同様です。

site-ssl03-07.png

まだ置換対象に不足があると言う事ですね。

テーマ設定、ウィジェット内のリンクの見直しと修正

テーマ設定や、ウィジェット内のリンクはどうしても目視確認と手作業による修正が必要です。

順にやってみましょう。

ウィジェット内のリンク確認・修正

WordPress 管理画面より「外観」-「ウィジェット」を開きます。

片っ端から ウィジェット を開き確認します。テキストウィジェット を中心に確認するのが良いかもしれません。

site-ssl03-08.png

プロフィールを記載したウィジェットに “http://〜” 始まるリンクを見つけました。内部リンクの場合は単に “https://〜” に置き換えるだけです。

site-ssl03-09.png

 

もしもアフィリエイトへのリンクがありました。外部リンクの場合は注意が必要ですね。

ヒントとしては、先に設定した PHPコードをみてみると良いと思います。

site-ssl03-10.png

スポンサーリンク

WordPress テーマ設定の確認・修正

次に WordPress のテーマ設定を確認してみます。

WordPress のカスタマイザーをまず開きましょう。

怪しいところから… サイトロゴなど、画像へのリンクが指定してあるはずですので…

site-ssl03-11.png

こういった画像指定ではいったん削除したのちに、再度指定し直すしかない様ですね。

site-ssl03-12.png

再度確認してみよう

Chrome と FireFox をもう一度確認します。

まず、Chrome …

“保護された通信” と表示されるようになりました！常時SSL化合格です！

ただしエラーが表示されておりますが、リンク切れでしょうか？

site-ssl03-13.png

次に FireFox …

こちらも アドレスバー左のアイコンが緑の鍵に変わっており、常時SSL化がなされている事を示しています。

site-ssl03-14.png

これで合格です！素晴らしい！

Chrome のメッセージが気になりますがSSL関連ではないため、今後問題が生じたら対処することにしましょう。

WordPress プラグイン Search Regex を用いた置換について

ここまでの作業で常時SSＬ化の設定が完了し、Chrome ブラウザ上でも “保護された通信” と表示されています。

本記事の主旨は満たしておりますが、プラスアルファとしてSearch Regex を利用して記事中の URL を実際に置換することについて記載します。

PHP コードでページが表示されるつど置換する条件を、少しずつ実際に置き換えるイメージです。

ちょっと複雑ですが、私がやってみたことをそのまま書いてみます。

Search Regex のインストール

まず Search Regex をインストールしましょう。

WordPress 管理画面より「プラグイン」-「新規追加」を選択します。

キーワードに「Search Regex」と入力しますと、以下表示されますので「今すぐインストール」をクリックします。

site-ssl03-15.png

インストールしたら有効化しておきます。

Search Regex の設定確認

置換を行う前に Search Regex の基本設定を確認します

「ツール」-「Search Regex」を選択します。

設定は全てデフォルトでかまいません。以下デフォルトの設定です。

  1. Post content：投稿記事の本文
  2. No limit：無制限に置換する
  3. Ascending：昇順に検索する
  4. Regex : チェックなし

site-ssl03-16.png

PHP コードの確認・コメントアウト

PHP コードに戻ります。

PHP コードより、例えば以下のように置換対象の文字列を1組選びます。

$search  = 'http://hatenablog.com/embed?url=';
$replace = 'https://hatenablog-parts.com/embed?url=';
$the_content = str_replace($search, $replace, $the_content);

以下のようにコメントアウトしておきます。

// $search  = 'http://hatenablog.com/embed?url=';
// $replace = 'https://hatenablog-parts.com/embed?url=';
// $the_content = str_replace($search, $replace, $the_content);

つまり コメントアウトした置換内容を、Search Regex を用いて実際に置き換えていきます。

置換文字列の入力

Search Regex に戻ります。

置換する文字列を入力します。

  1. Search pattern : 置換元の文字列を指定
  2. Replace pattern : 置換後の文字列を指定

site-ssl03-17.png

まず検索してみる

置換する前に検索してみます。

「Search」をクリックします。

site-ssl03-18.png

“There are no resoult” と出ました。

そうか hatenablog へのリンクはないのですね。

site-ssl03-19.png

ヒットするまで同じことを繰り返す

同様の手順で、PHP のコメントアウト、Search Regex を用いた検索を繰り返します。

やはり、もしもアフィリエイトのところでヒットしました。

site-ssl03-20.png

次に「Replace」をクリックします。

site-ssl03-21.png

ここで置換前、置換後の文字列が確認できます。

置換前後の文字列に誤りがないことを、目を皿の様にして確認します。

site-ssl03-22.png

問題なければ、いよいよ「Replace & Save」をクリック！

site-ssl03-23.png

同じ作業を繰り返す

残りの文字列について同じ作業を繰り返します。

上記の「Search」は省いても問題ないかもしれませんね。

まとめ！

随分時間がかかってしまいました。

常時SSL化について調べると、簡単であるという記事がある一方で、逆に大変手間がかかると言う説明もあります。

私が行なってみた感触ではとても手間がかかる印象でしたが、これは調査とブログ記事の作成を並行して行なっていたからかもしれません。

少なくとも、本連載の記事を最初から順に対応すれば、それほど手間をかけずに常時SSL化ができると思いますので、ぜひ参考にして下さい。

なめろうでした！

保存保存

保存保存

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

前の記事

Chrome68 SSL警告対応 – WordPr…