カンタン!WordPress子テーマの作り方

例としてWordPressの公式テーマ「twenty seventeen」の子テーマを、レンタルサーバー「wpX」で作成します。
子テーマの作り方はさまざまで複雑に見えますが、この方法なら初めてでも簡単です。

子テーマのフォルダを作成する

レンタルサーバーのファイルマネージャにログインします。

▼必要な情報

  • FTPユーザーID
  • FTPパスワード

それぞれ、FTPアカウント設定で設定されたものを入力します。


FTPアカウントの設定について、詳しくはこちら>>
(下記ページの目次「レンタルサーバーwpXでFTPアカウント設定」にリンクします)

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

ログインしたら、「themes」を選択してください。

サイトが保有しているテーマが表示されます。ここに子テーマを追加していきます。


フォルダ名は何でもいいですが、子テーマなので、末尾に「-child」と付けると分かりやすいです。「フォルダ作成」をクリックしてください。

追加した「twentyseventeen-child」をクリックし、中身のファイルを作成していきます。

子テーマフォルダの中にファイルを作成

テーマと子テーマを紐づけるために、必要なファイルを2つ作成していきます。

  1. style.css
  2. functions.php

1.style.css

子テーマのフォルダ同様、ページ右下の「作成」で
「style.css」と入力→「ファイル作成」をクリックします。

ファイルが追加されます。
ファイル左のボックスにチェックを入れ、「編集」をクリックしてください。

ファイルに記述

2つの情報を入力していきます。

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

正しく表記しないと子テーマが認識されないので、注意が必要です。

【twenty seventeenの子テーマを作成する場合】

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

【実際の入力画面】

入力画面の右「保存する」ボタンで保存します。

2.functions.php

style.cssと同様にファイルを作成し、編集します。

ファイルに記述

次のコードをコピペしてください。

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

【実際の入力画面】

入力画面の右「保存する」ボタンで保存します。

これで子テーマの作成は完了です。

WordPress管理画面で子テーマを有効化する

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

保有しているテーマが表示され、作成した「twentyseventeen-child」も加わっています。
プレビューで確認し、親テーマと見た目が変わらなければ、有効化してください。

子テーマが正しくインストールできているか確認

子テーマ内のスタイルシートに、下記のコードを追加して背景色を変更してみましょう(先ほどの手順で作成したCSSです)。

.site-content {
    background-color: lightblue;
}

【実際の入力画面】

変更を忘れずに保存します。

WordPressに戻り、ページを更新すると白い背景が水色に変わります。

他のテーマで背景色が変わらない場合、.site-contentbodyに置き換えてみてください。

子テーマについて

子テーマについて詳しくはこちら>>
(下記ページの目次「子テーマについて」にリンクします)

FileZillaを使った子テーマ作成の手順 FTPソフトFileZilla(ファイルジラ)のイン...