WordPress子テーマ作り方と反映されない時のテンプレートcss対処法

WordPressの子テーマの作り方とテンプレートの設定方法を超初心者でもわかるように解説。

反映されない時はココをチェック！

子テーマは記事が入っていても簡単に作れます。

変更したcssが反映されない時の対処法も含めて、具体的にお伝えします。

WordPressの子テーマとは

お恥ずかしい話ですが、長い間、WordPressのテーマをインストールして記事を入れてしまったら子テーマは作れないとばかり思っていました。

この程度の知識しかなかった私ですが、実際子テーマを作ってみると、WordPressr利用者のみんなが言うように、子テーマがあることに大きなメリットがあることがわかり、今では普通に子テーマを使えるようになりました。

子テーマがあるとダメ元でカスタマイズにチャレンジできるので、私の場合、WordPressにに対するビビリ感を克服することができました。

WordPressの超初心者さんにも理解できるように、私のつまづいたところも注意点として挙げながらご説明していきますね。

子テーマとは

WordPressの子テーマっていうのは、親テーマの内容を定義しなおして、上書き（オーバーライド）することができるテーマのことをいいます。

つまり、親テーマは大元、子テーマはカスタマイズ専用といったイメージです。

たとえば、

「フォントを変えたいなー」

と思ったときには、あなたが選んだテーマ（親テーマと言います）のスタイルシートを直接いじるのではなく、子テーマのスタイルシートの記述を換えます。

すると、書き換えたスタイルシートがウエブサイトに反映されます。

◇ フォントの変更についてはこちらをどうぞ。
WordPressのフォントを変更してゴシック体にする方法

なぜ子テーマでカスタマイズするの？

なぜ子テーマでカスタマイズするのかというと、親テーマのファイルを直接書き換えると、そのテーマのアップデートの時にファイルが機械的に書き換えられてしまうからです。

ということは・・・
カスタマイズしたところが消えてしまうんですね。

WordPressのテーマのアップデートはセキュリティーのアップデートもあれば、WordPress本体のアップデートもありますので無視するわけにはいきません。

でも子テーマでカスタマイズしておけば、アップデートがあってもその内容は保持され続けるというわけです。

これは、「子テーマ」を利用する最大のメリットになります。

子テーマが必要な理由＝メリット２つ

上述のように、WordPressのアップデートに備えるというのも子テーマが必要な理由のひとつですが、元の内容を確認する上でも親テーマ・子テーマと存在すると比較が出来て便利です。

ご存知のように、WordPressはテーマ内のソースコードを読み込むことでWebサイトを生成しています。

なので、テーマ内のソースコードを書き換えることで、Webサイトのレイアウトを変更することができます。

ただ、それを親テーマで直接すると元の内容を確認することができなくなってしまいますよね。

自分で変更したレイアウトがNGで元に戻したいと思っても、元のソースコードがないと復元するのはとても面倒臭いです。

テキストにマザーを保存してコピーで書き換える方法もあります。

ですが、その方法を長く選んでいた私の体験から言うと、いちいちテキストにマザーを保存してコピペを書き換えて更新ボタンを押すよりも、子テーマを作るほうが圧倒的に使い勝手が良かったです。

もっと早く子テーマに踏み切れば良かった！

ということで、子テーマが必要な理由＝メリットは以下の２つになります、

WordPress子テーマの作り方

では、早速子テーマを作りましょう。

簡単です。

構えないでOKですよ。

子テーマを作るには、2つのファイルとそれらを格納するディレクトリが必要となります。

という流れです。

1.　新規のフォルダ（ディレクトリ）を作る

では、最初に専用のディレクトリを用意しましょう。

「ディレクトリ」とは ファイルを分類整理するための入れ物のこと。

厳密にはディレクトリとフォルダは意味が異なるんですが、ここではわかりやすくするため、フォルダを作ると思ってください。

フォルダ（ディレクトリ）の作り方

