子テーマを作ってテーマをカスタマイズ!

WordPressでテーマをカスタマイズしたい時に便利なのが子テーマの作成です。
既存のテーマを直接カスタマイズすると、そのテーマがアップデートされた時にカスタマイズした内容が失われる可能性があります。
しかし、子テーマを作ることでその危険を回避することができます!

私が使っているテーマも、日本語が読みやすいフォントに変更したり、見出しのフォントサイズを変更したりと、少しだけですが元のテーマにカスタマイズを加えています。

PHPやWordPressのことにあまり詳しくない私でも出来たので、カスタマイズしてみたい方は試してみてください。

失敗したときにうろたえないように、バックアップは必ずとってからチャレンジしましょう!

画像付きで詳しく説明されているサイトも数多くありますが、ここではステップだけを簡単に記載したいと思います。

参考にしたサイト:
『WordPress Codex 日本語版 子テーマ』
http://wpdocs.osdn.jp/子テーマ

子テーマ作成のステップ

1.FTPでテーマフォルダをダウンロード

public_html/wp-content/themes 内にあるカスタマイズしたいテーマのフォルダをFTPでダウンロードします。
ここでは、カスタマイズしたい対象の既存テーマフォルダ(親テーマ)を仮に○○○という名前にします。

2.子テーマのテーマフォルダを作成

public_html/wp-content/themes 内に 「○○○-child」 という名前のフォルダを作成します。

○○○は仮の親テーマ名として使っています。実際の親テーマ名を入れてください。

『WordPress Codex 日本語版 子テーマ』より引用:
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)。また、子テーマディレクトリの名前には空白を含めないでください。

3.子テーマ内に必要なファイルを作成

子テーマの中に、以下の2つのファイルを作成します。

  • style.css
  • functions.php

style.cssには、スタイルシートヘッダーの記載が必須です。記載項目は11項目ありますが、絶対に必要なのは以下の2項目です。

/*
Theme Name: ○○○ Child
Template: ○○○
*/

○○○は仮の親テーマ名として使っています。実際の親テーマ名を入れてください。
「Template:」の項目は、親テーマ(カスタマイズしたい既存テーマ)のフォルダ名を記載します。

「Template:」の横のスペースは必ず半角スペース(全角スペースは×)、続けてフォルダ名、ここで親テーマの「Template:」名を入れると、エラーで「親テーマが見つかりません。」と出ます。必ずフォルダ名を入れましょう。

後は、font-familyとかfont-weightとかfont-sizeとか、変更したいcssのみを記載していきます。
ここで記載したスタイル以外は親テーマのスタイルが適用されます。

functions.phpには以下のコードを記載します。

これで、親テーマのスタイルシートを読み込んだあとに子テーマのスタイルシートが読み込まれます。

『WordPress Codex 日本語版 子テーマ』より引用:
style.cssと異なり、子テーマの functions.php は、親テーマの機能を上書きしません。代わりに 親の functions.php に追加して読み込まれます。(正確には、親テーマのファイルの 直前 に読み込まれます。)

4.アップロードと有効化

FTPで public_html/wp-content/theme/○○○-child のフォルダをアップロードします。
(○○○は仮の親テーマ名として使っています。実際の親テーマ名を入れてください。)

アップロードが完了したら、サイトの管理画面にログインし、「外観 > テーマ」 より子テーマを選択して有効化しましょう。

追記

スタイルシート以外のファイル(header.phpやfooter.phpなど)もカスタマイズすることが出来ます。
親テーマのファイルを子テーマフォルダ内にコピーして、変更したい部分のコードを変更します。

『WordPress Codex 日本語版 子テーマ』より引用:
子テーマディレクトリに header.php を置けば、親テーマの header.php の代わりにそのファイルが使用されます。

ちょっとしたカスタマイズでサイトがより見やすくなりますし、オリジナリティーもでます。
バックアップをしっかりとりつつ、カスタマイズを楽しみましょう。

 Google+ B はてブ  LINE  Feedly

JETPACK関連記事の見出しをカスタマイズする方法 | ふらふーむ (hoom's room) にコメントする コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください