WordPressサイトのhttps化で発生しやすい6つのエラーと解決策

WordPressサイトのhttps化ではエラーが発生する？？

どうも、Linです。ノート、発掘です。

WordPressのhttps 化で最もめんどくさいのが

https 化後に発生するエラーを解消すること

ですよね。

Web ブラウザーの開発者ツールなどを用いて、 エラー箇所を特定し、しこしこと修正しなければなりません。

例えば、ウェブブラウザの Chrome ならば

Command + option + I

で development Tool が立ち上がりますので、そこのConsoleを見て、どこにエラーが発生しているのか確認して修正していくことになります。

ぼく自身、これまで10サイト以上 https化してきて、このエラーシューティングには苦労させられました。

サイトごとに エラーが出る場所が違っていて、

「https 化なんてやらなければよかった」と後悔したことがありました。

しかし、なんとか、このエラーたちを解消できましたので、今日はその苦しかった経験を活かし、

WordPressサイトのhttps化で発生しやすいありがちなエラーと解決策

をまとめてみました。

WordPressサイトのhttps化で発生しやすい6つのエラーと解決策

ぼくが遭遇してきたエラーは次の6つ。

エラー1. サイトロゴ画像

ほぼすべてのサイトで見られたエラーとして、

サイトのロゴ画像のURLが http のままになっていた

ということです。

テーマによっては大丈夫なものがありましたが、ほぼ全ての WordPress のテーマでここが引っかかりエラーが出てしまいました。

修正方法はテーマによっても異なりますが、だいたい

1. カスタマイズでロゴ画像を設定し直す
2. テーマを編集して画像のURL を https に変更

でエラーを解決できましたね。

ロゴ画像をカスタマイズから設定した方はカスタマイズで再設定すればオッケーです。

カスタマイズ機能がついていない無料テーマを使っている方は、おそらくテーマを編集してロゴ画像をぶっこんでいると思います。

そのテーマ編集箇所のimgタグのsrc 属性の引用先を https に変更しましょう。

エラー2. ファビコンのロゴの画像

続いてはファビコンです。

サイトの 顔と呼べるこの「ファビコン」も画像の URL が http のままになっていて、エラーが出てしまうケースがありました。

解決策としてはサイトロゴと大体同じ。

カスタマイズからファビコンを設定している方は、カスタマイズからファビコンの再設定をすればいいです。

また、ぼくと同じように All One Favicon というプラグインを使っている方は、プラグインの設定から画像の引用先の URL を https に変更すれば問題ありませんね。

エラー3. 著者情報の画像の URL

続いては、著者情報を設定している時に発生するかもしれないエラーですね。

「著者の画像」を掲載しているケースがあると思うのですが、この著者の写真のソースも https に変更しなければなりません。

「Simple Author Box」というプラグインを使っている場合は、一度アバターの画像を削除し、もう一度設定する必要があります。

FREE SWORDER

 

8 Pockets

【WordPress】著者プロフィールの表示プラグインSimple Author Boxの使い方

https://freesworder.net/simple-author-box

WordPressで著者プロフィールを表示させたい！どうも、Linです。光に、近づいてます。 WordPressでサイトを運営しているとたまに、著者のプロフィールを表示させたいなんてことがありますよね？？検索エンジン経由でブログを読んでくれている方にとって、自分のブログは星の数あるうちの1つ。なかなか記事を書いた本人を覚えてもらうのは難しいです。。たぶん、この記事を読んでいる読者の方も3秒後にはぼくのことを忘れ、夕飯の献立を考えてしまうことでしょう。だからこそ、記事の最後にプロフィール情報をのせることが、著者を...

このエラーの解決策はシンプルで、

ユーザーのプロフィール編集から画像を再設定すればいいですね。

エラー4. 楽天モーションウィジェットが古かった

楽天アフィリエイトの中の広告の種類に「楽天モーションウィジェット」という便利な広告があります。

