2016.02.07 2020.11.19 WordPressscofield

エックスサーバーで子テーマを作成する方法

エックスサーバーで子テーマを作成する方法をまとめておきます。

Contents

1 子テーマを作成する前に
2 子テーマの作り方
3 その他のファイルを子テーマでカスタマイズする方法
4 最後に

子テーマを作成する前に

子テーマを作成する前に、テーマ配布元サイトで子テーマが配布されていないか確認して下さい。

子テーマが配布されている場合は、通常テーマと同様、管理画面の外観「テーマ」から、子テーマのzipファイルをアップロードするだけで子テーマを使うことができます。

子テーマのzipファイルをアップロード

子テーマが配布されていな場合は、ご自身で子テーマを作成して下さい。

子テーマの作り方

流れは以下の通りです（初めての方でも10分あれば設定できます）。

手順

子テーマフォルダの作成
style.cssの作成
functions.phpの作成
親テーマを継承するためのコードを記述
子テーマの有効化

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

エックスサーバーにログインして、「ファイル管理」をクリックします。

「ファイル管理」をクリック

テーマフォルダを開いて、「新規フォルダ」から子テーマフォルダを作成します。

例えば、Twenty Twentyの子テーマを作りたい時は、「twentytwenty-child」等の名前をつけて子テーマフォルダを作成します（フォルダ名は半角英数字ならなんでも構いません）。

パス：/該当ドメイン/public_html/wp-content/themes/

子テーマフォルダの作成

子テーマフォルダに「style.css」と「functions.php」を作成する

作成した子テーマフォルダを開き、「新規ファイル」から2つのファイルを作成します。

作成するファイル名

style.css
functions.php

パス：/該当ドメイン/public_html/wp-content/themes/子テーマ

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

同様にfunctions.phpファイルも作成して下さい。

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

子テーマのstyle.cssにスタイルシートヘッダを入力する

style.cssファイルを選択して、「編集」をクリックします。

style.cssの編集

下記コードを記述して、「更新」をクリックします（下記はTwenty Twentyの場合）。

/*
 Theme Name:   Twenty Twenty Child
 Template:     twentytwenty
*/

Theme Name: Twenty Twenty Child

Template: twentytwenty

style.css編集内容

この際、「Template:○○」の部分には、必ず「親テーマのフォルダ名」をそのまま入力して下さい。

Theme Name	テーマ一覧で表示される名前（自由につけてOK）
Template	親テーマのフォルダ名

ちなみに、「@import:」を使用して親テーマのスタイルシートをインポートすることもできますが、WordPress Codexでは「functions.php」で呼び出す方法を推奨しています。

参考：子テーマ – WordPress Codex 日本語版

以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。

子テーマのfunctions.phpに親テーマを継承するためのコードを記述する

functions.phpを選択して、「編集」をクリックします。

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

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}