WordPressのテーマ「Cocoon」でSSL(http→https化)に対応する方法

ブログ制作

WordPressのブログをSSL(https化)対応するときに少しつまづいたので、備忘録として記録しておきます。

https化して、テーマや画像が反映されなかったり、スタイルが崩れてしまったりというエラーを発生させないための手順です。

「Cocoon」というテーマを使っているのですが、それでhttps化に対応するのは結構簡単にできました。

WordPressをhttps化に対応させる

それでは、順番に対応させていきます。

人によっては手順が違う場合もあるので、参考程度に見てください。

まずは、各自のサーバでhttps化する

お使いのサーバでhttps化してください。

サーバによってやり方が違うと思うので、詳しいやり方は割愛します。

僕は「ロリポップ!」のサーバをレンタルしていて、簡単にhttps化できました。

次に、WordPressの設定で簡単にhttps化に対応していきます。

WordPressでサイトURLを変更する

まずは、WordPressの「設定」→「一般」→「WordPressアドレス(URL)」と「サイトアドレス(URL)」を変更しましょう。

http://~」の部分を「https://~」とするだけです。

できたらしっかり保存しましょう。

ここが編集できないようになっている!というときは、FTPソフトかなんかでファイルから変更しましょう。

WordPressのディレクトリの直下に「wp-config.php」というファイルがあると思います。

そこに、以下のように書き込みましょう。

define('WP_SITEURL', 'https://各自のWordPressアドレス(URL)/');
define('WP_HOME', 'https://各自のサイトアドレス(URL)/');

というか、WordPressの画面の方で変更できないようになっている時にはファイルの方で定義されている場合があるので、定義している部分を見つけ出してhttpsに書き換えましょう。

「Cocoon」をhttps化に対応させる

次に、WordPressのテーマ「Cocoon」を対応させていきます。

「Cocoon設定」→「その他」→「内部URLをSSl対応(簡易版)」にチェックを入れます。

チェックを入れたら、「変更をまとめて保存」しましょう。

画像のURLを確認する

https化する前に設定した以下の画像たちは、URLがhttp://~として保存されているみたいです。

  • サイト背景画像
  • ヘッダーロゴ
  • ヘッダー背景画像
  • OGPのホームイメージ
  • アピールエリア画像
  • トップへ戻るボタン画像
  • 404ページ画像
  • AMP用のロゴ画像
  • 他にもあるかも

なので、画像を再設定してhttps://~にする必要があるようです。

サイトを表示して、画像がちゃんと表示されているかどうか確認してみてください。

また、画像のURLを一気に変更したいという場合には、「Search Regex」というプラグインが便利です。

そのプラグインをインストールして有効化できたら、「ツール」→「Search Regex」から使えます。

検索して一括で置き換えてくれるので、余計な部分まで置き換えてしまわないか注意して使いましょう。

.htaccessファイルを変更して、自動的にhttps化したサイトにアクセスさせる

せっかくhttps化したので、閲覧者にhttps化したサイトに訪れてもらうようにしましょう。

WordPressのディレクトリ直下に「.htaccess」という名前のファイルがあると思いますが、それを編集します。

そのファイルの先頭部分に、以下のように記述します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

編集できたら、忘れずに保存しましょう。

まとめ:SSL(https化)対応して、エラーを回避しよう

https化することによって、スタイルが崩れてしまったりするので、しっかりと対応させていきましょう。

また、https化したあとは、「Google Analytics」や「Google Search Console」に「https://~」のURLで再登録する必要があります。

忘れずに再登録しておきましょう。

以上、WordPressのテーマ「Cocoon」でSSL(http→https化)に対応する方法でした!

参考文献

httpページを簡単https化(SSL対応)する方法

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

コメント

タイトルとURLをコピーしました