WordPressで独自SSLをうまく設定できないときの対処法とAMP、google、アフィリエイトのこと

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

サイトの独自SSLを無料で提供するレンタルサーバーが増え、普及に弾みがついています。そらよりもトレンドに遅れまいと、このそらよりブログをSSL化しました。

しかし、これがなかなかに細かい。うまくいったと思っても今度はAMPページになぜか障害が発生する始末で、まだまだ初心者のそらよりにとって丸2日がかりのSSL化となりました。

ここでは、僕同様、うっかりSSL化に挑戦してしまい、あとに引けなくなった方のために、つまづきがちなポイントを中心に解説します。

またgoogleのサーチコンソールやアナリティクス,アフィリエイトのことについてもSSL化後の詳細を解説します。

 

 

スポンサーリンク

 

 

なおこの記事はエックスサーバーでの「無料独自SSL」を前提にしています。「無料独自SSL」は「サーバーパネル」にログイン後「ドメイン」>「SSL設定」で実行できます。

またWordPressのテーマは「AFFINGER4」です。一部テーマ固有の現象もありますが、もしかしたら解決の手順が参考になるかもしれないのでシェアしておきます。テーマ固有の名称を使用していますので、ご自分のテーマに置き換えてご理解ください。

 icon-exclamation-circle 僕は別のサイトで無料テーマ「Simplicity2」も使用しています。カスタマイズのしやすさ(みなさんが公開する共有知を含め)では群を抜いています。シンプルなデザインが好きな方にはぜったいおススメです。こちらを使用したサイトはまだSSL化の途中ですが、ほぼこの記事の内容で問題なく実行できると踏んでいます。

 

afterssl35

 

icon-bookmark この記事の主な内容

独自SSL化の標準的な手順

SSL化できないときにやること

Twitterカードの画像がおかしい

有効なAMPページが無効に

googleサーチコンソールの設定

googleアナリティクスの設定

 AMPページのプロパティをhttps://に

アフィリエイトサービスの登録変更もお忘れなく

 

独自SSL化の標準的な手順

まずかんたんに独自SSLをWordPressのサイトに適用する手順をご説明しておきます。サーバーへのお申込み・設定、データのバックアップはすでにお済みになっていることが前提です。

1.「設定」でアドレス変更

ダッシュボード>「設定」>「一般設定」で

「WordPress アドレス (URL)」
「サイトアドレス (URL)」

の両方をhttp://からhttps://に変更、「save」で確定します。

 

2.内部リンクをhttp://からhttps://に一斉置換

3.置換前のhttp://でのアクセスに301リダイレクトで対応

上記2、3についてはたくさんの方が記事にされているので、ここでは言及いたしません。なおそらよりはこちらのサイト「寝ログ」を参考に実施しました。とても親切でわかりやすかったです。

ただ補足しておきたいことが3点ありました。

 

一斉置換プラグイン「Search Regex」に注意

内部リンクをhttp://からhttps://に一斉置換する際、「検索」と「置換」の各ボックスにURLを入力します。このとき、たとえばそらよりでは「検索」に「http://sorayori.com」と入れたら、必ず「置換」は「https://sorayori.com」とします。「.com」の後ろに「/」(スラッシュ)が入っていたりいなかったりしないよう、くれぐれもご注意ください。

 

https://の置換にプラグインだけでは対応できない

ご紹介のサイトでも言及されていますが、プラグインだけでは書き換えられない部分があります。たとえばそらよりの場合、http://sorayori.comを検索し、https://sorayori.comに置換しました。しかしこれではほかのhttp://で始まるものを訂正することはできません。かといってhttp://で検索してしまうと不必要なものまで検索されてしまいます。

またカスタマイズやウィジェットなどで設定した部分は置換できません。

これらは丁寧に該当する部分を見つけだし、手動で置換していく必要があります。そらよりのこの記事では、その代表的な例をつぎの章で細かく説明していきます。

 

301リダイレクトのためのコードの記述場所

上記サイト「.htaccessにリダイレクト用のコードを追記する」の項でコードを配置する場所は「エディターの先頭部分」とありますが、具体的につぎの画像の赤枠で示す位置で問題ありません。

