FTPソフトFileZillaを使ったWordPressの子テーマ作成方法

FileZillaを使った子テーマ作成の手順

FTPソフトFileZilla(ファイルジラ)のインストール&設定方法について、詳しくはこちら>>

さまざまなFTPソフトがありますが、ここではFileZilla(ファイルジラ)という無料のFTPソフ...

設定ができたら、子テーマを作っていきます。

①子テーマとなるフォルダを作成

WordPress公式テーマTwentytwentyの子テーマを作っていきます。

ファイルジラでサイトのディレクトリを表示できたら、「themes」を選択→themes内に新しいフォルダを作成していきます。

themesの中で右クリック→「ディレクトリの作成」を選択します。

名前は何でもいいのですが、子テーマなので「-child」と付けておけば分かりやすいです。
ここでは「twentytwenty-child」とします。

追加されました。

②子テーマ内にファイルを2つ作る

  1. style.css
  2. functions.php

この2つのファイルを作っていきます。

1.style.cssファイルを作成

子テーマとなるフォルダ「twentytwenty-child」の中身を表示します。
右クリック→「新しいファイルの作成」を選択します。

ファイル名に「style.css」と入力し、「OK」を選択します。

ファイルが作成されます。

style.cssをテキストエディタで開きます。
Windowsならメモ帳、Macならテキストエディットなどで大丈夫ですが、ここではBracketsを使います。

ここで記述するのは下記2つです。

  • Theme name:子テーマ名
  • Template:親テーマ名

ここで正しい情報を入れないと子テーマとして呼び出されないので、注意しましょう。
twentytwentyの場合、下記コードをコピー&貼り付けしてください。

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

【実際の入力画面】

入力したらCtrl+Sで上書き保存してファイルを閉じます。
下記の画面が出てくるので、「編集を終了してローカルファイルを削除する」をチェック→「はい」を選択します。

これで一つ目のファイル「style.css」は完成です。

2.functions.phpファイルを作成

style.cssと同じ要領で、新規ファイルを作成し、ファイル名を「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')
);
}
?>

【実際の入力画面】


入力後、style.cssと同じ要領でCtrl+Sで上書き保存してファイルを閉じます。

「編集を終了してローカルファイルを削除する」をチェック→「はい」を選択します。

これでファイル「functions.php」の作成も完了です。

③WordPressの管理画面で子テーマを有効化

管理画面にログインし、サイドメニューの「外観」→「テーマ」を選択します。

テーマの中に、さきほどアップロードした子テーマができています。

「ライブプレビュー」で親テーマと同じ見た目であることを確認し、「有効化」します。

④有効化できているか確認する

今のままでは子テーマが有効になっているのか分かりません。
念のため子テーマのstyle.cssに下記のコードをコピペして確認します。(この手順で作ったstyle.cssです)

body {
    background: brown;
}

【実際の入力画面】

初期設定ではクリーム色ですが、背景がこのように茶色に変われば成功です。

子テーマについて

子テーマをカスタマイズすべき理由

テーマはインストールしたら終わりではなく、バージョンがアップデートされていきます。

テーマを直接カスタマイズしている場合、アップデートによりファイルが上書きされ、苦労したカスタマイズが失われてしまうこともあるのです。
親テーマをカスタマイズするとアップデート時にファイルが上書きされ、カスタマイズが消えてしまう

これを防ぐためには、親テーマ(子テーマに対し、こう呼ばれます)ではなく「子テーマ」をカスタマイズしていくことが大切です。

子テーマは親テーマの機能や外観を受け継いだテーマですが、親テーマとは別ファイルであるため、親テーマがアップデートされてもカスタマイズした変更点は失われません
子テーマは親テーマとは別ファイルであるため、テーマをアップデートしてもカスタマイズはそのまま残る

ダウンロードするだけのテーマならラク

子テーマの作成はなかなか大変ですが、テーマにより子テーマがzipファイルで配布されていることもあります。ダウンロードしたzipファイルをアップロードするだけでいいので、WordPressへのインストールも簡単です。

たとえばブロガーに人気のテーマ「Simplicity2」ではテーマとともに子テーマが配布されています。

詳しくはこちら>>

WordPressには、管理画面から検索して使えるテーマのほかに、ダウンロードして使うテーマがありま...

子テーマは必要ないことも

とくに初心者で、PHPファイルなどを編集する必要がなければ、子テーマはのちのち必要になってから作成しても問題ありません。

見出しや箇条書き(リスト)など、CSSで外観の簡単な装飾のみをしたい場合、追加CSSから記述できます

追加CSSは、テーマがバージョンアップしても上書きされたり消えたりしないため、子テーマがなくても安心して外観の装飾ができます。

追加CSSへのアクセス方法

WordPress管理画面へログインします。
①外観②カスタマイズを選択します。


③メニューを下にスクロールし、追加CSSを選択します。