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

コンテンツ

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

FTPソフトFileZilla（ファイルジラ）のインストール＆設定方法について、詳しくはこちら＞＞

http://pulpfingers-com.check-xserver.jp/1343

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

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

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

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

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

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

追加されました。

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

style.css
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」ではテーマとともに子テーマが配布されています。

詳しくはこちら＞＞

http://pulpfingers-com.check-xserver.jp/715

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

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

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

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