WordPressで子テーマの作り方

ブログ運営

ワードプレスはテーマをインストールすることで簡単にサイトデザインを変更できます。

さらに自分好みに改良していくにはCSSを編集することになりますが、テーマ本体をカスタマイズするのではなく子テーマに追加していくほうがいいです。

子テーマはなぜ必要か

親テーマを直接カスタマイズしているとアップデートされたときに編集した箇所が変更されてしまいます。

子テーマを設定しカスタマイズしていた場合は親テーマがアップデートされても編集した箇所はそのまま残ります。

そのため基本的には子テーマに変更箇所を追加していくことがおすすめです。

子テーマに必要なファイルは2つ

最初にこれから作る2つのファイルを入れるフォルダーを作ります。

親テーマに対する子テーマだとわかりやすいように例えばデフォルトでインストールされているテーマ「Twenty Seventeen」の子テーマなら「twentyseventeen-child」とするのがいいです。

「style.css」を作成する

子テーマフォルダの中にテキストファイルで下記をコピーして貼り付けます。

/* 
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/

ファイル名は「style.css」にします。

「Theme Name」は子テーマのフォルダ名と同じにし、「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' );
}

ファイルの名前は「functions.php」にします。

このファイルはコピーしてそのまま貼りつけるだけで大丈夫です。

フォルダの中がこのようになります。

この作成したフォルダを圧縮してzipファイルにすれば子テーマ作成完成です。

作成した子テーマフォルダをzipにしてアップロードする

作成した子テーマフォルダを圧縮したzipファイルをWordPressにアップロードします。

ワードプレス左メニューから「外観→テーマ」と選択します。

「新規追加」をクリックします。

「テーマのアップロード」をクリックし子テーマのzipファイルを選択し「今すぐインストール」をクリックすればアップロードできます。

最後に子テーマを「有効化」して完了です。

CSSをカスタマイズする時はこの子テーマに対して変更箇所を追加していきます。

コメント