WordPressでのCSS・画像の読み込みパスはこう書く！【保存版】

はじめに

WordPressのテーマ開発をしていると、CSSや画像の読み込み方で戸惑うことはありませんか？
HTMLでは単純にパスを書くだけでよかったのに、WordPressでは少し書き方が変わります。

本記事では、WordPressでCSSや画像を正しく読み込むための基本的な記述方法をまとめました。
テーマ開発時のリファレンスとして、ブックマークしておくと便利です。

CSSファイルの読み込み方法

HTMLでは、次のように書くだけでCSSを読み込めました。

<link rel="stylesheet" href="css/style.css">

しかし、WordPressのテーマ開発ではテンプレートファイルの場所やURL構造が変わるため、このままでは正しく読み込まれません。

WordPressでの書き方(CSS)

<link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/css/style.css">

画像ファイルの読み込み方法

HTMLでは、画像を表示する際に以下のように書きますよね。

<img src="img/sample.png" alt="サンプル画像">

しかし、WordPressテーマ開発では、CSS同様にテーマディレクトリからのパスをPHPで指定するのが基本です。

WordPressでの書き方(画像)

<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/sample.png" alt="サンプル画像">

テーマフォルダに images ディレクトリを作り、画像ファイル（例：sample.jpg）を格納しておくことで、このコードが正しく機能します。

CSSで背景画像を読み込む方法

通常のHTML/CSSで背景画像を指定する場合、以下のようにCSSに記述します。

.hero {
　background-image: url(../img/hero-bg.jpg);
　background-size: cover;
　background-position: center;
}

しかし、WordPressテーマ開発では、相対パスではなく絶対URLで記述することが推奨されます。
そのため、スタイルシート内でPHPを使ってパスを動的に指定する必要があります。

WordPressでの記述方法(background-image)

style.cssに直接PHPは書けないため、背景画像のパスをインラインCSSやstyle属性の中でPHPを使って記述する必要があります。

.hero {
　background-image: url(/wp-content/themes/テーマフォルダ名/img/hero-bg.jpg);
　background-size: cover;
　background-position: center;
}

さいごに

WordPressテーマ開発では、HTMLだけの知識では対応できない部分がいくつかあります。
今回紹介したように、CSSや画像の読み込みにはPHPを使った記述が必要です。

特に以下の点を押さえておくと、トラブルを未然に防げます：

• get_template_directory_uri() を使って正しいパスを取得する
• esc_url() を使ってURLを安全に出力する
• 相対パスではなく、動的な絶対パスで記述する

本記事が、あなたのテーマ開発におけるリファレンス（保存版）として役立てば幸いです。

次回は、JavaScript（jQuery含む）の読み込みについてもまとめていく予定ですので、ぜひそちらもチェックしてください！