テーマディレクトリに置いた画像やCSSファイルなどのURLを取得することはよくあります。
先日、子テーマ内においたJavaScriptを読み込もうとget_template_directory_uri() を使ったところうまくいかず…、
いろいろ調べたことをまとめました。
目次
テーマディレクトリまでのURLを取得する
まずは一般的なテーマディレクトリまでのURLを取得する方法。
get_template_directory_uri() を使います。
get_template_directory_uri() は、
- 親テーマ
- 子テーマを使っているときは親テーマ
いずれかのテーマディレクトリURLを取得します。
<?php echo get_template_directory_uri(); ?>このように入力すると、
https://ほにゃらら.com/wp-content/themes/親テーマ
と出力されます。
子テーマのテーマディレクトリまでのURLを取得する
次に、子テーマのテーマディレクトリまでのURLを取得する方法。
get_stylesheet_directory_uri() を使います。
get_stylesheet_directory_uri() は、
- 親テーマ
- 子テーマを使用している場合は子テーマ
のテーマディレクトリURLを取得します。
なので、子テーマを有効にしているときに、
<?php echo get_stylesheet_directory_uri(); ?>このように入力すると、
https://ほにゃらら.com/wp-content/themes/子テーマ
と出力されます。
子テーマに置いた画像やJSファイルを子テーマ自身から読み込むときは、こちらのget_stylesheet_directory_uri() を使うと良さそうです！
末尾にスラッシュをつけること！
上でも書いた通り、出力されるコードには
https://ほにゃらら.com/wp-content/themes/子テーマ
このように末尾にスラッシュがつきません。
なので、例えばテーマディレクトリ内に置いたimgフォルダ内のimage.jpgを見にいくとき、
<img src="<?php echo get_template_directory_uri(); ?>/img/image.jpg">このように、スラッシュを忘れずに記載しましょう！
コメント