WordPressでイメージファイルが読み込めないのはBasic認証がかかってるからかも。あとhttpsし忘れ(コレ大事)

公開日: : wordpress

ワードプレスのロゴ

事象

WordPressで作成したサイトを、見る環境によって表示されたりされなかったりする。

CDNを使っていたので、これのキャッシュのせいか?と思ったが、同じLAN内からでも

firefoxで見ると見れる画像が、chromeで見ると表示されないので違う。

実際にCDNをオフにして直アクセスにしてみたが解消されず。

 

原因

  1. wordpressのサイトアドレスがhttpsに設定されていなかった
  2. サイト自体をhttpsで表示しているのに読み込んだ画像はhttpだった
  3. chromeの仕様上、上記の画像は読み込まない(firefoxは読み込む)
    1. chromeの「検証」で確認すると、401のエラー(キャプし忘れたけど、混在コンテンツのワーニングも出てる)

chromeの検証スクショ

 

 

対応

1. WordPressの設定で、サイトアドレスをhttpsにする

 

WP Dashboard SS

 

  1. WPのダッシュボードにログインする
  2. 左ペインの 設定から一般をクリックする
  3. 右ペインのワードプレスアドレス(URL)の中身をhttpからhttpsに変更する
  4. 右メインのサイトアドレス(URL)の中身をhttpからhttpsに変更する

2. httpで画像ファイルが読み込まれた部分を、httpsで読み込まれるよう、ソースで確認の上、修正する

今回、自分の場合は、インストールしたテーマのheader.phpで呼び出していたget_theme_mod()関数(テーマ独自のプロパティを呼び出すもの)で、サイトのロゴ画像を呼び出していた。

そのため、以下を実施して、事象解消した。

  1. WPのダッシュボード開く
  2. テーマのカスタマイズ開く
  3. 「画像を変更」選択
  4. 現在選択されている画像と同じ画像を選択する

 

テーマのカスタマイズSS

こうすることで、httpで設定されていた画像プロパティが、httpsで設定され直される。

Googleアドセンスレスポンシブ

関連記事

no image

WordPress を IIS環境へ引っ越しする手順 – コンテンツインポート編

WordPress を IIS環境へ引っ越しする手順 – 環境構築編 と、 Word

記事を読む

ワードプレスのロゴ

WordPressのプラグイン翻訳(日本語化)

日本語化されてないpluginとか。意外と翻訳されてたりする(完璧じゃないにしろ) リンク

記事を読む

ワードプレスのロゴ

WooCommerceの「お客様」データ削除手順

「お客様」メニュー WooCommerceの昔のバージョンだと無いメニューだったんだけど、

記事を読む

ワードプレスのロゴ

WordPress 手動でプラグインインストール

手動でインストールする方法は2つある。 手動レベル1。zipファイルをWPのダッシュボードから

記事を読む

ワードプレスのロゴ

仕事でWordPress構築を依頼されたら確認することリスト

コピペ用   サイト名 管理者のメアド https化するにあたりSS

記事を読む

ワードプレスのロゴ

WP Mail SMTP で XSERVERのメール使うときの設定

  Auto TLS をオフにするのを忘れがち。 上図はオフにした図。デフォル

記事を読む

ワードプレスのロゴ

WordPressの.htaccessにあるmod_rewriteの意味

意味 <IfModule mod_rewrite.c> もし、サーバ内にmod_

記事を読む

[mac] wordpress用に投稿する画像をまとめてリサイズする

まぁ別にwordpress用に限らないんですが、画像をまとめてリサイズしようとしたときに何が

記事を読む

no image

WordPress を IIS環境へ引っ越しする手順 – 設定編

前回の、WordPress を IIS環境へ引っ越しする手順 環境構築編の続きです。 先に書き

記事を読む

no image

WordPress Syntex Highlighter Evolved から Prism.jsに乗り換え

参考にしたサイト WordPressでシンタックスハイライトならPrism.jsが軽量&多機能

記事を読む

Googleアドセンスレスポンシブ

Message

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

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

PAGE TOP ↑