【コーディング】ChatGPTで画像パスが通らないのを修正してもらう

Web制作のコーディング作業中に、CSSに記述したbackground-imageのurlのパスが通らなくて困ったときにChatGPTに相談したら一瞬で解決に導いてくれたときの備忘録です。

ChatGPTで画像パスが通らないのを修正してもらうプロンプト例を紹介します。

コピペで使える具体的な指示書と例文を記載しているのでぜひお試しください。

使用するプロンプト
ChatGPTによる回答
- CSSファイルの画像パスを通す
- jsファイルの画像パスを通す

使用するプロンプト

ChatGPTに画像パスを通すアドバイスをもらうためのプロンプトテンプレートは以下です。

WordPressのサイトでcssファイルの画像パスが通らないです。

#プロジェクトフォルダ構成
index.php
resources/styles/index.css
resources/images/service-btn-arrow.svg

#サイトURLトップページ
https://example.com/

#該当のCSS（index.css）
.Btn::after {
  content: "";
  display: block;
  background-image: url("/wp-content/themes/example-theme/resources/images/service-btn-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

プロジェクトフォルダ構成とパスがうまく通っていない該当のCSSを添えて相談するのがポイントです。

ChatGPTによる回答

上記のテンプレートでCSSファイルからの画像パスを通す方法とjsファイルからの画像パスを通す方法を尋ねると、ChatGPTから以下の回答が返ってきました。

CSSファイルの画像パスを通す

わたし

WordPressのサイトでcssファイルの画像パスが通らないです。

#プロジェクトフォルダ構成
index.php
resources/styles/index.css
resources/images/service-btn-arrow.svg

#サイトURLトップページ
https://example.com/

#該当のCSS（index.css）
.Btn::after {
  content: "";
  display: block;
  background-image: url("/wp-content/themes/example-theme/resources/images/service-btn-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

ChatGPT

WordPressのサイトでCSSファイルの画像パスが通らない問題について、解決策を提案します。

相対パスの使用:

現在、絶対パスを使用しているようです。この場合、WordPressのディレクトリ構造に依存するため、パスが正しくない可能性があります。相対パスを使用してみてください。

例えば、以下のように変更します。

background-image: url("../images/service-btn-arrow.svg");

jsファイルの画像パスを通す

わたし

同プロジェクトで、resources/scripts/index.jsで記載している以下パスも通っていないので修正したいです。

/wp-content/themes/example-theme/resources/images/example.svg

※index.jsは、index.phpで読み込みます。

ChatGPT

index.phpでindex.js を読み込んでいるということであれば、WordPressのテンプレートタグを活用して、JavaScriptに正しい画像パスを渡す方法が最適です。

この方法では、PHPの機能を使って画像の正確なパスを取得し、それをJavaScriptに渡すことができます。

以下に手順を示します。

JavaScriptファイルをエンキュー（読み込み）する
functions.php ファイルに以下のコードを追加して、index.js をエンキューします。

function my_theme_enqueue_scripts() {
    wp_enqueue_script('index-script', get_template_directory_uri() . '/resources/scripts/index.js', array(), false, true);

    // ローカル化してパスを渡す
    wp_localize_script('index-script', 'scriptParams', array(
        'imagePath' => get_template_directory_uri() . '/resources/images/example.svg'
    ));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

ChatGPT

このコードは、index.js を読み込み、その後に wp_localize_script を使用して画像のパスを index.js に渡します。

JavaScript内でパスを使用する
次に、index.js ファイル内で、このパスを使用します。

console.log(scriptParams.imagePath);  // これで画像のパスを取得できる

ChatGPT

この方法を使用すると、画像のパスをWordPressのテンプレートタグを使って動的に生成し、JavaScriptに渡すことができます。これにより、WordPressのディレクトリ構造に依存することなく、正しいパスを取得することが可能になります。

わたし

ありがとうございます！正常に画像パスが通るようになりました！