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

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

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

子テーマを作るメリット

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

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

・自分用のcssのテンプレートとして別のワードプレスにも流用しやすい

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

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


作業手順

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

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

(ワードプレスのフォルダ)/wp-content/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つのファイルが正しく設定できていれば、ワードプレスの「外観」→「テーマ」に作成した子テーマが表示されるので「有効化」にしましょう。

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

 

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

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

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

今後編集は子テーマのファイルを使い、親テーマの中身は触らないのが理想です。







スポンサーリンク

関連用語TOPへ
HOMEへ

コメントを残す

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