はじめに
・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**には、テーマの名前を必ず記述する。