afterssl31

コードはリンク先サイトでご確認ください。

 

SSL化できないときにやること

さて、前章のとおり、独自SSL化の標準的な手順を実行しました。

しかしたぶん多くの方がブラウザの表示は保護されていない状態のままで

afterssl32

下の画像のように緑色表示の「保護された通信」になっていないと思います。

afterssl33

そのおもな原因にhttp://がまだ残っていることがあげられます。というか、すでに申し上げたようにどうしても残ってしまうんです。

 

不具合の発生場所を特定する

まず、SSL化できていないページで不具合が発生している場所を特定します。

WindowsでブラウザGoogle Chromeを使用しているケースを前提にご説明します。

(1)不具合が発生しているページを右クリックし「検証」を選択、または「F12」キーを押し「googleデベロッパーツール」を起動します。

(2)ウィンドウが分割されツール画面が表示されるので上部のタブ一覧から「Console」を選択します。

すると不具合が発生している部分がコードで表示されます。クリカブルな文字列があればクリックしてみましょう。たとえば画像であれば、どのようなものであるか画像そのもので確認できます。

ただこれらの一つひとつの意味を理解し、すべてのページで特定していくのは作業量が膨大となりとても現実的ではありません。

そこでまずつぎの項以降の「ありがちな置換できない場所」「ショートコードblogcardは使えない」「広告の古いコードをチェック」で代表的な問題部分を先につぶしてしまいましょう。驚くほど効率的に不具合が解消できるはずです。

 

ありがちな置換できない場所

WordPressの「カスタマイズ」で設定する項目、「AFFINGER4管理」で設定する項目、「ウィジェット」で設定する項目は手動で書き換えなくてはなりません。たとえば…

 

「カスタマイズ」で画像を変更

ダッシュボード>「外観」>「カスタイマイズ」

「ロゴ画像」「ヘッダー画像」「背景画像」
配置してある画像のURLがhttp://のままです。「メディアライブラリ」にアップロードしてある画像はすでにhttps://になっているので「削除」または「画像の変更」で再登録すれば修正できます。最後に「保存しました」のクリックを忘れずに。

「サイト基本情報」の「サイトアイコン」
サイトアイコンのURLがhttp://のままです。「メディアライブラリ」にアップロードしてある画像はすでにhttps://になっているので「削除」または「画像の変更」で再登録すれば修正できます。

「[+]各テキストとhタグ(見出し)」
「記事タイトル」や「各タグ」で背景画像を使用している場合、各画像のURLがhttp://のままです。「メディアライブラリ」にアップロードしてある画像はすでにhttps://になっているので「削除」または「画像の変更」で再登録すれば修正できます。

 

「AFFINGER4管理」でファビコンを変更

ダッシュボード>「AFFINGER4管理」>「カスタム投稿一覧の設定」>「その他の設定」>「アイコン・ファビコン設定」

ファイルのURLがhttp://のままです。「メディアライブラリ」にアップロードしてあるファイルはすでにhttps://になっているので「削除」→「アップロード」で再登録すれば修正できます。最後に「save」のクリックを忘れずに。「会話風アイコン」を設定している場合も同様の操作で修正できます。

 

サイドバーの広告および画像を変更

ダッシュボード>「外観」>「ウィジェット」

「スクロール広告用」に「テキスト」で設定してあったA8の広告が古いコードのままでした。URLをhttp://からhttps://に変更します。

広告のコードを変更する場合は必ず配信元がSSLに対応済みか確認しましょう。

またAdSenseはコードにhttp://を使用せず「//」を使用しています。これはそのままでかまいません。ただし古いコードはその限りではないので念のためご確認願います。

画像を設置している場合はURLをhttp://からhttps://に変更します。

 

PostSnippetsのリンクと画像等を変更

ダッシュボード>「設定」>「Post Snippets」

無料プラグイン「Post Snippets」を広告配置や画像配置に活用している場合、それぞれの記述内容もURLをhttp://からhttps://に変更します。

広告のコードを変更する場合は必ず配信元がSSLに対応済みか確認しましょう。

 

ショートコードblogcardは使えない

