【Wordpress】画像エラー 404foundで表示されない
自作テーマで画像が表示されなくて1日消費した人です😂
wordpressって自分の思ったように表示されないっていうの多くないですか？
解決策として、ディレクトリーの指定場所が間違っているとかググるとたくさん出てきていますね。
今回、その1日消費した人による画像を表示できるまでの実践内容を紹介します。
ディレクトリーのURLの見直し
もう一度、予測変換を使って書き直してください。
1番時間がかかったところです。
参照されているURlは指定するとき、予測変換を利用している人は間違えるはずがないと思う気持ちはわかります。
もしかしたら以前に画像を作成し直したり、移動させていたりしている可能性が、、。
予測変換が出ないな〜。といって手書きはやめましょう。
また、コピペで画像タイトルを直書きもやめましょう。
基本機能として備わっていると思いますが、プラグイン等利用して表示されるようにしてください。
また、htmlで使用していたimgタグパスでは表示されないためWordpress特有のパスに変えてあることも確認してください。
imgタグパス
<img src="<?php echo get_template_directory_uri(); ?>ファイルの場所" alt="">背景画像パス
.img-back {
background-image: url("画像のパス");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}画像が指定のフォルダーにあるか
フォルダーにあるかどうか確認してください。
コードを記述した後、この画像最初イメージしたように映らないから比率を変えておこう。
といった感じに画像編集した後、特定のファイルに届かず近くにあるフォルダーにドラッグしていたとかよくあります。
相当焦っていたんでしょうね。自分笑
「あれ？無くね？」って思い、別のファイルを除いた結果画像があるなんてことがあります。
相当焦っていたんでしょうね。(2度目)
画像が認識されていない可能性が。
フォルダーからデスクトップ等わかりやすい場所に移動して、もう一度指定の場所に移してください。
なぜか読み込まれない時があるので、油断は禁物です。
書いている場所は本当に表示されるべき場所か
レスポンシブデザイン用か、パソコン用か。書くべきファイルを見直す。
パソコン用画面の画像を変えているのに、検証画面がレスポンシブの検証画面になっているのに関わらず、何度もリロードボタンを押す作業。
一度ボタンを押して変化しなければ諦めてください。
時間がいくらあっても足りません。
本当にこういうことが多いため注意したほうがいい場所になります。
例えば、「about」ページを作成されていたとき検証画面と行き来した後たまたま通りかかった「home」画面の画像がうまく読み込まれていない。
エディターに戻って 「about」ページのまま、cssをすぐに書いて検証画面に戻ると反映されていない。
リロードボタンを連打する時間に突入。
本当に気をつけていきましょう。
キャッシュの削除
リロードしまくっていると、以前に書いていたcssがそのまま残っていることがよくあります。
そのため、キャッシュを削除しましょう。
もう一度再読み込みするため、反映されていることが多いです。
プラグインの再起動
導入しているプラグインを全部止めて、再起動をかけましょう。
注意して欲しいのは、プラグインの削除手順になります。
例えば、お問い合わせページにて「Custom Form 7」？っていう簡単にコンタクトフォームを取り込めるプラグインを利用しているときに、
それを補ってくれる「Custom Form 7 add」という確認画面を作ってくれるプラグインがあります。
メインである「Custom Form 7」を先に消すとエラー画面でいっぱいになり、管理画面がいじれなくなるのではないかというくらい広がります。
もちろん、下にスクロールすればプラグイン削除画面があります。
そうならないように、できれば実装した順に消していくのが無難です。
これにより、画像が表示されることがあります。
まとめ
1.ディレクトリーの見直し
2.画像が指定のフォルダーにあるか
3.画像が認識されているか再確認
4.書いている場所の再確認
5.キャッシュの削除
6.プラグインの再起動
ちなみに、画像を読み込ませる方法として、cssがどこにあるか自由です。PHPファイル内に合ってもいいし、style.cssに分けておいてもいい。
拘っているつもりがなくても、気づけは拘っている部分もあるかもしれないので、様々な方法を試してくのも手段の一つです。
ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？