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

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

目次

動画

レッスンの準備

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

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

WordPressのルートディレクトリにあるwp-contentの中のthemeswp-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">

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

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

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

あわせて読みたい
WordPress エスケープ処理(esc_html、esc_attr、esc_url、wp_kses等)/ Web Design Leaves
あわせて読みたい
データ検証 - WordPress Codex 日本語版

get_theme_file_uri()とは

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

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

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

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

get_theme_file_uri()get_stylesheet_directory_uri()

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

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テーマ制作レッスンを進めていきましょう!

この記事が気に入ったら
フォローしてね!

この記事を書いた人

Web制作系フリーランスです。岐阜地域のWordPressやCoderDojoのコミュ二ティ活動に参加しています。最近は映像やカメラにも力を入れています。やんちゃ坊主たちの父親もやっています。

目次
閉じる