ワードプレスの子テーマの作り方

ワードプレスを使用されている方でデザインやレイアウトの編集の際、cssファイルは子テーマは使っていますか?
使ってない人は下記を参考にして作成してみてはいかがでしょうか。
そんなに時間もかからず簡単にできます。

親テーマとは:適用しているテーマ
子テーマとは:親テーマに関連付けられて作成したテーマ

子テーマを作るメリット

子テーマの編集箇所は親テーマより優先されるので複雑な親テーマのcssをいじるより格段に作業がしやすい

・親テーマだとなかなかいじりにくい躊躇するような箇所がある時も子テーマだと安心して色々試せる。(最悪もう一度作ればいい)

・自分でカスタマイズしたcssのテンプレートとして別のワードプレスにも流用しやすい

親テーマはアップデートすると上書きされるため、編集した内容が消えてしまう
が子テーマは別のテーマなので影響しない

一番下だけでも子テーマを作る理由は十分あります。
時間かけて作ったデザインを保持するためにも子テーマの使用はは必須です。


作業手順

※作業は慎重にご自身の責任で行ってください
親テーマのフォルダの中身を削除したり書き換えたりしないように注意してください

まずはワードプレスが入ってるサーバーを開きます。
(契約してるサーバーのファイルマネージャーや自分で用意したフリーのFTPサーバーを使用)

そしてサーバー内のテーマのフォルダを開きます。
ほぼ以下の階層の中にあります。

(ワードプレスのフォルダ)/wp-content/themes/

この「themes」の中に普段自分が使用しているテーマの名前があるはずです。
その親テーマのフォルダとは別に、新たに親名の後に「-child」と加えた子テーマのフォルダを作ります。
例として「hitmag」のテーマなら「hitmag-child」を新たに作成。

ネットビジネスで生活する道 ワードプレスの子テーマ

続いてデスクトップ上にメモ帳などで「style.css」という名前でCSSのファイルを作成します。
中身は以下のコードを記述してください。


/*
Template:○○○
Theme Name:●●●
*/


○○○には親(元)のテーマ名
●●●には子テーマ名を入れます。

<例>
/*
Template:hitmag
Theme Name:hitmag-child
*/

※全角半角、大文字小文字など入力ミスに気をつけてください

以上を記述したCSSファイルを作成した子テーマのフォルダの中に入れます。

次に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’)
);
}
?>


作成後、こちらもCSSと同様に子テーマのフォルダの中に入れます。
サーバーへの準備は以上です。

子テーマのフォルダーと中の2つのファイルが正しく設定できていれば、ワードプレスの「外観」→「テーマ」に作成した子テーマが表示されるので「有効化」にしましょう。

ネットビジネスで生活する道 ワードプレスの子テーマ
※ここで作成した子テーマを選択できない場合は、上のテキストやフォルダー名が間違ってる可能性あるのでよく確認しましょう。

 

ネットビジネスで生活する道 ワードプレスの子テーマ

「テーマの編集」の右側で親テーマを引き継いでるのが確認できます。
これで子テーマの設定が完了です。

以降は子テーマを使って作業していきましょう。
変更した直後は親テーマで「カスタマイズ」した内容がはずれたりしてます。
子テーマ上で新たにカスタマイズをすれば問題ありません。

今後、編集作業は子テーマのファイルを使い、親テーマの中身は触らないのが理想です。
今回のファイル以外でも「index.php」や「header.php」などを編集する必要性が出た場合、phpファイルをいじるのに抵抗があるなら、一度親テーマから編集したいファイルをダウンロードして編集します。
その編集した後は「子テーマ」の中に入れてください。
そうすれば何かあっても最悪、親テーマに編集元のファイルは残りますし、設定内容が優先さえるのは子テーマの方なので安心です。

中身全部ごっそりコピーすることもできますが、子テーマの中は自分が編集を加えたファイルだけをおいてた方がわかりやすいと思います。







スポンサーリンク

関連用語TOPへ
HOMEへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です