WordPress子テーマ作り方と反映されない時のテンプレート設定

WordPressの子テーマの作り方とテンプレートの設定方法を超初心者でもわかるように解説。反映されない時はココをチェック!子テーマは記事が入っていても簡単に作れます。是非トライして子テーマでWordPressのカスタマイズを楽しみましょう。

スポンサードリンク
  

WordPressの子テーマとは

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

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

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

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

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

たとえば、

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

と思ったときには、あなたが選んだテーマ(親テーマと言います)のスタイルシートを直接いじるのではなく、子テーマのスタイルシートの記述を換えます。
すると、書き換えたスタイルシートがウエブサイトに反映されます。

WordPressのフォントを変更してゴシック体にする方法

 

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

WordPressのアップデートはセキュリティーのアップデートもあれば、WordPress本体のアップデートもありますので無視するわけにはいきません。
でも子テーマでカスタマイズしておけば、アップデートがあってもその内容は保持され続けるというわけです。

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

 

〈子テーマが必要な理由=メリット2つ〉

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

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

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

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

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

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

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

1. WordPressのアップデートでデフォルトにならないために。

2. カスタマイズした(書き換えた)ときに比較対照が出来るように。

WordPress子テーマの作り方

早速、子テーマを作りましょう。
簡単です。構えないでOKですよ。

 

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

1. FTPソフト(FFFTPなど)で新規のフォルダを作る。
2. 「style.css」を作り、子テーマフォルダ内に転送する。
3. 「functions.php」を作り、子テーマフォルダ内に転送する。
4. 子テーマを有効化する。

という流れです。

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

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

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

 

〈フォルダ(ディレクトリ)の作り方〉

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

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

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

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

 

■「theme」の中に子テーマのフォルダを作ります。

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

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

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

 

〈style.cssの作り方〉

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

 

■デスクトップ上(ローカルフォルダ)にテキストファイル「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」の順番は関係ありません。

 

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

 

〈functions.phpの作り方〉

3. 「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' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>

※「<?php」「?>」を忘れずに記入すること!
これをしないと子テーマとして認識してくれないので注意してくださいね。
私はこれを忘れたがために、反映されないことに長い時間を費やしました><。

上記のコードはWordPress Codex 日本語版を参考にしています。

私の場合、他で検索したコードでは反映されず、上記のWordPress Codex 日本語版のコードで成功しました。

 

■作成した「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子テーマが反映されない!〉

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

私の体験では、とてもちっぽけな自分のミスでした。
その時の主な原因を下記にまとめましたので参考してみてくださいね。
 

・「style.css 」の「Template」に指定した「親テーマのディレクトリ名」が間違っている。
※大文字・小文字も区別する。

・子テーマのファイル(ディレクトリ)にアップしたテンプレートファイル名が、親テーマのテンプレートファイルと違っている。

※ファイル名は、必ず統一すること。
・WordPressの管理画面上で、「子テーマ」を有効化していない。

・Wordpressの管理画面メニューから「外観」→「テーマの編集」の右上、「編集するテーマを選択」が子テーマになっていない。

うっかりミスもあります。
慌てないでひとつづつチェックしてみてくださいね。

まとめ

子テーマさえあれば、カスタマイズしたいときに、親テーマを子テーマにそのままコピーをして変更していけば良いということです。
やってしまえば簡単、利便性がとても良くなることなので是非トライしてみてください。

注意点は、

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

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

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

スポンサードリンク