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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

1．style.css

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

 

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

ファイルに記述

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

正しく表記しないと子テーマが認識されないので、注意が必要です。
 
【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に戻り、ページを更新すると白い背景が水色に変わります。

 

子テーマについて

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

http://pulpfingers-com.check-xserver.jp/1553#tips02