1.　FTPソフト（FFFTPなど）で新規のフォルダを作ります。

まず、FTPソフトのあなたのWordPressを設置したドメインのフォルダを開きます。

「public_html> wp-content > theme」と進み、 「theme」を開きます。

「theme」の中にはあなたがアップロードしたテーマやWordPressのデフォルトテーマが入っています。

■「theme」の中に子テーマのフォルダを作る

※子テーマという名前ですが、親テーマや他のテーマと並列に配置します。

※作成するフォルダの名前（子テーマの名前）は「（元のテーマ名）_child」としておくと後で見てもわかりやすいです。

※子テーマの名前に空白があるとエラーが出るので、ハイフンなどで空白を作らないように注意です。

2.　「style.css」を作る

「style.css」を作り、子テーマフォルダ内に転送します。

1.　
まず、デスクトップ上（ローカルフォルダ）にテキストファイル「style.css」を作ります。

※テキストの拡張子が.txtと表示される場合は.cssに変更します。

次に、作成した「style.css」に以下のコードを記入してください。

子テーマとして認識してもらうコードです。

/*
Template:元のテーマ名
Theme Name:子テーマ名
*/

※コメントアウトの「/*」「*/」も忘れずに記入すること。

コメントアウトをザックリ簡単に言うと、書いてあるソースコードに対するコメントのことです。

コメントアウトをしておくと、あとからどんな記述だったかわかるので便利です。

ちなみに、このサイトはWordPressのオリジナルテーマtwentysixteenを使っているので以下のようにしています。

/*
Template:twentysixteen
Theme Name:twentysixteen_child
*/

「style.css」に記入する項目を検索すると、「Theme URI」・「Description:」・「Author」・「Version」などを記入する例がありますが、「Theme Name」と「Template」が必須項目で、あとは無くてもかまいません。

私はややこしくなるのを極力排除したかったので「Theme Name」と「Template」だけにしています。

私の体験上、「Theme Name」と「Template」の順番は関係ありません。

2.
作成した「style.css」を子テーマフォルダ内に転送します。

3.　「functions.php」を子テーマに転送する

「functions.php」を作り、子テーマフォルダ内に転送します。

デスクトップ上（ローカルフォルダ）にテキストファイル「functions.php」を作ります。

※テキストの拡張子が.txtと表示される場合は.phpに変更します。

作成した「functions.php」に以下のコードを記入してください。

子テーマとして認識してもらうコードです。

<?php //子テーマで利用する関数を書く
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}

作成した「functions.php」を子テーマフォルダ内に転送します。

そうすると親テーマのスタイルが小テーマに引き継がれます。

子テーマの有効化

「style.css」と「functions.php」の転送が終わったら子テーマの出来上がり。

あとは子テーマを有効化するだけです。

4.　子テーマを有効化する

子テーマを有効化します。

WordPressの管理画面メニューから「外観」→「テーマ」を選択します。

テーマ一覧画面が開くと「子テーマ」が追加されているのを確認してください。

有効化するとWordpressの公開ページを表示する際、作成した「子テーマ」が読み込まれる事になります。

wordpress子テーマのテンプレート設定のやり方

子テーマが有効になりましたね。

次は、各テンプレートファイル（header.phpやfooter.php、single.phpなどの）の設定方法について、解説していきます。

その前に、

「テンプレートファイルって何？」

って状態でしょうか。

テンプレートファイルというのは、WordPressのテーマを構成している「index.php」や「single.php」、「page.php」などのファイルのこと。

テンプレートファイルには「header.php」や「footer.php」のように、すべてのページ内で使用できるファイル（パーツテンプレート）と、「single.php」や「archive.php」のように、ある条件の下でのみ使用されるファイルがあります。

では、子テーマに必要なテンプレートファイルの設定方法に入っていきますね。

テンプレートファイルの設定方法

