はじめに

・WordPress初心者の方
・WordPressのテーマで、画像やCSSが反映さない方

テーマに、画像やCSSが反映されない理由

・テーマファイルは、WordPressディレクトリの**「wp-content/themes/~」**に置くため、画像やCSSのファイルパスが切れて反映さません。なお、相対パスでも反映されないので注意が必要です。

※画像とCSSファイルのパスと、WordPressで認識されるパスの詳細

画像、CSSのパス	WordPressで認識されるパス
wp-content/themes/自作テーマ/images/画像.jpg	wordpress/images/画像.jpg
wp-content/themes/自作テーマ/css/style.css	wordpress/style.css

テーマの画像と、CSSファイルのパスを修正

WordPressに認識されるパスを記述するには、WordPressの独自の関数である**get_template_directory_uri()**を使用します。

**get_template_directory_uri()は、使用しているテーマのディレクトリのURLを返します。パラメータはなしになります。有効化しているテンプレートのみに有効で、文末には/（スラッシュ）**が付かないので注意が必要です。

WordPresの「style.css」について

WordPressのテーマを使用する際は、必ず**style.css**を作成してください。また、style.ccsを記述する際にはテーマの名前を必ず記述します。

※以下を参考にしてください。

style.css

/*
Theme Name : ここにテーマの名前
*/

/*
ここに、CSSを記述
*/

では、実際に簡単なテーマのサンプルコードを書いていきます。

######サンプルコード

ディレクトリ構成

※画像のファイルパス
wp-content/themes/qiita_wp01/images/wordpress.jpg

※CSSのファイルパス
wp-content/themes/qiita_wp01/style.css

index.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>WordPressパスの修正</title>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
</head>
<body>
	<h1>WordPress</h1>
	<img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.jpg">
</body>
</html>

style.css

/*
Theme Name : WordPress
*/

h1 {
	color: blue;
	text-align: center;
}

img {
	width: 100%;
}

##まとめ

・WodPressで画像やCSSファイルのパスを修正する場合は、**get_template_directory_uri()**を使用。

・テーマを作成する際には、必ず**style.css**を作成する。

・**style.css**には、テーマの名前を必ず記述する。