初心者向けWordPressホームページの作り方

初心者のためのWordPressを使ってホームページ作り方

エックスサーバーでCoreSSLを契約し、WordPressサイトを常時SSL化する方法

▼そんなデザインじゃ信頼されませんよ!▼
WordPressテーマ「OOPS!(TCD048)」
エックスサーバーでCoreSSLを契約し、WordPressサイトを常時SSL化する方法

昨年(2015年)、Googleが「HTTPSページを優先的にインデックスに登録する」と公式に発表されました。

●Google公式ブログ→「HTTPS ページが優先的にインデックスに登録されるようになります

これは、ホームページを見ている人の安全を最優先に考えて、常に暗号化で接続(通信)を行っているホームページを優先して、インデックス(検索エンジンのデータベースに登録)するということです。

このGoogleの発表に伴い、WordPressラブでも読者さんが安心してブログを読めるように、常時SSL化をしました。(2016年1月20日)

常時SSLでのデメリットとメリット

常時SSL化することでのデメリット。

  • 「いいね」「はてブ」の数がすべて《0》になります。
    WordPressを使っているなら、プラグインで継承できるそうです。
    参考サイト:https://junichi-manga.com/sns-count-cache-https/
  • コストとしてSSL証明書の料金(年次)がかかります。
  • 古いブラウザでは、正しく表示されないことも…
  • httpsに対応させるまでに、テーマやプラグインが対応していなくて手間がかかる

続いて、常時SSL化のメリット。

  • 閲覧者が安心してホームページを楽しめる
  • 閲覧者が自分の情報を送信した場合も、暗号化されるので安心できる
  • SEOで優位になる…はず(これは、まだ何とも言えないです^^;)
  • 今後の更新で「いいね」「はてブ」の数を確保していくことが可能。今後も更新するブログであれば、早めに常時SSL化しておいた方がお得なのではと思っています。

ということで、エックスサーバーで一番安いCoreSSLを契約して、WordPressの設定までをご紹介します。

エックスサーバーでCoreSSLを契約する

SSL証明書にも種類があるのですが、今回はざっくりと「エックスサーバーでCoreSSLを契約」そして、「WordPressに常時SSLの設定をする」だけに絞ってご紹介します。

今なら、エックスサーバーを使っている方は「CoreSSL(1年契約)」が0円です!
2年契約1,000円、3年契約でも1,500円と激安になっています。
キャンペーンは、2015年3月31日18:00までとなっています。

※但し、1会員につき1契約までとなっています。

エックスサーバーならCoreSSLが1年契約0円

●エックスサーバー:https://www.xserver.ne.jp/

すでにエックスサーバーを契約している方は、「インフォパネルにログイン」してください。
ログインしたら、左メニューの《追加のお申し込み》をクリックします。

コアサーバー インフォパネルにログイン

追加のお申し込みについてのについての書類が表示されるので確認し《同意する》をクリックします。

利用規約・個人情報保護について同意

「SSLの新規取得」の《追加のお申し込み》をクリックします。

SSL証明書のお申し込み

SSLブランド:CoreSSL(料金:1,080円/年)
SSLプラン:SNI SSL(ネームベース)(初期設定費用:無料、利用料:無料)
ご契約期間:1年(任意で2年・3年に変更してください)

SSLブランド/SSLプラン

対象サーバーIDを選択します。
コモンネーム:SSLを利用する「www付き」ドメインを選択します。

www付き「www.XXXX.com」「XXXX.com」どちらでもアクセスが可能。
wwwナシ:「XXXX.com」は、アクセス可能。「www.XXXX.com」は、アクセス不可。

《お申し込み内容の確認・料金のお支払い》をクリックします。

CoreSSL申し込み

支払いには、以下がご利用可能です。
自分に合ったお支払い方法を選択しましょう。

  • 銀行振込
  • クレジットカード
  • コンビニ
  • ペイジー

※私は、すでに他のドメインで無料SSLのキャンペーンを利用してしまったので、有料になっています。

CoreSSLのお支払い選択

すぐに契約完了できる「クレジットカード払い」で手続きを進めます。
《クレジットカード決済画面へ進む》をクリックします。

クレジットカード決済のお申し込み

クレジットカード情報を記入し、《カードでのお支払い(確認)》をクリックします。

《カードでのお支払い(確認)》をクリック

クレジットカードの情報を確認し、《カードでのお支払い(確定)》をクリックします。

《カードでのお支払い(確定)》をクリック

クレジットカードでのお支払いが完了しました。

クレジットカードでのお支払いが完了

続いてメールを確認しましょう。

件名:【Xserver】SSL新規取得手続きのご案内

件名:【Xserver】SSL新規取得手続きのご案内

メール内に、取得手続きの流れが記載されているので確認しましょう。

取得手続きの流れ

CoreSSLの取得申請をする

エックスサーバーのインフォパネルのトップに移動します。

  1. 《SSL証明書》タブをクリックします。
  2. 該当ドメインの《取得申請》をクリックします。

《取得申請》をクリック

CSR情報(SSL証明書申請情報)を入力します。

CSR情報(SSL証明書申請情報)を入力

ページ最下部の《SSL登録者情報入力へ進む》をクリックします。

ページ最下部の《SSL登録者情報入力へ進みます》をクリック

「SSLご登録担当者情報」を入力し、ページ最下部の《SSL新規取得申請を行う(確認)》をクリックします。

