問題
HTMLで作成していたサイトをWordPress化するために、順番にテンプレートタグで置き換えていく作業を一通り終わらせサイトを表示してみると…
部分的に画像が表示されていない？？表示されていのは、どうもJavascript（jQuery）ファイルで定義している画像…
検証ツールで色々みてみると、どうも画像ファイルを呼び出せていないことが判明！つまりはパスが通っていないことやん…
解決
通常のHTMLでサイトを構築っしていく場合、ファイルのパスは相対パスで書きますが、WordPressの場合は、絶対パスで書く必要があります。ただし、WordPressの場合、使用するテーマによってフォルダが変わるので、使用してる（有効になっている）テーマのURIを取得しないとダメなので、
「get_template_daairectory_uri()」
を使いますが、jsファイルでは使うことができません。
そこで色々と調べたところ…
1. 変数を使って「get_template_daairectory_uri()」の値を代入
2. jsファイル内で変数を使ってパスを定義
という手順でOKということがわかりました。
具体的には、まずは、大元のphpファイルのjsの記述の部分で、問題のjsファイルの読み込みを定義している部分の前に…
<script> var path ="<?php echo get_template_directory_uri(); ?>"; </script>
「path」（変数名はなんでもOK）という変数を定義し、「get_template_daairectory_uri()」を代入します。
jsファイルの画像ファイルのパスの部分を変数を使って絶対パスに書き換えます。
' ' + path + '/img/image1.jpg ' （元は相対パスだったので ' img/image1.jpg ' ）
これで無事表示されるようになりました。
リンク
コメント