web制作のしおり

日々の学習をアウトプットします。

96.独自のテーマを作る ~テンプレートタグを使おう~

本日も変わらず独自テーマについてです。

ゆっくりすぎますが、やっていきます。

 

index.phpにHTMLを書く

index.phpファイルにHTMLを書きます。

どんな内容かと言えば、

index.htmlに書く内容です。

まんまですね笑

 

ということで、自身が表示したい「静的ページ」をphpに記述するわけです。

 

ただし、ここで問題があります。

 

テキストだけの真っ白なサイトが表示される

なぜテキストだけのページになるのか?

 

それは、CSSや画像のパスが通っていないからです。

テーマフォルダの中に画像を入れていたとしても、表示されません。

 

例えば、wp-contentの中のthemesフォルダ内の独自テーマフォルダの中のimgフォルダの中のtest.pngが表示されない。

じゃあどうするか?

<img src="wp-content/themes/testtheme/img/test.png" alt="">

をHTMLに記述すればOKです。

と言いたいところですが、これではHTMLをべた書きするのと何も変わらないですよね。しかも複数の画像を使用する場合に毎回この長さを書くのは億劫すぎます。

 

ここで登場するのが以前にも書いたWordPressの独自関数です。

WordPress関数のことを「テンプレートタグ」と呼ぶこともあるそうです。

 

テーマまでのパスを取得する

テーマまでのパスを取得するテンプレートタグは

get_template_directory_uri()

です。

で、どうやって使うかと言えば

Wordpressの関数といってもphpですので、

<img src="<?php echo get_template_directory_uri() ?>/img/test.png" alt="">

こんな感じで、テーマまでのパスを取得して、それをechoで文字列として出力しています。

このテンプレートタグを使うことで、テーマまでのパスを自分で調べることなく指定できました。ミスもなく、便利。

 

これってテーマ名が変わっても大丈夫ってことですよね。

 

そして、テーマまでのパスを取得するってことはテーマが切り替わってもテーマ名は自動で変えてくれるってことですよね。

これは何か面白いことがありそうな予感がしますね。

 

テンプレートタグ便利。

 

今日のまとめ

  • テーマはパスを通さないと画像が表示されず、CSSも適用されない
  • その為にテーマまでのパスを取得する関数がWordPressで用意されている
  • そうした関数のことをテンプレートタグと呼ぶ
  • get_template_directory_uri()は名前の変更等に対応できる保守性高め

 

本日はテーマ、特にテンプレートタグについて学習しました。

なかなかまとまった時間がとれず進みが遅いですが、あきらめずにやっていきます。

 

では、また。