ブログカード風のリンクを作成するショートコード

afterssl40

は使用できません。これもSSL化の障害となります。サイト内検索あるいは「投稿一覧」で「blogcard 」を検索すれば使用している記事を特定できます。コードを削除し、別の方法でリンクしてください。

 

広告の古いコードをチェック

そらよりはAmazon.co.jpアソシエイトに参加しています。広告コードの配置は最近はもっぱら「AmazonJS」プラグインを使用しています。

ただ古い記事のなかには画像広告のコードを直接貼り付けてあり、その記述にhttp://が残っています。コードを差し替えるか、「AmazonJS」プラグインで貼りなおしましょう。

コードの差し替えはどうやらhttp://の部分をhttps://に書き換えるだけでよいようですが、万が一ということもあるのでコード丸ごとの差し替えをおススメします。

同様にほかの広告も提携先のものをチェックしましょう。

サイト内検索あるいは「投稿一覧」で「Amazon」「a8.net」「accesstrade.net」などと検索すれば使用している記事を特定できます。

 

そらよりの場合、これでSSL化は無事完了しました。

しかし今度はほかの部分で不具合が発生しました。それはTwitterカードとAMPページでした。

 

Twitterカードの画像がおかしい

Twitterカードを設定している場合、SSL化でいったんリンクが切れるようです。

投稿ページがTwitterでシェアされた際に表示される画像を、かつてプラグイン「All in One SEO Pack」でコントロールしていました。現在そのプラグインは削除しているのですが、なぜかそこで設定したデフォルト画像がつねに表示されるようになってしまいました。これはトップページのURLをTwitterの「Card validator」サイトで「Preview Card」にかけるとアイキャッチ画像が表示されるようになりました。

なお記事のタイトルを変更した際も、この方法でTwitterカード側を更新すると反映できます。

 

スポンサーリンク

 

有効なAMPページが無効に

SSL化前には有効だったAMPページが、なぜか無効になってしまっていました。

https://のAMPページが正しく表示されるかどうかはこちらで確認できます。

https://search.google.com/test/amp

afterssl20

投稿ページのhttps://で始まるURLの最後にampをつけ「テストを実行」します。ちなみに無料テーマSimplicity2ではampではなく?amp=1なのでお間違いなく。

するとつぎのようなアラートが

 

afterssl34

 

①「AMPタグに無効なレイアウト プロパティがある」>「必須属性『height』がタグ『amp-img』にありません」と表示されています。

クリックしてみると

②該当するコードがあります。「src」のあとの画像名を確認すると、どうやらタイトル文字に代えて画像でロゴマークを設定した部分のようです。

つまりこの画像の配置についてAMPページに必須な画像サイズの「height」が指定されていないことが原因のようです。

しかしその意味がわかっても、実際にどのファイルを修正すればよいのかさっぱりわかりません。

とりあえずタイトル文字の部分なのでheader.phpを当たってみました。すると、ありました。

afterssl29

テンプレートとして使用しているパートが「st-header-log」と書いてあります。

AFFINGER4の親テーマにきっと同名のファイルがあるはずです。すると案の定「st-header-logo-amp.php」というファイルがありました。ファイル名に「amp」がついてるので、ampに関するものであることは間違いありません。

このファイルのつぎの記述を

<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ),array(PHP_INT_MAX, 80) ); ?> layout="fixed"></amp-img>

つぎのように書き換えました。

<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<amp-img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>"
<?php amp_image_size( get_option( 'st_logo_image' ),array(PHP_INT_MAX, 80) ); ?> width="1116" height="191" layout="responsive"></amp-img>

AMPページに必須の「height」を入れました。数字部分は実際の画像の横縦サイズです。これは横と縦の比率を指定するためです。「layout="responsive"」で実寸が表示されます。横と縦の比率が異なるロゴマークを新たに作成・配置した場合はこの数字も当然変えなくてはなりません。このファイルのことを忘れないようにしておいてください。

またフッターにもロゴマークを使用している場合は「st-footer-content-amp.php」に同様の変更を加えます。コードには「 //フッター用ロゴ画像がある時 ?」と「//ヘッダーロゴ画像があり併用する時 ?」の2パターンが記述されているので適宜変更してください。

