WordPressの基本! 子テーマの作成方法 | WP カスタマイズ

wordpress_logo01

WordPressをカスタマイズするのであれば子テーマの作成は基本になります。

簡単に言ってしまえば、親テーマのファイルとは別の場所にカスタマイズするファイルを確保してそのファイルを編集をしていきます。

もし子テーマを作らずに親テーマのファイルをカスタマイズしていくと、WordPressのテーマをバージョンアップした際にCSSやPHPファイルが上書きされてしまいます。

カスタマイズした内容がリセットされ、「またやり直し」とならないように、子テーマを作っておきましょう。

スポンサーリンク

子テーマについて

具体的にはカスタマイズする場合、変更していくファイルは、基本となるstyle.css やfunctions.php、header.phpなどの各テンプレートファイルになります。

そのような変更したいファイルは、子テーマとして新たに作ったフォルダの中に集めておくことで、ブラウザで表示する際に、親テーマのデータと合わせて読み込まれます。

例えば親テーマを「Twenty Fourteen」とした場合。
テーマのTwenty Fourteenが保存してある「themes」フォルダ内に「twentyfourteen_child」という子テーマのフォルダを新たに作ります。(フォルダ名は自由)

そのフォルダにstyle.cssなどのファイルをコピーして、少しだけ追記することでそのスタイルシートの内容が親テーマに反映されます。

カスタマイズした内容は、全て子テーマである「twentyfourteen_child」フォルダの中にあるので、親テーマである Twenty Eleven をバージョンアップして上書きしたとしても、カスタマイズした内容は影響がないという仕組みになります。

style.cssを子テーマにする方法

具体的にstyle.cssを子テーマにする手順を「Twenty Fourteen」を例に説明していきます。

まずはFTPソフトを使用して子テーマの新規フォルダを作ります。

ディレクトリ(場所)は「wp-content」-「themes」フォルダの中になります。

フォルダ名は自分がわかればいいので、ここでは「twentyfourteen_child」としておき、子テーマフォルダの完成です。

「themes」フォルダの中には親テーマの「twentyfourteen」フォルダがあるので、その中にあるstyle.cssをダウンロードします。

次にテキストエディターソフトを使いstyle.cssファイルに以下の内容を先頭に追記します。

/*
Theme Name: twentyfourteen_child
Template: twentyfourteen
*/

Theme Name:の項目は自分でわかる名前でOKです。
Template:については、必ず親テーマのフォルダ名(ディレクトリ名)にするようにしてください。Twenty Fourteen を親テーマとする場合は【twentyfourteen 】にします。

最低限必要な記述内容は以上です。

もし余裕がある場合は…

/*
Theme Name:twentyfourteen_child
Template:twentyfourteen
Theme URI:http://●●●.com/
Description:子テーマの説明 例:twentyfourteen の子テーマです
Author:子テーマの作者名
Version:子テーマのバージョン 例:1.0
*/

追記し終わったら子テーマフォルダにアップロードします。

追加ファイルの方法

以上はスタイルシートの内容をコピーする方法でしたが、コピーではなく親テーマのスタイルシートに追加ファイルとして新規に用意する方法も可能です。

その場合はstyle.cssのファイルに上記の記述に以下を追記します。

@import url('../twentyfourteen/style.css');

以上のようにしておくことで、親テーマのスタイルシートをインポートしてくれます。

準備は以上になります。

子テーマを反映してみよう!

WordPress管理画面の「外観」-「テーマ」を表示。

先ほど作成した子テーマがあるのを確認して「有効化」ボタンをクリックすると、子テーマのスタイルシートが反映されます。

これで親テーマをバージョンアップしても、カスタマイズした内容は守られます。

子テーマが反映されない場合

もし「有効化」ボタンをクリックして不具合がでたり、子テーマのファイルをカスタマイズしても反映されてない場合、以下の原因が考えられるので、参考にしてください。

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

● 子テーマディレクトリに配置しているファイル名が、親テーマのモノと違っている(ファイル名は、必ず統一してください)

● WordPressの管理画面上で、「子テーマ」を有効化していない(下図を参考に有効化してください)

他の各テンプレートファイルはどうするの?

他の「header.php」などのテンプレートファイルは、カスタマイズが必要になったときに、親テーマから子テーマのフォルダにそのままコピーするだけで、特別に追記することなくカスタマイズしていけます。

ひとつだけ「functions.php」のファイルの扱いは要注意で、失敗してしまうと大変なことになるので、詳細については「WordPress functions.php 子テーマ作成~編集、追記方法について エラーを防ぐ!|WP カスタマイズ」にて。

 

  • スポンサーリンク
  •  

関連記事

コメントを残す

メールアドレスが公開されることはありません。名前・コメント・画像認証が必須となっています。

*