オリジナルテーマ作成から深掘りするWordPress その２

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回はこれを使ってパスを書き換えます。

この記事を読むことで、テンプレートタグについて理解することが出来ます。
WordPressで予め用意されている関数をつかうことで便利になります。

テンプレートタグ

前回、index.phpにファイル変更した時に stylesheetのパスを以下の様に書き換えました。同様にimgファイルのパスも変更しています。

<link rel=”stylesheet” href=”css/style.css”> を
<link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”> に

imageは
<img src=”images/MV.jpg”> を
<img src=”http://sample.local/wp-content/themes/sampleTheme/images/MV.jpg”> に

このように、長い記述をコピペしたりするわけです。これって、結構面倒ですし、ミスしそうだし。そこで、テンプレートタグの登場です。

get_template_directory_uri()

　テンプレートタグ？なんだろう、それは八百屋で買えますか？こんな風に思いました。いろいろと調べてみるとテンプレートタグとはwpで用意した関数のようです。したがって八百屋では買えないようです。関数とは、面倒な処理をまとめてパッとやってくれるようにしたモノと思ってください。
　前述の例でいうと面倒な処理とは『長ったらしいパスを調べてコピペする』となります。そこで、get_template_directory_uri()というテンプレートタグを使います。今いちどコードを見てみましょう。

• <link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”>
• <img src=”http://sample.local/wp-content/themes/sampleTheme/images/MV.jpg”> 

二つのコードを見比べてみると太字の部分、
http://sample.local/wp-content/themes/sampleTheme
は同じです。この部分を書き出すためにget_template_directory_uri()をつかいます。具体的にはそれぞれ、

• <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>
• <img src=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/iamges/MV.jpg”>

と書きます。少し説明すると、
<?php はphp文であることの宣言で ?> までがphp文となります。テンプレートタグはphpで書かれた関数なので宣言する必要があります。

echo はphpでもともと用意されている関数で出力せよという意味になります。

get_template_directory_uri() は有効化している テンプレート ディレクトリの URI を取得するということです。

以上を踏まえて

• <link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>と書くことで、
• html上では<link rel=”stylesheet” href=”http://sample.local/wp-content/themes/sampleTheme/css/style.css”>と出力されます。

ここまでをまとめると

• テンプレートタグとはwp側で用意した関数
• get_template_directory_uri()はテンプレート ディレクトリの URI を取得する
• テンプレートタグを使用する時はphpの宣言をする

今回はここまでです。次回テンプレートファイルとは。

Follow me!

@miku_nosuke