画像ファイル・JavaScriptファイルへのリンク設定 – [07]WordPressテーマ制作レッスン

このレッスンでは、get_theme_file_uri()というテンプレート関数を使って、画像の掲載やJavaScriptなどのソースコード読み込み部分に利用されているパスを置き換えてみようと思います。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson

Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

github.com

このレッスンでは、上記リポジトリのwp-lesson-07というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-07ディレクトリを設置しましょう。

get_〜でURIを出力するテンプレート関数を利用する場合

これ以降のレッスン内では取り上げていますが、get_theme_file_uri()といったURIを出力してくれるget_〜で始まるテンプレート関数には、サニタイズを行うことをお勧めします。

例えば、

<img src="<?php echo get_theme_file_uri(); ?>/images/portfolio-icon.png">

という形で出力させて終わりではなく、問題がある出力（悪意のあるコードなど）が発生しても、無害化（サニタイズ）処理を加えておくと良いです。

<img src="<?php echo esc_url( get_theme_file_uri() ); ?>/images/portfolio-icon.png">

このような感じです。動画では触れていませんが、ぜひ導入してみてください。

サニタイズについての参考記事

無害化（サニタイズ）については、こちらの記事が参考になりますので読んでみましょう。

get_theme_file_uri()とは

テーマ内にあるファイルへのパスを出力してくれます。

子テーマで利用する場合には、

1. 引数が設定されていなければ、子テーマのフォルダのパスを返します
2. 引数が子テーマにあれば、子テーマのファイルのパスを返します
3. 引数が子テーマになければ、親テーマのファイルのパスを返します。

このような形で利用することができます。

get_theme_file_uri()とget_stylesheet_directory_uri()

これら２つの関数が出力するパスはとても似ています。

get_theme_file_uri()に引数を設定しなかった場合には、get_stylesheet_directory_uri()で取得できるURIを返されます（末尾に/が付かない）。

レッスンで取り上げた箇所に、引数を用いてみると、

<img src="<?php echo esc_url(  get_theme_file_uri( '/images/portfolio-icon.png' ) ); ?>">

このように記述することもできます。覚えておきましょう！

まとめ

このように、get_theme_file_uri()を使ってパスを出力してみました。

厳密に言うと、ソースコード（JavaScript等）の読み込み方法としてはWordPressが推奨する方法ではありません。ですが、このような方法でもソースコードを読み込めてしまうということを学習しておきましょう！

以上でこのレッスンは終わりです。引き続き、WordPressテーマ制作レッスンを進めていきましょう！