【WordPress】エラー：コンソールに「Mixed Content」が表示される。

WordPress

2021.07.262021.09.05

みなさんは、投稿した記事等にエラーが発生していないか、チェックしていますか？

一見、問題なく動いているように見えて、

実はエラーが起きている場合があります。

私が今回対応したエラーについてご紹介します。

contents

エラー内容
対応
まとめ

エラー内容

投稿した記事上で右クリックし、Chromeであれば、「検証」をクリックすることで、

タグ情報や、エラー情報を確認することができます。

今回確認できたエラーは以下でした。

　エラー内容　

Mixed Content: The page at ‘https://nekopress.castelodelego.org/introduction/hozukis-coolheadedness/’ was loaded over HTTPS, but requested an insecure script ‘http://code.jquery.com/jquery-1.12.3.min.js?ver=5.8’. This request has been blocked; the content must be served over HTTPS.

にゃこ

サイトはHTTPSなのに、セキュアじゃないHTTPが混じっているからブロックしたよ✨

と教えてくれています。

対応

今回は、明確に「http://code.jquery.com/jquery-1.12.3.min.js」がおかしいと教えてくれていますね。

このコードを探してみると、

ありました！

functions.phpの中で、Leader lineを使うためのコードの中に「http」と書いてありました💦

function my_enqueue_scripts() {
  wp_enqueue_script('leader-line', 'https://cdn.jsdelivr.net/npm/leader-line@1.0.1/leader-line.min.js');
    wp_enqueue_script('offset', 'http://code.jquery.com/jquery-1.12.3.min.js');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

直していきましょう！

functions.phpを編集するので、事前にバックアップは取っておきましょう。

function.php編集手順

①外観＞テーマエディターを開く。

②編集するテーマが、利用中のテーマであることを確認する、

③テーマのための関数 (functions.php)を開く。

④エディターの内部のどこかをクリックしてからCtrl＋Fを押す。

⑤表示された検索窓（Search）に「http://」と書き、Enterキーを押す。

⑥httpsに変更し、「ファイルを更新」ボタンをクリックする。

エラーが表示された画面を再度開き、

右クリック＞「検証」をクリックして、エラーが出ていないか確認してください。

まとめ

エラーは消えましたか？

今回は、原因を教えてくれていたので、簡単でしたね。

1つずつ、ゆっくり確実に直していきましょう！

エラー内容

対応

まとめ

コメント