WordpressでJqueryを利用する場合

Question

お世話になります。
Word PressでJqueryを使用したいと考えております。
テキスト通り、function.phpに適切にwp_enqueue_scriptを記載し、single.php上、正しくスクリプトを読み込んでいることまで確認ができました。

しかしながら、Jquery上表示させたい画像が、正しく読み込まれず写真が割れたアイコンが出てきてしまいます。

なお、js本体と関連するcssやpngファイルはテーマ内の同じ箇所に設置しており、wp_enqueue_scriptで適切にディレクトリを記載しております。

cssやpngファイルの設置場所に問題があるのでしょうか？
それとも調べたところwp_enqueue_styleも読み込ませたりしなければ、cssやpngを読み込んでくれないのでしょうか。
＊Consoleに置いても
Failed to load resource: the server responded with a status of 404 (Not Found)とXXX.pngがサーバー上ファイルが見つからないという表示が出てまいります。

ちなみに使用しているJqueryは
https://github.com/wbotelhos/raty
という星のレーティングになります。

恐れ入りますが、お力添えのほど、よろしくお願い申し上げます。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。もし解決されていないのであればすいません。

Answer 1

wp_enqueue_styleも読み込ませたりしなければ、cssやpngを読み込んでくれないのでしょうか。

その通りです。

Comments

[SugiuraY]

ご回答有難うございます。wp_enqueue_styleでcssを読み込まなくても何故か動かす事ができました。使用しているjqueryの仕様なのかわかりませんが。。ただ、pngファイルをルートディレクトリに置かなければ読み込まないという不思議な現象のため、失敗していたようです。

[kei344]

質問文にてリンクが貼っていないので、見ていませんでしたが、CSSはWebフォントを使った表示の時にしか使わないんですね。

> pngファイルをルートディレクトリに置かなければ読み込まないという不思議な現象

Options の starHalf などに絶対パスで指定しないと下層のページはで使えないと思いますよ。

[SugiuraY]

Kei344様
ご教示を頂き、有難うございます。絶対パスを指定して試してみようと思います。
また、ご存知であれば最期に一点だけ教えていただきたいのですが、
wp_enqueue_style( 'abcd-style', get_stylesheet_uri().'/Test/theme/js/abcd.css',array());
これでJQueryに関連するabcd.cssファイルを読み込ませようと思ったのですが（仰るとおり結果的に不要であったのですが）、読み込まれずHTMLのヘッダーlink relのsrcを見ると
/Test/theme/style.css/js/abcd.css
となっており、なぜか存在しないstyle.cssのパスを通す指定となってしまいます。
実際には.css拡張子なのでディレクトリではなくテーマのデフォルトのstyle.cssを強制的に参照（した上で取ってつけたように、後ろにenqueueで指定したパスがついてくる）するような仕組みになってしまっているように思われます。wp_enqueue_styleの指定の方法等に問題があるのでしょうか。
今後、外部のcss等を読み込ませる上で是非、勉強をさせて頂きたく、重ねて申し訳ございませんが宜しくお願い申しあげます。

[kei344]

get_stylesheet_uri はスタイルシートまでのフルパス（スタイルシート含む）を取得するものなので、get_stylesheet_directory_uri を使用すればよいと思います。

【get_stylesheet_directory_uri() | Function | WordPress Developer Resources】
https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/

[SugiuraY]

ご回答を、頂き誠に有難うございます。なるほど、理解を致しました。
お力添え頂きましたことを重ねて御礼申し上げます。