2016/10/27

「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です。

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

親テーマの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親テーマのuri

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

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

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

ポイント

ドメインやテーマが変わってもこのコードを書いてたら、誰でも・どのサーバーでも自動的に、使用中の親テーマを取得するWordPressのコード。

参考関数リファレンス/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

Gush4の下層の様子

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

get_template_directory_uriのその下層の様子を説明

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

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

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

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

ポイント

読み込みたいファイルが、『親テーマを基準』に『どのフォルダ/どのファイル』とスラッシュ『/』を使って書いたらOK!

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

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

親テーマのファイルまでのパス

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

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

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

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

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

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

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

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

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

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

gush4-child子テーマのパス

  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を下記のように使うと表示されます。

ポイント♪
  • WordPressのこの関数はドメインやテーマが変わっても使用中の子テーマを取得。
  • 親テーマを使っていても、子テーマを読み込む。
  • 子テーマを表示するには、<?php echo get_stylesheet_directory_uri(); ?>を使う。次に続く…

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

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

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

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

子テーマ内以下のディレクトリとファイルを指定

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

子テーマのディレクトリURI、その下層ファイルを選択する様子

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

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

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

ポイント♪

<img src=”★ここに画像のURL★” alt=”画像の説明” />と書くと、きちんと表示されるのと同じことです。

  • <?php echo get_stylesheet_directory_uri(); ?>
    上のコードは、画像のURL:子テーマまでのパスと同じ。http://ドメイン/wp-content/themes/使用中テーマの子テーマ
  • その後ろは、子テーマディレクトリを基準にした、表示させたい画像のパスをいれる。/images/eyecatch-dummy.jpg

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

imgタグ内に src=”<?php echo ~略~ hoge.jng“このように入れたらOK!

eyecatch-dummy

実際表示される画像

さいごに

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

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

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

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

かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー