wordpressの復習として、wordpressのテーマ作成について何回かにわたって書いていこうと思います。

今回はテーマの保存場所と必須ファイル、それからCSSの適用方法を解説します。


テーマの保存場所

wordpressのテーマは

【wordpressが保存されているディレクトリ】/wp-content/themes/

のディレクトリに保存します。

【】内については環境によって変わってきます。

例として、Xserverを使っている場合だと

ドメイン名/public_html/wp-content/themes/

が、テーマを保存するディレクトリになります。


テーマのディレクトリと必須ファイルを作成

themesディレクトリにテーマのファイルを入れるためのディレクトリを新たに作成します。名前はなんでもOKです。

themesディレクトリ内に「yanalog2」を作成しました。

続いて、テーマとして適用させるために必要最低限のファイルを作成します。作成するのは次の2つです。

index.php
style.css

名前が違っていたり、どちらかのファイルが足りないと「壊れているテーマ」として表示されます。名前まで一致させるようにしてファイルを追加しましょう!

index.phpが存在しない場合。「壊れているテーマ」になっています

テーマが作成できたら、「有効化」してみましょう!サイトを表示すると真っ白な画面になりますが、次の項目で行うテストで文字が表示されれば問題ありません。


CSSを適用する

試しに何か出力してみましょう!いつものようにhtmlを書いて、<link>要素でCSSを読み込み、”hey”を赤色で出力してみます。

上のコードの出力結果。heyは表示されましたが、文字色が赤になっていません。

…赤で出力する予定の”hey”にスタイルが適用されていないようです。

これはCSSへのパスが不適切であることが原因になっています。<link>要素内で指定している

href=”style.css”

を、以下のように書き換えます。

href=”<?php get_template_directory_uri()?>/style.css”

変更できたら、ページを開いてみましょう!文字色が赤に変わっているはずです。

今度は赤色になっています!

これで、CSSを適用することができるようになりました。これからヘッダーやフッターに切り分けていくのですが…続きはまた今度!

おまけ:get_template_directory_uri()の意味

今回CSSファイルへのパスの記述に使用した<?php get_template_directory_uri()?>は、themesディレクトリまでのパスを取得しています。

試しに、”hey”が赤色で表示されているページで右クリックをして、「ページのソースを表示」を開いてみましょう。

phpで記述した部分が、テンプレートのパスに置き換わっているのがわかります。