カスタマイズしたいファイルを、「子テーマ」のファイルにアップします。

例えば、「header.php」をカスタマイズしたいのであれば、「header.php」を新規作成し、子テーマにアップします。

親テーマの「header.php」をダウンロード。

一旦デスクトップなどで保存したものを子テーマのフォルダにドラッグアンドドロップするのがわかりやすいと思います。

※このときファイル名は、必ず親テーマのモノと同じ名前を定義します。
「header.php」なら「header.php」のままです。

「header.php」や「footer.php 」などのテンプレートファイルは、「style.css」と一緒で、親テーマのファイルを、全上書きします。

つまり、

「同じ名前のテンプレートファイルがある場合、子テーマが優先されて親テーマは無視される」

ということです。

それゆえ、変更したいテンプレートファイルは親テーマから子テーマへコピーしてカスタマイズするわけです。

親テーマの内容を全コピー、そしてカスタマイズしたい部分だけ、変更・追記していくという流れになります。

WordPress子テーマが反映されない時の対処法！

「子テーマ」を作成したのに反映されていない！

私の体験では、とてもちっぽけな自分のミスが殆ど。

その時の主な原因を下記にまとめましたので参考にしてみてくださいね。

うっかりミスもあります。

慌てないでひとつづつチェックしてみてくださいね。

デザインの変更が反映されない！

デザインの変更が反映されない時は、以下の点をチェックします。

1.　CSSのコード間違い

コピペしてきたコードなどの場合、ちゃんとコピペできていないこともあります。

「<」や「 >」が切れていたり、全角が入っていることもあります。

自分でアレンジしたときに、大文字や小文字の変換間違いをすることもあるので、もう一度、コードを見直してみてください。

2.　キャッシュが残っていないかどうか

コードを見ても、リロード（更新）をしても、読み込まれない場合は、他のブラウザで見てみます。

他のブラウザで見て、きちんと表示されていれば、キャッシュの問題です。

履歴をクリアすれば解決する可能性大ですが、そうするとcookieが消えてしまうので面倒なことに・・・

自分が普段よく使っているサイトのIDやパスワードも消えてしまうので、もう一度入れ直してログインしなければならなくなります。

そんな時に試してみてほしいのが、これからご紹介する方法です。

わたしは普段Chromeを使っているので、Chromeの説明になります。

■ キャッシュの削除をせずに更新する方法

やり方は超簡単です。

リロードしたいページのどこでも良いので右クリック。

すると「検証」という項目がでますので、そこをクリックして検証画面（デベロッパーツール）を開きます。

検証画面を開いたら、ブラウザの左上のリロード（更新）ボタンを長押ししてください。

長押しすると、以下の3項目が出てくるので、

• 通常の再読み込み
• ハード再読み込み
• キャッシュの消去とハード再読み込み

真ん中の「ハード再読み込み」をクリックします。

ハード再読み込みは、キャッシュ機能を無視してサーバーから強制的にページをダウンロードする方法のようです。

わたしは、履歴をクリアしなくても、この方法でうまくいったことが何度もあります。

それでもダメな場合は、一番下の「キャッシュの消去とハード再読み込み」を試してみるといいと思います。

キャッシュはクリアされてしまいますが、自分で試せる最終手段。

「ハード再読み込み」でうまくいくといいですね。

WordPress子テーマ作り方と反映されない時のテンプレートcss対処法 まとめ

子テーマさえあれば、カスタマイズしたいときに、親テーマを子テーマにそのままコピーをして変更していけば良いということです。

やってしまえば簡単、利便性がとても良くなることなので是非トライしてみてください。

注意点は、

1.
アップデート時のトラブルを避けるため、親テーマのテンプレートファイルは直接変更しないこと。

2.
カスタマイズは子テーマ内で完結させること。

この2点は心に留めておいてくださいね。

子テーマができると、興味のあるカスタマイズに気楽にチャレンジできますよ。