【画像付き】子テーマの作り方

ブログ
こまち
こまち

子テーマ全然作れないんだけど、、、😭

私がブログ運営で最初にぶつかった問題が、“子テーマ作成”です。
子テーマの作り方、問題の対処法についてご紹介していきます!

子テーマとは?

親テーマ(インストールできるもの)を自由にカスタマイズするためのサブテーマです!

こちらをご覧ください。

こちらの部屋の状態が親テーマ、“カーテンの色と時計を変えたい”というカスタマイズ。

親テーマで直接いじることも可能ですが、失敗したら取り返しのつかないことになる可能性大なんです😲

そんな時に、子テーマをカスタマイズすることで一部だけ変更することが可能になります🙆

子テーマをカスタマイズすることで、部屋の元の状態を変えることなく、カーテンと時計だけ希望通りに買えることができました👏

  

さらに!親テーマがアップデートされても、子テーマはそのまま残るので、子テーマをカスタマイズすることが大切なんです!

ローテーブルの変更、花の追加、鏡の消去などのアップデートがあっても、子テーマでカスタマイズしたカーテンの色、時計は変更しない。

         

子テーマってどうやって作るの?

子テーマ作りに半日を費やした私が、わかりやすく説明します💪

       

ファイル作成

エクスプロラーから新しいファイルを作成

            

Style.cssの作成

外観>テーマエディターでスタイルシートを選択し、赤枠の部分をコピー。
上で作成したファイル内に、メモ帳を作りメモ帳にペーストする。

    

Style.cssの編集

Theme Name:子テーマの名前を入力(-childとつけるとわかりやすい)
Template:親テーマの名前を入力。基本的に小文字、スペースなしの場合が多いです。

その他はいじる必要がありません。

        

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

これをそのままコピーし、メモ帳で作成。
保存するときに、ファイル名をfunctions.php、”すべてのファイル”を選択します。

        

圧縮フォルダーに変換

           

WordPressに追加

外観>テーマ
新規追加をクリック

テーマのアップロードをクリック

ここに圧縮ファイルを選択し、インストールを開始します。
注意したいのは、圧縮ファイルのみアップロードするとことです。

圧縮フォルダーを作った際に、圧縮フォルダー(zip)>ファイルフォルダー>作成した2つのファイルとなっている場合があります。その場合は、圧縮フォルダー>作成した2つのフォルダーとなるように移動させます。

         

ライフビューで確認・有効化

インストールが完了すると、ライフビューで確認、有効化することが可能になります。これで子テーマ作成が完成です✨️✨️✨️

            

うまくいかない場合は

テーマにstyle.cssスタイルシートにありません。と表示される場合

圧縮フォルダー(zip)>ファイルフォルダー>作成した2つのファイルとなっていることが原因で起こります。
圧縮フォルダー(zip)>作成した2つのファイルと、圧縮フォルダーにstyle.cssとfunctions.phpの直接2つのファイルが入っているように移動させます。

         

インストール失敗になる場合

インストール失敗、その下に完了を表示されてわかりにくいですが、これは失敗です😢
親テーマ(Template)の入力ミスであることが多いです。大文字になっていないか、スペースが入っていないか確認して、小文字・スペースなしに変更しましょう。

            

まとめ

子テーマの作り方をまとめました。
他のサイトではwp-contentsからいじる!と説明していたり、style.cssのコピー内容がサイトによって異なっていたりしましたが、紹介したように自分で1から作った方が簡単でした😊
子テーマがあることでさらに充実したブログを作れるのでは??とすごくワクワクしています😄

ぜひ、参考になれば嬉しいです!

コメント

タイトルとURLをコピーしました