これですね、これ↓

これは読者の関心に基づいて、楽天市場で販売されている商品を代わる代わる見せるという広告のこと。

3年前からずっと同じサイトに同じスクリプトをずっと貼っていましたら、これがエラーの原因になっていました笑

解決策としては、

最新の楽天モーションウィジェットのコードを貼り直すということですね。

こちらのページから楽天モーションウィジェットの新しいスクリプト取得し、貼り直してみるエラーが解決できるでしょう。

エラー5. アプリーチのアプリアイコン画像

アプリの紹介に役に立つアプリーチというツールは便利。

FREE SWORDER

簡単キレイにiOSとAndroidのアプリを紹介できる「アプリーチ」の使い方

https://freesworder.net/app-reach

ブログをアプリで紹介したいんだけど、キレイに紹介したい！どうも、Linです。2倍に拡張したいですね。 スマートフォンの登場後、ブログのトピックスとして、おすすめのアプリを紹介するという記事が増えてきました。おすすめの家計簿アプリとか天気アプリとか、ブログ記事のネタとしては、永遠にアプリを紹介できるぐらいのネタのポテンシャルを持っています。 だが、しかし、です。意外にも、ブログでアプリをキレイに紹介するのはムズカしいという課題があります。鉄板のリンクの貼り方が存在していないので、どうしても...

キレイにアプリのリンクを貼ることができるので重宝しているのですが、このアプリーチ経由でエラー発生！！

アプリアイコンの画像でエラーが発生してしまったのです。

ただ、全てのアプリーチリンクかというとそうでもなく、最近貼ったリンクに関してはセーフでした。

確か最近新しいバージョンのアプリーチが出た気がするので、古いアプリーチで貼ってしまったアイコン画像だけに問題があるようです。

新しいアプリーチのリンクに差し替えてしまえばいいのですが、数十、数百箇所に及ぶアプリの紹介となるとこれは骨が折れますね。

そこでおすすめしたいのが「Search Regex」というプラグインを用いる方法。

アプリ画像imgタグのsrc属性の画像 URL の引用先を新しいものに置換してしまえば簡単に差し替えることができたのです。

具体的にいうと、

appreach-image

というidがついているimg要素のsrc属性を「https://is2-ssl.mzstatic.com〜」というようにhttpsのURLに変更してやればオッケーです。

エラー6.ウィジェットの画像

また、ウィジェットに画像リンクを掲載している場合もエラーが発生する時があります。

テキストウィジェットでimgタグの画像を掲載している場合は、src 属性のURLをhttpsに書き換えましょう。

また、 画像ウィジェット（Image Widget）を使っている場合は、画像を削除してもう一度設定し直せばオッケーです。

さあ、WordPress の https 化で発生するエラーを1つ1つ潰していこう！

以上が WordPress の https 化で対処したエラーの達とその解決方法でした。

エラーが出る箇所としては

1. 画像の引用元の URL が http のままになっている
2. アフィリエイトリンクが古い

という2つの要因に集約されますので、そんなに難しい作業ではありません。

ガンガン WordPress のサイトを https 化していきましょう！

FREE SWORDER

【所要時間20分】WordPressのサイトをhttps化する設定手順〜シックスコア 編〜

https://freesworder.net/wordpress-https-ssl

やっとWordPress サイトの https 化が終わったどうも、Linです。諌めて、ます。 WordPress のサイトを運営し始めてからかれこれ4年ぐらいが経ちます。4年前はhttp のサイトでも問題ありませんでした が、昨今、Google を主導とした https 化へのサイト切り替えの呼びかけにより、次第に http の WordPress のサイトを運営するのは肩身が狭くなっていきました。「いつしか https 化をしなければならないな・・・・」と思い始めてから8ヶ月。ついに、今日、このブログを https 化に成功したのです。 https化はやってみると思い...

それでは！

Lin

飯橋凛（いいはし りん）

おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。

ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。

質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。