はじめに｜なぜパスの指定方法が重要なのか
WordPressで画像が表示されない、CSSが反映されない——そんなトラブルの原因は「パスの指定ミス」であることが多いです。特に初心者の方は、HTMLサイトで慣れ親しんだ「相対パス」の感覚のままWordPressを扱ってしまい、思わぬバグに悩まされがちです。
この記事では、WordPressにおける「相対パス」と「絶対パス」の違いや使い分け方、そしてよく使う関数についてわかりやすく解説します。
パス指定の基本｜相対パスと絶対パスとは？
相対パスとは
相対パスは、現在のファイルからの位置関係で指定する方法です。
<img src="./images/logo.png" alt="ロゴ">この場合、現在のファイルと同じ階層にある images フォルダの中の logo.png を指定しています。
絶対パスとは
絶対パスは、ドメインからの完全なURLを指定する方法です。
<img src="https://example.com/wp-content/themes/yourtheme/images/logo.png" alt="ロゴ">WordPressではこのような絶対パスが基本であり、動的なページ生成や構造が複雑な場合でも安定してリソースを読み込めます。
WordPressが絶対パスを使う理由とは？
理由1：複雑なディレクトリ構造
WordPressでは、テーマ、プラグイン、メディアなどがそれぞれ別のディレクトリに格納されているため、相対パスだとパス解決が不安定になることがあります。
理由2：動的なURL生成
投稿ページやカスタム投稿など、WordPressは1つのテンプレートで複数のURLを生成します。相対パスを使っていると、ページの階層によってCSSや画像が読み込まれないことがよくあります。
理由3：パーマリンクとの相性
パーマリンク構造が変更された場合にも、絶対パスを使っていれば影響を受けにくくなります。
よく使うWordPressのパス系関数まとめ
以下は、WordPressでよく使われるパス取得関数とその用途です。テンプレート内で使う際は、セキュリティの観点から必ず esc_url() 関数を併用して出力をエスケープしましょう。
<!-- 親テーマのURLを取得 -->
<?php echo esc_url( get_template_directory_uri() ); ?>
<!-- 子テーマのURLを取得 -->
<?php echo esc_url( get_stylesheet_directory_uri() ); ?>
<!-- サイトのホームURLを取得 -->
<?php echo esc_url( home_url() ); ?>
<!-- WordPressの設置ディレクトリURLを取得 -->
<?php echo esc_url( site_url() ); ?>
<!-- メディアファイルのURLを取得 -->
<?php echo esc_url( wp_get_attachment_url( $attachment_id ) ); ?>🔐 エスケープ処理とは？
esc_url() は、出力するURLに悪意あるコードが含まれていないかをチェックして、HTMLで安全に表示できるように加工する関数です。
例：
<a href="<?php echo esc_url( home_url() ); ?>">トップページへ戻る</a>このように、安全にURLを出力するには esc_url() を通すのが基本です。<img> の src 属性や <link> の href でも同様に使いましょう。
相対パスを使いたい場合の注意点
どうしても相対パスを使いたい場合は、次のような点に注意しましょう。
/single/や/page/などのURL階層が深いページではNG- テンプレート階層によっては
../のような記述が必要になり、可読性が下がる - テスト時に表示されても、本番環境で表示されないことがある
基本的には、相対パスは静的HTMLでのみ使用推奨と考えましょう。
安全な画像・CSS読み込み方法の具体例
画像の読み込み
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ">CSSの読み込み
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">関数で短縮化する例
<?php
function img($path) {
echo get_template_directory_uri() . '/images/' . $path;
}
?>
<img src="<?php img('logo.png'); ?>" alt="ロゴ">まとめ｜パスの理解がサイト構築の安定につながる
WordPressでの「相対パスと絶対パスの違い」は、地味ながら非常に重要な知識です。特に画像やCSS、JSが正しく読み込まれない場合は、パスの指定を真っ先に疑いましょう。
WordPressでは基本的に get_template_directory_uri() などの絶対パス系の関数を使うことで、サイト全体の安定性が向上します。
初学者の方は、まずは「絶対パスが基本」であることをしっかり押さえて、テンプレート制作に取り組んでみてください！