jquery WordPress で jQuery を使い画像のパスを指定する場合の注意

CATEGORY: jQuery

2013年4月16日

テーマのテンプレートは、wp-content/themes/themeに置かれているが、ブログで表示される場合は、wp-contentと同じ階層にある、index.phpとして表示される。

このため、相対パスで記述するとリンク切れが発生してしまう。

以下のように jQuery で記述した場合、画像は表示されない。

$('<img src="images/arrow.gif" width="10" height="10" />').insertBefore($('#cat_list ul li a'));

フルパスで記述すると、画像は表示されるようになる。

$('<img src="http://localhost/wp-content/themes/テーマ名/images/arrow.gif" width="10" height="10" />').insertBefore($('#cat_list ul li a'));

画像へのパスの記述が多い場合は、画像のディレクトリまでを変数に入れておけば、変更があった場合に修正がその部分だけですむ。

但し、ローカル環境と実際のサーバーでのパスも異なるため、以下のように記述すると良いかも知れない。

var img_dir = "http://" + window.location.hostname + "/wp-content/themes/テーマ名/images/";

$('h1#top a').css({background: 'url(' + img_dir + 'logo_top-trans.png) no-repeat top left',textIndent: '-9999px'})