「SSLご登録担当者情報」を入力

「SSLご登録担当者情報」を入力

内容を確認し、《SSL新規取得申請を行う(確定)》をクリックします。

《SSL新規取得申請を行う(確定)》をクリック

「SSL証明書 新規お申し込み」完了ページが表示されます。

「SSL証明書 新規お申し込み」完了ページが表示

エックスサーバーから、「SSL証明書設定完了のお知らせ」メールが届くまで少し時間がかかるので待ちましょう。

(私の場合は、約20分ぐらいでメールが届きました)

エックスサーバーの設定完了

エックスサーバーから、「SSL証明書設定完了のお知らせ」メールが届きます。

「SSL証明書設定完了のお知らせ」メールが届きます。

メール内には、SSLのURLが記載されています。
但し、このURLも少し待ってからアクセスしましょう。
すぐにアクセスすると、こんな感じになると思います。

このURLも少し待ってからアクセス

私は、メールのとおり30分待ってから、アクセスしてみました。
すると、アドレスバーにシールド(盾)マークが表示されています。
SSLのはずなのに、「https」がグリーンじゃない。。。

SSLのはずなのに、「https」がグリーンじゃない。。。

これは、外部のhttpサイトから読み込みを行っている場合に表示されます。
「安全ではない外部サイトから、読み込んでいるよ」ってことです。
例えば、アフィリエイトリンクを貼っていると出ます。

「安全ではない外部サイトから、読み込んでいるよ」

httpから読み込んでいるものを消してみます。ウィジェットでA8のアフィリエイトを表示させていたので削除。
そして、簡易アクセス解析を削除しました。

httpから読み込んでいるものを消してみます。

ブラウザを更新して確認するとグリーンで「https」と表示されるようになりました。

ブラウザを更新して確認するとグリーンで「https」と表示

これで、httpsでもアクセスが可能になりました。

続いては、WordPressの設定を行います。

WordPressの一般設定で「https」に変更する

WordPressにログインします。

  1. 左メニューの《設定》をクリックします。
  2. 「WordPressアドレス(URL)」の「http」を「https」に変更します。
  3. 「サイトアドレス(URL)」の「http」を「https」に変更します。

ページ最下部の《変更を保存》ボタンをクリックします。

WordPressの一般設定で「https」に変更する

JetpackのPhotonを利用している場合は、プラグインの編集をする

常時SSL化すると、JetpackのPhotonがそのままでは機能しないので、プラグインを編集してPhotonが機能するようにしましょう。

2つのファイルを編集します。

《プラグイン》→ Jetpack by WordPress.com の《編集》をクリックします。

《プラグイン》→ Jetpack by WordPress.com の《編集》をクリック

1つ目は「jetpack/functions.photon.php」のファイルを選択し、以下のコードを探して「s」を追加します。

http://i{$subdomain}.wp.com

https://i{$subdomain}.wp.com

 

《ファイルを更新》ボタンをクリックします。

jetpack/functions.photon.php」のファイルを選択し、以下のコードを探して「s」を追加

2つ目は「jetpack/class.photon.php」のファイルを選択し、以下のコードを探して「s」を追加します。

( ‘http’ != $url_info[‘scheme’] || ! in_array( $url_info[‘port’], array( 80, null ) ) ) &&

( ‘https’ != $url_info[‘scheme’] || ! in_array( $url_info[‘port’], array( 80, null ) ) ) &&

《ファイルを更新》ボタンをクリックします。

「jetpack/class.photon.php」のファイルを選択し、以下のコードを探して「s」を追加

編集が完了したらPhotonが機能します。
最初は、画像の読み込みに時間がかかる場合があるので、時間をおいてから確認してみましょう。

httpにアクセスされたらhttpsにリダイレクトするよう設定する

最後に「http」にアクセスされた場合に自動でSSLの「https」に変更されるように設定を行います。

FTPソフトでサーバーに接続し、.htaccessファイルを開きます。

FTPソフトでサーバーに接続し、.htaccessファイルを開く

.htaccessファイルの最初に、以下を書き加えてサーバーに上書き保存します。

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

これで、httpにアクセスをした閲覧者を自動で「https」にリダイレクトされます。

まとめ

Googleが公式に発表にしたこともあるので、あなたのブログファンのためにも安心して閲覧してもらえる環境づくりも大切なんじゃないかと思います。

常時SSL化で、以下について不具合の症状が出ました。こちらについては、別途記事にしたいと思います。
該当する方は、記事の更新をお待ち頂いてから常時SSL化にチャレンジしてください。
・Jetpack by WordPress.comの共有がエラーになる

SSL化した場合「https」に変わるので、以下二つの設定も変更するのを忘れないでください。

  • Google Analytics
  • Google Search Console

こちらについても、別途記事にしたいと思っています。

初心者には、少し難しく感じる常時SSL化ですが、手順通りに進めていただければ常時SSL化できると思います。
ぜひ、早めに常時SSL化にチャレンジしてみてください。

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

この記事を書いた人

WordPressラブ管理者 YUTAPON
PHPとか詳しくない自分でも見た目がいいホームページが作れたことに感動したので「初心者のためのWordPress勉強サイト WordPressラブ」を作ってみました。
ぜひ、WordPress初心者の方のお役に立てればうれしいです。

Facebookコメント

Return Top