これでAMPページを有効にすることができました。

しかし、SSL化は終わりではありません。最後にgoogleのサーチコンソール、アナリティクス(AMPもお忘れなく)を設定し、https://ページのインデックス促進、アクセス分析に活かしましょう。

 

スポンサーリンク

 

googleサーチコンソールの設定

たしか初めてgoogleサーチコンソールを設定したとき「wwwのあるなし、どちらも登録せよ」と言われていました。ということは「https」も登録すべきです。検索でヒットしてもらうために、従来のままhttpしか登録していなくてよいわけがありません。

1.サーチコンソールで「プロパティを追加」

afterssl02

 

2.httpsのURLを入力し「追加」

afterssl03

 

3.所有権を確認

afterssl04

所有権を確認する方法はいろいろあります。前回httpを登録した方法を、ほとんどの方が記憶していないと思うので、ここではサーバーに所定のファイルをアップする「おすすめの方法」を使います。

(1)すでに該当のファイルがアップされていないか、まず上記画像の3を試してみてください。表示されているURLをクリックします。

A:ファイルがある

ブラウザにURLの文字列が表示されます。これで確認されたので、非ロボット認証を済ませ「確認」をクリックします。

B:ファイルがない

NOT FOUNDとなり見つかりません。その場合は上記画像の1から手順を踏んで設定します。そらよりは無料の「FFFTP」などのFTPソフトを使いサーバーにログインしています。

ここでわかりにくいのが「2.確認ファイルをhttps://~.com/にアップロードします」の文言です。WordPressを設定しているサーバーを確認してもhttpsのフォルダなんてありません。試しに該当するドメインのフォルダの第一階層にアップロードしてみましたが、確認がとれません。

正解はそのつぎの階層でした。サーバーのトップ階層から、該当するドメインを開き、そのなかにある「public_html」フォルダに②確認ファイルをアップロードするのです。

afterssl07

 

4.サイトマップを作成

新しいプロパティが作成できたらサイトマップを登録しておきます。

そらよりはサイトマップを自動で更新してくれるプラグイン「Google XML Sitemaps」を使用しているので、ここでは空のサイトマップをアップしておくだけです。

afterssl05

①左メニュー「クロール」から「サイトマップ」を選択し②「サイトマップの追加」をクリック

 

afterssl06

「sitemap.xml」と入力し「送信」

 

afterssl09

「ページを更新する」をクリックします。

 

5.「Fetch as Google」の設定

念のためhttpsサイトのホームページのインデックスをリクエストしておきます。

afterssl10

①左メニュー「クロール」から「Fetch as Google」を選択し②をブランクのまま、③「取得」と④「取得してレンダリング」をクリックします。それぞれの結果が下段に表示されるので、各行をクリックすると取得内容と表示を確認することができます。

以上でサーチコンソールの設定は完了です。

 

 

スポンサーリンク

 

 

googleアナリティクスの設定

つぎにアナリティクスの設定を行います。

1.プロパティをhttps://に

afterssl11

アナリティクスを開き「ホーム」の左上のプルダウンを開く。

 

afterssl12

左から順に「アカウント」>「プロパティ」>「ビュー」を選ぶ。そらよりの場合、「プロパティ」は通常のものとAMP用の二つを取得しています。最終的にこの二つのプロパティについてURLを変更します。

 

afterssl13

「ビュー」を開き「プロパティ設定」を選択。

 

afterssl14

「プロパティ設定」画面で「デフォルトのURL」を「https://」に変更する。

 

afterssl15

最下段の①「保存」をクリックし確定する。

つぎに②「Search Consoleを調整」ボタンのクリックし、連携する。これを設定しておくとアナリティクスのレポートにサーチコンソールのデータを表示できるようになります。

 

スポンサーリンク/どちらも無料独自SSL付きです

 

2.サーチコンソールと連携

上記画像②をクリックするとつぎの画面に。

afterssl16

「編集」をクリック。

 

afterssl17

①サーチコンソールでさきほど作成したhttps://のサイトを選択し、②「保存」をクリック。

 

afterssl18

