スポンサーリンク

備忘録(WordPress)

【ロリポップ】独自SSLが無料に!WordPressのSSL化(https化)全手順

投稿日:2017年7月25日 更新日:



ロリポップレンタルサーバーが2017年7月11日から、無料の独自SSLを導入できる機能の提供を開始しました。

参考2017/07/11 無料の独自SSLがご利用いただけるようになりました!/LOLIPOP!レンタルサーバー

サイトに独自SSLを導入することで通信データが暗号化され、セキュリティ強化、ユーザーからの信頼性の向上、Googleからの評価アップなど多くのメリットを得ることができます。

下記はパソコンのGoogle Chromeのアドレスバーのキャプチャですが、SSLを導入していないサイトは、アイコンをクリックすると「このサイトへの接続は保護されていません」と表示されます。

独自SSL導入後は、緑色の鍵アイコンが付き、それをクリックすると「保護された接続」と表示されるようになります。
『安全なサイトである』という証明のようなものですね。

実はこのロリポップの独自SSL無料提供開始のビックニュース。
私、全然知らなくてですね...。

以前までロリポップで独自SSLを導入するには、1ドメイン毎に追加料金が必要でした。
・・なんと月額2000円。

高っ!

複数サイトに導入するとサーバー代金が莫大な金額に。

それならば...と、重い腰を上げてサーバー移転の作業を始めようとした矢先に、Twitterでお世話になっている方から教えていただいた情報でした。ありがたい限りです。

サイト運営は「少ない費用で気軽に始められる」という点が最大の魅力だと思うんですね。
WordPressサイトでの利用では、低価格の月額250円からプランの選択が可能なロリポップレンタルサーバー。
今まで長年お世話になってきました。

月々のサーバー代金のみで独自SSLを導入できるようになったことで、これからも利用を続けられるようになりとても嬉しいです。

それでは早速!ということで、通常のWordPressとサブディレクトリ型でマルチサイト化したWordPressの両方のSSL化を行いました。

ここでは、マルチサイト化していない通常のWordPressサイトのSSL化(https化)の全手順を記録していきます。

マルチサイト化したWordPressのSSL化についてはこちらをご参照ください。
※ページ内のリンクは右クリックで別タブで開くことができます。

3,237view
【ロリポップ】サブディレクトリ型でマルチサイト化したWordPressをSSL化(https化)する方法

ロリポップレンタルサーバーの独自SSL無料提供開始の吉報を受けて、当ブログと一部の所有サイトをSSL化(https化)しました。 当ブログはサブディレクトリ型でマルチサイト化したWordPress。 ...

作業にあたり、下記ページを参考にさせていただきました。
SSL化のメリット・デメリットを含め、全ての手順をわかりやすく解説してくださっているのでとても助かりました。

参考1エックスサーバーの無料独自SSLを利用してWordPressをSSL化(HTTPS化)してみた/Life Jam
参考22017年版: WordPressでのhttpからhttpsへの詳細移行ガイド/ブロギングライフ

また、ページ数が多い長期運営サイトなど、SSL化後に鍵アイコンが表示されない原因が見つからないという場合は、様々な確認方法や対処法を掲載されている下記ページが参考になります。

各サイトの運営者様へ、この場をお借りして感謝御礼申し上げます。

参考3WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)/寝ログ

サイトのSSL化は、まとまった時間があれば比較的簡単に作業を進めていくことができます。

そして、確認や修正作業は一度に終わらせなくてもご自身のペースで行うこともできるんですね。

間違いなく言えることは...

できるだけ記事数は少ない段階の方が楽ちん♪

後回しにしてしまっていた方もこの機会に挑戦してみませんか?

スポンサーリンク

主要ファイルとデータベースのバックアップ

SSL化の作業に入る前に、万が一のトラブルに備えて主要ファイルとデータベースのバックアップをとっておくと安心です。

WordPressのバックアップは色々な方法がありますが、当ブログでのバックアップ方法は下記ページで説明しています。

3,759view
WordPressのバックアップ① ~FFFTP(FTPS対応版)のインストールと接続設定・基本操作方法~ - ゼロからのWordPress入門【16】

万が一のトラブルに備えて、WordPressでのサイト運営の際には、サイトデータのバックアップが必要不可欠です。 「今まで更新してきた全ての投稿記事が消えてしまう。」 ・・こんな事態を想像したら怖いで ...

2,341view
WordPressのバックアップ② ~ファイルとデータベースのバックアップ方法を詳しく~ - ゼロからのWordPress入門【17】

前ページでは、WordPressのバックアップの事前準備として「FFFTP(FTPS対応版)」のインストールと接続設定、基本操作方法をご紹介しました。 ここでは、実際に「FFFTP」を利用したファイル ...

ロリポップレンタルサーバーでのSSL設定

ロリポップにログイン→左側のメニュー→「独自SSL証明書」をクリック。

下記のようにドメイン一覧が表示されます。

SSL化したいドメインにチェックを入れて「独自SSL(無料)を設定する」をクリックです。

