Web Design Leaves

設定での URL 変更

Wordpress のメインナビゲーションから「設定」→「一般」を開きます。

「一般設定」のページで「WordPress アドレス (URL)」と「サイトアドレス (URL)」を修正します。

それぞれの URL の「http」部分を「https」に変更します。

画面下の「変更を保存」をクリックして保存します。

テーマファイル内のソースコードの変更

使用しているテーマのファイル（functions.php なども）のソースコードで「http://」と記述してある箇所がある場合は「https://」へ修正します。

テーマ内をエディタを使って一括検索すると簡単です。

それほど数は多くないと思うので、内容を確認して修正します（一括置換は危険です）。外部リンクの場合、https 非対応の場合もあるかも知れないので注意が必要です。

以下は funcctions.php での例ですが、wp_enqueue_script() でスクリプトを読み込んでいますが、http:// となっているので変更する必要があります。

if(is_singular('news') || is_page(array('exhibition_schedule', 'xxxx', 'shop'))) {
  wp_enqueue_script('googlemap', 
  'http://maps.google.com/maps/api/js?sensor=false'); // https に変更が必要
  wp_enqueue_script('maps', 
  get_template_directory_uri(). '/js/maps.js',
  array('jquery', 'googlemap'),
  '20xxxxxxx' 
);}

以下は 404.php の例です。http: と直に記述されているので https に変更が必要です。

<span class="error_msg">
http://<?php echo esc_html($_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']); ?>
</span>

これはこのサイトを作成した際に SSL 化を想定していなかったのでこのような記述になっていますが、本来ならプロトコル部分も以下のように記述しておけばこのような書き換えは発生しませんでした。。。

