nt7121
@nt7121

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

WordPressのImagesが反映されない

解決したいこと

コーディングしたものをWordPress化していますが画像が読み込まれません。
Console上で404エラーが出ていることは確認できましたが調べても解決に至らなかったのでご指摘をお願いしたいです。

発生している問題・エラー

404 (Not Found)

スクリーンショット 2020-12-13 20.51.01.png

該当するソースコード

index.php(一部抜粋)
                  <h1 class="header_logo">
                      <a href="#"><img src="<?php echo get_stylesheet_uri(); ?>images/ロゴ.png" alt=""></a>
                  </h1>

                  <!-- btn  (pc tb only)-->
                  <div class="mb_otherthan btn">
                    <ul>
                      <li><a href="#10"><img src="<?php echo get_stylesheet_uri(); ?>images/お問い合わせボタン.png" class="contact_btn" alt=""></a></li>
                      <li><a href=""><img src="<?php echo get_stylesheet_uri(); ?>images/フェイスブック.png" class="sns fb" alt=""></a></li>
                      <li><a href=""><img src="<?php echo get_stylesheet_uri(); ?>images/ツイッター.png"class="sns tw" alt=""></a></li>
                      <li><a href=""><img  src=<?php echo get_stylesheet_uri(); ?>images/"インスタ.png" class="sns ig" alt=""></a></li>
                    </ul>
                  </div>
style.css
/*
Theme Name: theme1
*/
function.php
<?php 
function my_scripts() {
  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all' );
  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/font.css', array(), '1.0.0', 'all' );
  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/reset.css', array(), '1.0.0', 'all' );
  wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/responsive.css', array(), '1.0.0', 'all' );
  wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/setting.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
 ?>

<!-- 画像パスを短くする関数 -->
<?php 
function imagepassshort($arg) {
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
return $content;
}
add_action('the_content', 'imagepassshort');
 ?>

自分で試したこと

CSSも同じように調べて反映させました。
images部分についても調べたり関数を足したりと行いましたが解決に至りませんでした。

0

2Answer

Comments

  1. @nt7121

    Questioner

    久しぶりにログインした為お返事が遅れてしまい申し訳ございません。解決できました!ありがとうございました!

@blue32a さんからの回答の通り画像ファイルの配置とそのディレクトリ構成が想定したものになっていることが前提ですが、404エラーでは URL が正しいかも確認してください。

エラー文のリクエスト先に wp-content/themes/dronecafe/style.cssimages/ (以下略) と表示されていることから、明らかに .css ファイルを指定するためのパスが混ざっています。

<img src="<?php echo get_stylesheet_uri(); ?>images/ロゴ.png" alt="">

上記コードにある get_stylesheet_uri() (参考) は style.css へのパスを取得するための関数なので、正にその通りにパスが生成されてしまっているようです。
この箇所を別のパス取得関数(get_template_directory_uri() とか?)に置き換えれば解決できないでしょうか。

また質問に記載されている imagepassshort($arg) を使えば更に簡単に書けそうな雰囲気がありますが、WordPress には疎いので実例は差し控えさせて頂きます...。

0Like

Comments

  1. @nt7121

    Questioner

    久しぶりにログインした為お返事が遅れてしまい申し訳ございません。解決できました!ありがとうございました!

Your answer might help someone💌