しばらくは「SSL設定作業中」と表示されますが、5分ほど待ってからF5キーでリロードすると「SSL保護有効」となり、レンタルサーバー側でのSSL化が完了します。

WordPressのサイトアドレスを変更

WordPressダッシュボード→設定→「一般」をクリック。

「WordPress アドレス (URL)」と「サイトアドレス (URL)」両方のアドレスの先頭部分を『https』に変更します。

403エラーになる場合

403エラーでサイトにアクセスできなくなった場合は、WordPress側の設定→「一般」のアドレスを一旦http://に戻してから、ロリポップ(サーバー側)の管理画面→左側のメニュー→セキュリティー→「WAF設定」を無効に。
時間を置いてアクセスできるようになるか確認→表示確認ができたらWordPressのアドレスをhttps://に変更→WAF設定を再び有効にしてみてください。

まだ記事更新前の新規で作成したWordPressの場合は、ここまでで作業完了です。

内部リンクと画像URLの一括置換作業

既に投稿記事が存在している場合、上記作業を終えた時点ではダッシュボードのみ緑色の鍵アイコンが表示されている状態かと思います。

トップページや投稿ページに鍵アイコンが表示されないのは、内部リンクや画像URLが『http』のままになっているのが原因。

投稿ページ数が少ない場合は1つひとつ手動で修正してもOKですが、プラグインを利用して一括置換を行うとスムーズに作業が進みます。

プラグインを利用する場合は、WordPressダッシュボード→プラグイン→新規追加→検索欄に「Search Regex」と入力して表示されるプラグインをインストール→有効化。

WordPressダッシュボード→ツールに「Search Regex」という項目があります。

下記赤枠部分の上段には『http』で始まる置換前のURL。
下段には『https』で始まる置換後のURLを入力後「Replace」をクリック。

置換が行われるソースコードの一覧が表示されますので、確認後、問題が無ければ「Replace&Save」をクリックです。

ここまでの作業が終了したら、トップページから順番に表示確認をしていきましょう。

手動で修正が必要だった部分

今回のSSL化で手動で修正が必要だった部分です。
当ブログで利用しているWordPressテーマ「AFFINGER4」以外のテーマに該当するものも含まれていますので、あくまでも参考程度にご覧になってくださいね。

SSLのエラーチェックには、先にご紹介した寝ログ様の記事内の「Firefoxの開発者ツールでチェック」という項目が大変参考になりました。
※Firefoxで表示しているページで「F12キー」→「コンソール」

  • サイドバーウィジェット
  • サイドバーウィジェットに直接書き込んでいる内部リンクと画像URLの修正を行いました。

  • カスタムメニュー
  • 外観→メニューで設定したカスタムメニュー内の「カスタムリンク」に内部リンクを指定している部分の修正を行いました。

  • style.css等、カスタマイズ時に追加した画像URL
  • 背景画像設定などのカスタマイズで、テーマファイルに画像の相対パスではなく画像URLを追加している箇所の修正を行いました。
    パソコンの「Ctrlキー」+「F」で表示される検索欄に『http』を入力すると探しやすいです。(修正後はキャッシュをクリアしてから表示確認を行ってください)

  • プロフィール画像
  • プラグイン「Simple Local Avatars」を利用して「設定」→「ユーザー」→「あなたのプロフィール」で設定しているプロフィール画像を再保存しました。(このプラグインを利用している場合はダッシュボードにも鍵マークがつきません)

  • アフィリエイトリンク
  • SSL対応コードへの貼り替えを行いました。

  • 自作RSSボタン・Feedlyボタン
  • URLの変更を行いました。

  • テーマカスタマイザーと管理画面から設定した画像(AFFINGER4)
  • 外観→カスタマイズで設定した見出しの背景画像とロゴ画像、AFFINGER4管理で設定した吹き出しデザイン用の画像を再保存しました。

  • ランキング管理で設定した画像(AFFINGER4)
  • ランキング管理で設定済みの内部リンクと画像URLの修正を行いました。(アフィリエイトリンクを使用している場合も確認が必要です)

  • ファビコン(AFFINGER4以外の利用テーマ)
  • ヘッダーに直接書き込んで表示しているものは「header.php」の画像URLの修正を行いました。

  • テーマオプション(トップページヘッダースライダー・トップページバナー・リンク)(AFFINGER4以外の利用テーマ)
  • テーマ独自のオプション機能。管理画面から画像の再アップロードとリンク修正を行いました。

  • テーマデフォルトのソーシャルボタン(AFFINGER4以外の利用テーマ)
  • プラグインJetpackの「共有設定」のソーシャルボタンに変更しました。

修正作業の際に403エラーが出る場合は、ロリポップ(サーバー側)の管理画面→左側のメニュー→セキュリティー→「WAF設定」を一時的に無効にしてください。

AFFINGER4のAMPページエラーの対処法

独自SSL導入後、WordPressテーマ「AFFINGER4」でAMP化しているページにエラーが出るようになりました。

「AMP Validator」のエラーメッセージ。

