WordPressのドメイン引っ越しとSSL化を同時にやってめげそうになったこと #wbtokyo

常時SSL、今年のWeb界でよくきく言葉だった。と同時にSSLサーバ証明書は無料の流れとなり、いっきにハードルが低くなった。さくらのレンタルサーバで対応するにあたって、少しつまずいたので書いておく。

引っ越しついでにSSL対応

課題は、WordPressマルチサイト(サブディレクトリ)で運営している趣味の写真サイト「BirdSITE」を
新規ドメインへ引っ越すこと、
と同時にSSL対応(https://〜)する。

sysbird-2

新しいサイトは、

  • さくらインターネットのドメイン取得
  • さくらのレンタルサーバ ・スタンダード

2017年6月
いまやるなら常時SSLしかない。さくらの「ラピッドSSL」は年額1620円。迷う値段ではないけど、対応するには
証明書や秘密鍵など難しい言葉ばかり。いまやりたくない気持ちだった。

無料SSLの時代

少しほったらかしているうちに、レンタルサーバで無料SSLがちらほら出てきた。
契約したばかりのさくらでも、少しまっていれば無料になるはず、と予想した。いまやるのはやめておこう。

2017年10月
さくらインターネットの「さくらのレンタルサーバ」、コントロールパネル上の簡単操作で無料SSL証明書「Let’s Encrypt」を設定可能に。

sakura-ssl-banner

先のばしすることで、たまにはいいこともあるものだ。

新ドメインをSSL化

SSL化するには、さくらのコントロールパネル上で設定する。なんと「無料SSLを設定する」というボタンをクリックするだけ!

コンテンツを引っ越す

  • 旧サイトのWordPressから、すべてのコンテンツをエクスポート
  • 新しいドメインにWordPressをインストール
  • 新サイトのWordPressへインポート

画面がくずれる問題

https:// でうまく設置されたかに見える新サイトのトップページだった。が、記事のページに遷移するとレイアウトが崩れる。

birdsite-single

CSS, JSのパスがhttp:// のままで読み込まれていない様子だ。パーマリンクを基本以外に設定すると発生する。

wp-config.phpを編集

さくらのレンタルサーバ特有の問題らしく、wp-config.phpの先頭に追記することで解決した。 (※2018年8月以降の契約サーバーでは不要)

Google Maps APIのわな

Google Mapは2016年6月より APIキーが必須になっていた。以前に設置したサイトでは、そのまま使えるので気づかなかった。

map-error

Google Maps APIキー

  • Google Maps APIキーを取得
  • HTTP リファラー (ウェブサイト) 設定
  • 
Google Maps JavaScript API を有効にする

プラグイン修正


Google Maps Photo Galleryを修正する。
(※公式ディレクトリへの反映はまだ)

  • 設定画面を追加
  • ユーザーごとのAPIキーを入力できるようにする
  • Google Maps APIのURLにAPIキーを追加

Google Mapが表示されるようになった。

map-ok

リダイレクトは必須

サイトを引っ越しするにも、 SSL化するにもリダイレクトが肝心だ。

HTTPSへのリダレクト

新サイトへのアクセスが常にhttps:// になるよう、301リダイレクトさせる。

http://birdsite.jp/*

https://birdsite.jp/*

新サイトの.htaccess を編集する。(※2019/5/26修正)

新サイトへのリダイレクト

旧サイト(サブディレクトリ)から
、新サイトの同じディレクトリへ301リダイレクトさせる

https://sysbird.jp/birdsite/*

https://birdsite.jp/*

旧サイトの.htaccess を編集
する。

なかなかできなかった。リダイレクトされることもあれば、されないこともあるような、不安定な動きだった。しばらくして急に気づいた。

リダイレクトは.htaccessの先頭に書く。

古い名刺のQRコードから
、新サイトのお問い合わせフォームへ
リダイレクトされればOK。

card-2

この名刺は、いままでに路上で写真を撮らせていただいた方に渡している。1年以上遅れて連絡をくれる方もいるので、このリダイレクトは重要なのだ。

プラグインもある

さくらのレンタルサーバ 簡単SSL化プラグイン
私よりもめんどくさがりやのさくらユーザーは利用するとよいかも。

WordBench東京 12月勉強会

2017年12月17日 新宿のハートビーツで行われたWordBench東京 12月勉強会 「年末LT忘年会」で発表しました。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください