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アドセンスレスポンシブ

関連記事

ワードプレスのロゴ

静的htmlでContact Form 7を使用する

ショートコード設置まで .htaccessの内容変更や、htmlソースの最上部(docty

記事を読む

ワードプレスのロゴ

wordpress で wp_dequeue_scriptやwp_dequeue_styleしてテーマのcssやjsを読み込まない

テーマが読み込んでるcssやjsを調査 functions.phpに以下を追記する。htmlの

記事を読む

ワードプレスのロゴ

サイトヘルスで「バックグランド更新が想定通りに動作していません」と表示される原因のひとつ

  結論 僕の場合は、Basic認証をかけている為でした。  

記事を読む

ワードプレスのロゴ

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

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

記事を読む

ワードプレスのロゴ

WordPressのClassicエディタでインデントが勝手に消える

対応 「TinyMCE Advanced」というプラグインをインストール 上記プ

記事を読む

no image

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

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

記事を読む

ワードプレスのロゴ

WordPressの.htaccessにあるmod_rewriteの意味

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

記事を読む

ワードプレスのロゴ

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

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

記事を読む

ワードプレスのロゴ

WordPressで、サブディレクトリにインストールしたコンテンツが基本のパーマリンクで正常に動作しない

環境 ワードプレスのコンテンツファイルは、以下のディレクトリに配置した。 domain/wp

記事を読む

ワードプレスのロゴ

WordPressでソースコードを埋め込むならgist

prism.js使ってたが… Wordpressのプラグインでコードハイライトしていたが(Sy

記事を読む

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

Message

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

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

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

css-logo
自分がいいと思ったサイトさんのhtml css リンク

  css ニューモーフィズムのジェネレータ ht

html5-logo
html5のsectionとarticleの使い方と順番

とりあえずこちらのイメージを参考にやっていこうかと思う。

vs
vscodeで現在開いているファイルのPathをコピーする

やり方 1. コマンドパレットを開いて、「copy path

php-logo
php =& イコールアンパサンド で参照渡し

意味 変数やオブジェクトなどを参照渡しする。 # 下記はど

php-logo
php5 varによる宣言

古い、人が作ったソース見てたらvarで変数宣言しているのがあって調

→もっと見る

PAGE TOP ↑