Googleの「AMPテスト」でのエラーメッセージです。

いずれも「AMPページに必須のロゴ画像の高さを指定するコードが見つからないよ」ということが書かれています。

このエラーの対処法は、Twitterでお世話になっているsorayori様の下記ページを参考にさせていただきました。

実は、SSL化後にAMPページのエラーに気が付いておらず...。しかも、自分の知識では解決できずにいたかもしれません。
感謝を込めて、ありがとうございます。

参考WordPressで独自SSLをうまく設定できないときの対処法とAMPやgoogleのこと/sorayori

当ブログの場合は、小さなサイズのロゴ画像を使用していますので、変更コードの中の「layout="fixed"」はそのままで、画像の幅と高さを指定するコードのみを追加しました。

また、AMPページのフッターにもロゴを表示させていますので、「st-footer-content-amp.php」(子テーマ)も同様に編集を行いました。

詳しい手順は参考サイト様をご確認ください。

こちらの作業は、WordPressテーマ「AFFINGER4」をお使いの方のみに該当する項目です。

リダイレクトの設定

変更前の『http』から始まるURLにアクセスがあった場合に、自動的に『https』から始まるURLにリダイレクトを行うための設定を行います。

私の場合は、ロリポップのFTPに直接コードを追加しましたが、FTPソフトを使ってパソコンにダウンロードしたファイルをテキストエディタで編集後にアップロードする方法でもOKです。

ロリポップのFTPに直接コードを追加する場合は、ロリポップ→左側のメニュー→WEBツール→「ロリポップ!FTP」→一番上の階層のファイル名→「.htaccess」をクリック。

万が一のトラブルに備えて必ずファイル内のコードを全てメモ帳にコピーしてから、一番上に下記コードを追加します。

追加後はこのようになります。(マルチサイト化していない所有サイトの場合)

ここまでの作業が完了したら、アドレスバーに変更前の『http』で始まるアドレスを入力し、トップページや投稿ページが『https』で始まる緑色の鍵アイコンが表示されるページに正常にリダイレクトされるかどうかをご確認ください。

SSL化でリセットされるSNSシェア数の引継ぎ

SSL化によってサイトアドレスが変更されるため、今までのSNSシェア数はリセットされてしまいますが、プラグイン「SNS Count Cache」を使用することで、変更前と変更後のシェア数を合算して表示することができます。

詳しくは、こちらの記事内で説明しています。

3,271view
【STNGER PLUS】ソーシャルボタンへの「SNS Count Cache」導入・設定・カスタマイズ方法

こちらのプラグインは、STINGER8・AFFINGER4のオリジナルソーシャルボタンにも利用できます。 WordPressプラグイン「SNS Count Cache」は、オリジナルソーシャルボタンな ...

「SNS Count Cache」をデフォルト対応済みのテーマ以外で使用する場合は、関数を用いたテーマファイルの編集が必要となりますので、こちらの項目は全ての方に必要な作業ではありません。

Googleアナリティクスの登録変更

あともう少しでゴールです。
頑張ってくださいね。

Googleアナリティクス→左側のメニュー→一番下にある「管理」→「プロパティ設定」→「デフォルトのURL」の下記赤枠部分を『https://』に切り替えます。

IPアドレス除外設定等で、ビュー設定を行っている場合は、「管理」→「ビュー設定」→「ウェブサイトのURL」の部分も同じように切り替えてください。

Googleサーチコンソールへの再登録とサイトマップ送信

Googleサーチコンソールは、登録変更ではなく『https』で始まるURLで新規にプロパティを追加してサイトマップを再送信する必要があります。

詳しい手順は下記ページで説明しています。

3,736view
Googleサーチコンソールへのサイト登録とサイトマップ送信方法 - ゼロからのWordPress入門【9】

WordPressへのGoogleアナリティクス導入が完了したら、次は『Googleサーチコンソール』へのサイト登録へと進みます。 AFFINGER(ヘッダーにコードが追加されるテーマ)をお使いの場合 ...

変更前のプロパティは、ホーム一覧の右端にある「プロパティの管理」→「プロパティを削除」をクリックして削除してしまってOKです。

サイト登録先のURL変更作業

最後に、今までにサイトURLを登録していたSNSなどの変更作業を行います。
あらかじめリダイレクトの設定をしていますから、こちらの作業はゆっくりでも問題ありません。

思いつく範囲で...。

  • Twitter・FacebookなどのSNS
  • GoogleアドセンスのURLチャネル
  • Push7
  • 登録ASP
  • ブログランキングサイトなど

すべての作業が終了したら、URL置換に使用したプラグイン、メモ帳にコピーしたコードなどは削除してくださいね。

お疲れ様でした。

以上、独自SSLの無料提供がスタートしたロリポップレンタルサーバーでのWordPressのSSL化(https化)の全手順をご紹介しました。

最後までお付き合いくださりありがとうございます。

晴れてアドレスバーに緑色の鍵アイコンが「ピカリン♪」と表示されますようにとお祈りしております。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

スポンサーリンク

-備忘録(WordPress)

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.