エックスサーバーでワードプレスの子テーマを作成する方法を時系列で記載しておきます。個人のカスタマイズメモなので、変更をする場合はバックアップを必ず取って、そして、あくまで自己責任でお願いいたします。
目次
子テーマ用のフォルダを作成
今回は「twentyseventeen」の子テーマを作成する方法を例にご紹介いたします。
- ファイルマネージャ（エックスサーバー）へログイン
- ワードプレスがインストールされているドメイン
- public_html
- wp-content
- themes
このthemesの階層に子テーマのフォルダを作成します。
フォルダ作成よりお好きな名前のフォルダを作成します。
例）twentyseventeen_child
子テーマ用フォルダにstyle.cssとfunctions.phpのファイルを作成
- 先ほど作成した子テーマ用フォルダーをクリックして、子テーマ用フォルダの中に
- ファイル名の文字コードをUTF-8として
- functions.phpファイルを作成します
- style.cssファイルを作成します
この段階ではfunctions.phpファイルとstyle.cssファイルの中にコードは何も記載されていません。
functions.phpファイルにコードを記載
functions.phpファイルに以下のコードを記載します。保存文字コードはUTF-8です。
<?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ファイルにコードを記載
style.cssファイルに以下のコードを記載します。保存文字コードはUTF-8です。
@charset “UTF-8”; /* Template: twentyseventeen Theme Name: twentyseventeen_child */
Templateは親テーマの名前
Theme Nameは子テーマの名前
子テーマを有効にする
- 外観
- テーマ
- 作成した子テーマ（twentyseventeen_child）を有効有効化
これで子テーマが作成できたので子テーマでスタイルを変更すれば、たとえ親テーマがバージョンアップされてもテーマのスタイルに影響は出ないので安心ですね。