<span class="error_msg">
<?php echo esc_html((empty($_SERVER['HTTPS']) ? 'http://' : 'https://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>
</span> 

以下は独自の JavaScript の記述の例ですが、この場合、http を https に変更しても問題ありませんが、プロトコル部分は「window.location.protocol」に変更するという方法もあります（元からそのように記述しておけば良かったのですが）。

var img_dir = "http://" + window.location.hostname + "/wp-content/themes/ky_infinite/images/";

//以下に変更
var img_dir = window.location.protocol + "//" + window.location.hostname + "/wp-content/themes/ky_infinite/images/";

以下は Magnific Popup というライトボックスを使用するために画像のリンクにクラスを追加するための記述ですが、2行目の http を https に変更しても問題ありませんが、この場合は正規表現部分を変更する方法もあります（これも元からそのように記述しておけば良かったのですが）。

$content = get_the_content();
$content = preg_replace('/(<a )([^>]*"http:[^">]*\/wp-content\/uploads\/[^">]*"[^>]*>)/u', '$1 class="mpg" $2', $content);
$content = apply_filters('the_content',$content);
$content = str_replace( ']]>', ']]&gt;', $content );
echo $content;

//2行目を以下のように変更 http → http(s)?
$content = preg_replace('/(<a )([^>]*"http(s)?:[^">]*・・・

Better Search Replace を使って内部リンクを変更

サイト内（投稿や固定ページ）の内部リンクや画像のリンクを全て https に変更します。

1つ1つ手作業で編集すると大変なのでデータベース内の文字列（シリアライズされたデータも）を一括置換できるプラグインを利用します。

Search Regex というプラグインもあるのですが長い間（4年以上）更新されていません。

昨年（2019年）使用した際はインストールしてしばらくすると、以下のようなメールが送信されてきましたが（無視しても大丈夫のようです）、問題なく変換することはできました。

以下の例では、Better Search Replace というプラグインを利用します。

但し、このプラグインも「最終更新: 9か月前」とあり、最近のサポートのコメントを見ると、「機能しない」などというものもありました。「レビュー」には現在も高い評価のコメントもありますが。。。

実際に使ってみても置換処理では毎回エラーが出てやり直す必要がありました。このプラグインを使用するかどうかは検討する必要があるかと思います。

【重要】以下を実施する前には必ずデータベースをバックアップしてください。不具合が発生した場合に元に戻せなくなります。

プラグインのインストール画面「プラグイン」→「新規追加」から「Better Search Replace」を検索してインストール及び有効化します。

「Better Search Replace」を有効化したらメインナビゲーションから「ツール」→「Better Search Replace」を選択してページを開きます。

Search/Replace タブには以下のような項目があります。

「Settings」タブを選択すると以下のような「Max Page Size」の設定が表示されます。

もし、データベースの置換を実行した際にタイムアウトなどで処理が正常に完了できない場合は、「Max Page Size」の値を減らすと改善される可能性があります。

マルチサイトの場合

マルチサイトもサポートされています。

各サイトのダッシュボードから「ツール」→「Better Search Replace」を選択すると、それぞれのサイトのデータベースの置換（テーブルの選択）ができます。

メインサイト（main/base site）の「ツール」→「Better Search Replace」を選択すれば、全てのサイトのデータベースをまとめて（テーブルを選択して）置換することができます。

リダイレクトループのエラー

サイト移転などで WordPress のデータを移して SSL化 した際にサイトにアクセスすると以下のようなエラーになる場合があります。

具体的な例としては、ConoHa Wing に移行する際に無料独自SSLを設定して、独自に WordPress をインストールした（データを移行してデータベースをインポート）サイトでこのようなエラーが発生しました。

動作確認 URL（http://）を使った確認の際や、ConoHa Wing で用意された WordPress のインストールを使ったサイトでは問題ありませんでした。

ConoHa Wing はサーバー変数 $_SERVER['HTTPS'] が取得出来ないようで、以下のような記述を wp-config.php に記述することでエラーが解消しました。

if(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) and $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
  $_SERVER['HTTPS'] = 'on';
}

ただし、上記の記述は、以下の記述より前（上）に記述する必要があります。

そうしないと、管理画面にアクセスしようとすると「このページにアクセスする権限がありません。」と表示されて管理画面に入れなくなります。

require_once(ABSPATH . 'wp-settings.php');

また、以下のように .htaccess で環境変数をセットする方法もあるようです。

SetEnvIf X-Forwarded-Proto https HTTPS=on

この現象は ConoHa Wing に限らず、HTTPS 対応を別のサーバーや機器（SSLアクセラレータなど）で行っている場合に発生するようです。

そのため、SSL だけではなく、サーバー変数 $_SERVER['HTTPS'] を使って処理をしている箇所でうまく行かない可能性があります。

今回移行したサイトの場合、404.php でリンクを $_SERVER['HTTPS'] を使っていたためスタイルシートが読み込めなくなっていたり、$_SERVER['HTTPS'] を使って URL（フォームの送信先）を作成していたページで以下のような Mixed Content のエラーが発生していて修正が必要でした（上記 PHP を追記）。

その他にも $_SERVER['HTTPS'] の値を利用して動的に生成している JSON-LD の構造化データマークアップ（パンくずリスト）も修正が必要でした（この場合 Mixed Content のエラーが出ないので気がつくのに時間がかかりました）。

参考サイト：AWS 上の WordPress が HTTPS で正常に表示されない場合の対処

鍵マークが表示されても安全とは限らない

鍵マークが表示されていても問題がある場合があります。例えば、以下のページは鍵マークが表示されていますが、実際にはスライダーが動かずページとしては機能していません。

デベロッパーツールの Security タブで確認すると以下のように「Non-secure origins」や「Blocked mixed content」が表示されています。

「Your page requested non-secure resources that were blocked（ページが安全でないリソースをリクエストしたのでそれらはブロックされました）」とあります。

最新ブラウザでは安全でないコンテンツ（http 経由のスクリプトなど）は既定でブロックされます。

Console か「Blocked mixed content」の下の「View 2 requests in Netowrk Panel」をクリックすると原因を確認することができます。

この例の場合、「安全でないリソース」は「http://code.jquery.com/jquery-1.10.1.min.js」になり、このためこのページの jQuery は機能せず表示に問題が発生しています（この場合はスライダーが動かない）。http を https に修正する必要があります。

混合コンテンツ Mixed Content

混合コンテンツ（Mixed Content）とは、ページは安全な HTTPS 接続で読み込まれているのに、その他のリソース（画像、動画、スタイルシート、スクリプトなど）が安全ではない HTTP 接続で読み込まれている状態を意味します。

Google Developer: 混合コンテンツとは

例えば、ソースコードの一部にまだ http から始まる画像のリンクなどがある場合は「混合コンテンツ/Mixed Content」と判定され、鍵マークが表示されず、アイコンをクリックすると以下のように表示されます（※ 鍵マークが表示されても「混合コンテンツ/Mixed Content」である場合もあります） 。

デベロッパーツールの Security タブで確認すると以下のように「このページには HTTP リソースが含まれています（This page includes HTTP resources）」表示されます。

「HTTP リソースのリクエストを記録するにはページを再読込してください（Reload the page to record requests for HTTP resources）」とあるので再読込すると以下のように表示されます。

「View 3 requests in Network Panel」をクリックすると、ネットワークパネル（タブ）が表示され HTTP で読み込まれているリソースが表示され、その下のコンソールには詳細が表示されます。

Console には「このページは HTTPS でロードされていますが、安全でない画像をリクエストしています。このコンテンツも HTTPS で配信されるべきです」というようなことが表示されています。

この例の場合は画像が http で始まるリンクで読み込まれているのが原因なのでそれを修正します（実際の原因は Initiator が jquery.magnific-popup.min.js となっているので magnific-popup というライトボックスのプラグインによる画像の出力）。

各ページを確認して鍵のマークが表示されていない場合は原因を調査して修正します。

リダイレクトを確認

上記の設定をしたら「http://～」でアクセスして、自動的にそのページが正しく「https://～」にリダイレクトされるかを確認します。

もし、正しくリダイレクトされない場合は htaccess の設定を確認します。キャッシュをクリアしてみるか、ブラウザのシークレットモードで試してみるのも1つの方法かも知れません。

Google Analytics

Google Analytics を利用している場合は、「デフォルトの URL」を変更する必要があります。

「管理」をクリックします。

「プロパティ設定」をクリックします。

「デフォルトのURL」の下のボタンをクリックして、表示されるドロップダウンリストから「https://」を選択して、画面下の「保存」をクリックします。

「完了しました」と表示されれば完了です。

Google Search Console

Search Console は、新規サイトとして追加する必要があります。

「プロパティを追加」をクリックして、https のアドレスを入力して登録します。

Google カスタム検索

Google カスタム検索は「検索ボックス コードの取得」の「検索結果の詳細を指定」でプロトコルを指定することができます。

「設定」から「コードを取得」をクリックして、「検索結果の詳細」をクリックして https に変更します。

ソースコードに問題がなければ検索結果のページをコンソールで確認すると以下のようになります。