【ロリポップ】 WordPress5.7 ワンクリックSSL化を検証

WordPress 5.7 “Esperanza”が、2021年3月9日にリリースされました!
今回、エディター機能がパワーアップした事など、色々と機能追加されたようですが、
僕が最も目に留まったのが、ワンクリックでhttps(SSL化)できる機能!

今回はレンタルサーバーが「ロリポップ」の場合に、Wordpress5.7のワンクリックSSL化機能https(SSL化)する手順、SSL化完了後、使用しているLightningテーマで発生した問題などの検証結果をまとめてみました。

ロリポップ管理画面で独自SSL証明書導入

ロリポップ_Wordpress57_SSL化導入 手順1

まずはロリポップの管理画面から

  1.  [セキュリティ]→[独自SSL証明書導入]をクリック。
  2. SSL化するドメインにチェックをいれる。
  3. 「独自SSL(無料)を設定する」をクリック。

ロリポップ_Wordpress57_SSL化導入 手順2

その後、ステータス表記が「SSL設定作業中」になるので、約5分ほど待ちます。

 

ロリポップ_Wordpress57_SSL化導入 手順3

ステータス表記が「SSL保護有効」になっていれば、管理画面側の設定は完了です。

 

WordPress5.7 ワンクリックでSSL化

続いてWordpress側で、SSL化の処理をします。
[ツール]→[サイトヘルス]からサイトヘルス画面に遷移すると、致命的なエラーの中に「サイトでHTTPSを使用していません」のタブを開きます。

ロリポップ_Wordpress57_SSL化導入 手順4

タブを開くと、「サイトを更新して、HTTPSを使用する」ボタンが表示されている為、クリックします!

SSL化のボタンが表示されない場合

始めタブを開いても、「サイトを更新して、HTTPSを使用する」ボタンが表示されない事態が発生しました!

ロリポップ_Wordpress57_SSL化_サイトヘルスにボタンが表示されない

キャッシュが残っているなど疑ったのですが、
最終的にメンテナンスモードのプラグインでメンテナンスモードを有効化している為でした。

ロリポップ_Wordpress57_SSL化_サイトヘルスにボタンが表示されない原因

今回はテストサイトで検証したので、WP Maintenance Modeというプラグインで、見れないように有効化していました。

ロリポップ_Wordpress57_SSL化導入 手順4

有効化から無効化に設定後、再度サイトヘルスを確認したところ、ボタンが表示されました。
もしメンテナンスモード系のプラグインなど入って有効化している場合は、プラグインを疑ってみると解決するかもしれません。

 

SSL化完了後

サイトヘルス画面でのSSL化が完了後は、管理画面のログイン画面に戻ります。

ロリポップ_Wordpress57_SSL化 手順5

ログイン後にURLを確認すると、httpがhttpsに変わっていることを確認。

ロリポップ_Wordpress57_SSL化 手順6

 

リダイレクト設定

SSL化はされましたが、httpsのサイトと元のhttpのサイトが混在している状態です。
2つ存在している状態では、以下のリスクがあります。

  1. 検索順位に影響する
  2. キャッシュや検索エンジンが古いサイト(httpの方)を見に行ってしまう
  3. サイトのURLを知っている人が古いサイト(httpの方)を見に行ってしまう

その為、httpの方にアクセスされた場合に、httpsの方に自動的に飛ばす設定が必要になります。

ロリポップの管理画面を開いて、[サーバーの管理・設定]→[ロリポップ!FTP]をクリック。

FTP画面起動後、直下のディレクトリ内に「.htaccess」というファイルがあるので、クリック。

プラグインを使用している場合など、人によって若干異なりますが、
以下のコードを一番上にコピー&ペーストして、保存します。

RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

ロリポップの公式サイトのマニュアルにも書いてありますので、そちらも参照ください。

 

動作確認

リダイレクト設定がされている事を、必ず動作確認しましょう。
ブラウザのアドレスバーに古いサイト(http)のURLを入力します。
再読み込み後、httpsに変換されていればOKです!
ロリポップ_Wordpress57_SSL化 リダイレクト設定動作確認

混在コンテンツの修正

基本的にワンクリックでSSL化され、Wordpress内の内部リンクなどhttpの部分はhttpsに自動的に変換してくれるみたいですが、
使用しているLightningテーマのトップページに表示されるスライダー画像が消えてしまいました。

一度、カスタマイズ画面の[Lightningトップページスライダー]を確認します。

スライド画像に画像は設定されているけど、表示がされていない!

 

試しに再度、同じ画像を設定してみたところ、表示がされました。

他にも、Lightning推奨プラグイン「VK All in One Expansion Unit(ExUnit)でのウィジェット内のURLは、httpsに変換されていませんでした。
恐らく変換してくれるのは、Wordpress本体の設定、記事やページのみで、プラグインなどの設定に関しては、Lightningテーマに限らず変換してくれないのかもしれません。

その為、Search Regexなどの文字列置換処理ができるプラグインで変換して混在コンテンツにならないようにしました。

 

まとめ

ワンクリックで済むようになった事は、非常に便利だと感じましたが、
Lightningテーマのスライダーが表示されないなど、
結局、文字列置換処理や再設定しないといけない部分もあり
既に作りこんでいるサイトの場合は、全てプラグインで文字列置換処理でも問題ないかと思いました。

新規にサイト構築した人には、便利な機能だと思うので、
もし、ロリポップでSSL化されていない方がいましたら参考にして頂けたらと思います。
それでは、最後までお読みいただきまして、ありがとうございました!

この記事を書いた人

石井 よしまさ
石井 よしまさフリーエンジニア / Webデザイナー / LPコーディング講師 / シンガーソングライター
歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。

フリーランスエンジニア歴10年のセールスデザインができるWeb制作者 石井よしまさのメルマガ

常駐型のフリーランスエンジニアとして10年。
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、

以下のような内容を配信していきます。

「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか?」
「セールスデザイナーが依頼すべき良いコーダーとは?」..

などについて学べます。

是非、フリーランスとしてやっていきたい!
という方は、ご登録ください(^^)

コメントを残す

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

CAPTCHA