「get template directory uri、get stylesheet directory uri」関数の違いは親テーマと子テーマのディレクトリURIだよ

WordPressでカスタマイズしてるときget_template_directory_uriなど見たことありますよね。これは親テーマのURIを取得する関数で、子テーマ内ファイルを読み込みたいときget_stylesheet_directory_uriを使わないと反映されないんです。

親テーマのディレクトリまでのパスを取得してるか、子テーマのURIを取得してるかの違いで、コードを間違うとアップしたディレクトリ（ファイルやフォルダの保管場所）が変わって読み込まなくなります。

親テーマや子テーマ内のimagesフォルダに画像ファイルを入れ表示させるとき、どのようにパスを書くか、どうやってそのコードを使うかなど、それぞれ見てみましょう！

WordPress関数get_template_directory_uriは親テーマのURIを取得

親テーマを保存してるディレクトリ（場所）までのパスを取得するURI、その関数はget_template_directory_uriです。

親テーマ（テンプレート）は、どんなパスになるか見てください。

使用中テーマの親テーマ（Gush2）のディレクトリ。

1. bibabosi-rizumu.comフォルダ
2. wp-contentフォルダ
3. themesフォルダ
4. 使ってるテーマの親テーマ『例：gush2』

ドメイン「http://bibabosi-rizumu.com/」赤字の部分の、wp-content/themes/gush2のテンプレートを読み込みます。

• サーバーによってドメインとwp-contentのあいだにディレクトリ（階層のフォルダ）が存在する場合も同じ。

Stinger5の『親テーマ』を使ってる場合は、get_template_directory_uriの取得は下記になります。

使ってる親テーマStinger5のディレクトリを取得する

1. bibabosi-rizumu.comフォルダの
2. 使ってる『親テーマ』Stinger5

Stinger5のテンプレートファイルを読み込みますよ＾＾って意味になります。

参考関数リファレンス/get template directory uri

<?php echo get_template_directory_uri(); ?>スラッシュ/以下の画像ファイルの指定法とHTML

gush4親テーマで画像を使用する場合、『親テーマのパスを取得する関数』/親テーマ直下『images』フォルダ/その直下『hoge.png』とディレクトリ毎にスラッシュ『/』で区切って、HTML内に書いてあげます。

<?php echo get_template_directory_uri(); ?>/images/hoge.png

imagesフォルダ内にアップしたsorry-404.jpgのパス

親テーマ直下には他にjsフォルダもあるけど。imagesに入ってるsorry-404.jpgを指定するよって事で、/images/sorry-404.jpgなどと指定します。（後述の子テーマでより詳しく説明）

<img src="<?php echo get_template_directory_uri(); ?>/images/sorry-404.jpg" alt="ごめんなさい" />

画像にはalt（代替テキスト）をつけてください。HTMLで画像のサイズを指定もできますが、割愛します。

この画像URLは「https://bibabosi-rizumu.com/wp-content/themes/gush4/images/sorry-404.jpg」となるワケです。

親ディレクトリを取得する関数の後ろに『/images/sorry-404.jpg』を入れることで、この場合画像が表示される仕組みなので、トップに戻るボタン実装にも使えますね。

<?php echo get_template_directory_uri(); ?>/以下jsファイルを読み込む場合のHTML

jsファイルを読み込む記載を例にあげてみますね。

親テーマ内の直下jsフォルダ内gush.jsファイル

画像のように、使用中の親テーマ直下の『jsフォルダ内』gush.jsを読み込見たいとき下記のように書きます。

"<?php echo get_template_directory_uri(); ?>/js/gush.js"

1. 使ってる親テーマを指定した関数
2. js内の
3. gush.jsファイル

HTMLは下記のように書き込みます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/gush.js"></script>

子テーマの『images』フォルダに画像ファイルをアップしても表示されない

子テーマにアップしたものを表示したいのに、HTMLにget_template_directory_uriと書いてると自動的に親テーマ内ファイルを読み込むから、子テーマにアップした該当ファイルは表示されません。

LINKブログの画像が表示されない5つ＋αの原因！リンク切れの対処法

どうすれば、子テーマのimagesフォルダに入れた該当ファイルを読み込むことができるのか。それはコードを少しだけ変えたら子テーマのディレクトリURIを取得できるんで次、書いていきますねっ。

WordPress子テーマURIを取得する関数get_stylesheet_directory_uriを使って表示させる方法

関数get_stylesheet_directory_uriは、ワードプレスの子テーマを取得するので、下記のようなパスを指定し取得します。

1. bibabosi-rizumu.com
2. wp-content
3. themes
4. Gush4-Child

http://1.ドメイン/2.wp-content/3.themes/4.使用中テーマの子テーマ

こうして使用中テーマの子テーマのパスを取得するワケです。phpにget_stylesheet_directory_uriを下記のように使うと表示されます。

<?php echo get_stylesheet_directory_uri(); ?>

参考関数リファレンス/get stylesheet directory uri

子テーマのimagesフォルダにアップした画像ファイルを読み込みたいとき

子テーマのimagesフォルダ内にアップした画像を読み込見たいとき、どうやってget_stylesheet_directory_uriを使用し、該当の画像を表示させるのか！？

例えば、eyecatch-dummy.jpgファイルを指定し表示させる工程を書きますね。

画像のパス：子テーマ/images/該当の画像ファイル名

『images』フォルダ内の『eyecatch-dummy.jpg』を表示させたいので、HTMLに下記のように指定します。

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/eyecatch-dummy.jpg" />

<?php echo get_stylesheet_directory_uri(); ?>は、子テーマのURIを取得して表示させるので、それ以下のパス/images/eyecatch-dummy.jpg指定すればOK！

これをURLであらわすと「https://bibabosi-rizumu.com/wp-content/themes/Gush4-Child/images/eyecatch-dummy.jpg」ってなるんですね。

実際表示される画像

• 使いたい画像ファイル名と拡張子を間違うと画像は表示されないので関数やパスはキチンと記入してくださいねっ。

さいごに

使ってる子テーマのimagesフォルダに画像をアップしたら反映されなくって、原因は親テーマのパスを指定する『get_template_directory_uri』を書いてたからでした。

• 子テーマ使用時はtemplateの部分をstylesheetに変更しないとダメ

カスタマイズを色々試してると、何でぇ？と頭を抱えてしまうときがあります。でも原因が解るとスッキリ！

このページで疑問が解消され、表示されたぁ！わかったよぉ～♪などのご報告をお待ちしてますねっ＾＾

かうたっくでした！