「関連付けの追加」の確認のアラートが表示されます。

アナリティクスとサーチコンソールの関連付けは必ず1対1です。つまりここで新たに設定するとアナリティクスのプロパティと従来関連付けされていたサーチコンソールは切断されると注意を促しています。

「OK」を選択します。

 

afterssl19

最後に「保存」をクリックし確定します。

 

3.AMPページのプロパティをhttps://に

本章1に戻り、今度はAMPページのプロパティを同様に設定します。

ただしサーチコンソールと連携できるのは一つのプロパティのみなので本章2は実行しません。そもそもAMPページのプロパティは“セカンド”で付随的なものなので関連付けの必要はありません。

以上でアナリティクスの設定は完了です。

 

アフィリエイトサービスの登録変更もお忘れなく

SSL化するとURLがhttp://からhttps://へと変わり、新しいURLとなります。アフィリエイトを導入している方は、アフィリエイトサービスに登録しているサイトのURLを変更しておきましょう。

なおGoogle AdSense(アドセンス)とAmazonアソシエイトは登録情報にhttp://がないため改めてURLを変更する必要はないようです。実際に、本サイトhttps://sorayori.comではSSL化後においてアドセンスの報酬額が大幅に減少するようなことはありませんでした。またAmazonの売り上げも計上されています。ただしこれらが301リダイレクトによる効果であるか否かは不明です。まずは301リダイレクト設定の実行、それでもご心配な方は運営側にお問合せしてみることをおススメします。

 

A8.net

代表的なアフィリエイトサービスであるA8.netに問い合わせたところ以下の回答を得ました。

お問い合わせの件ですが、ご登録中のサイトをSSL化された場合も、
登録サイトURLをhttps://に修正していただいております。

参考)FAQ:副サイト登録の手順(サイト登録・修正の手順)
http://support.a8.net/a8/as/faq/2008/08/post_31.html

出典:A8.netサポートセンター メール回答

 

nend

ログイン後「広告枠の管理」で「サイト/アプリ」を選択。「サイト/アプリ」画面を表示し、変更したい「サイト名/アプリ名」をクリック。「サイト/アプリの編集」画面の上部に表示された「【サイト名】【サイトURL】を変更したい場合はこちらからお問い合わせください。」にある「こちら」をクリック。「お問合せフォーム」が表示されるので「変更内容」を記入します。

 

楽天アフィリエイト

ログイン後、上部メニューの「サイト情報の登録・確認」をクリック。「ユーザー情報の確認・変更」画面が表示されるので「登録サイト情報」の「編集」ボタンをクリックし「運営サイトURL」を変更します。

 

AccessTrade(アクセストレード)

原則サイトURLの変更はできません。そのため副サイトを追加後、主サイトに変更する手段が推奨されています。

ログイン後、上部メニューの「マイページ」をクリック。「マイページ」画面で左メニューから「副サイト追加申請」を行います。

アフィリエイトサービスの登録変更は忘れがちですので、ぜひ早めに設定しておきましょう。

 

「WordPressで独自SSLをうまく設定できないときの対処法とAMP、google、アフィリエイトのこと」のご説明はこれで終了です。最後までありがとうございました。

 

スポンサーリンク

スポンサーリンク

さらにこんな記事はいかがでしょう(広告があります)



ブログ人気ランキングに参加しています

にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

horeizaiinhair 1

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

スプレー容器 2

  春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしば ...

hoshikata03 3

  家事に手慣れた方ならとっくに実践なさっているかもしれません。でも、一人暮らし初心者や家事が苦手など、まだご存じなかった方のためにシェアします。     ワキが臭くなる ...

デカ容器01 4

  昨晩、終電を逃した人の家までついていきインタビューするテレビ番組を観ていました。人気なのでご覧になった方も少なくないと思います。そこで深夜にもかかわらず娘の帰りを待っていたお母さんが、大 ...

パスワード作成 5

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

補色01 6

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や茂みにたくさんの人の顔が写っている。心霊写真のお馴染みのパターンですが、さすがに最近はテレビで取り上げることもなくなりま ...

パーティ開け11 7

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

-WordPress, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2017 AllRights Reserved.