エックスサーバーで子テーマを作成する方法です。
子テーマのファイルを入れる子テーマのフォルダを1つ作成してからstyle.cssとfunctions.phpのファイルを作成して子テーマフォルダに入れていく作成方法と、single.phpを子テーマにする方法も説明しています。
エックスサーバーで子テーマを作成する前には、万が一のエラーに備えてバックアップを取っておいてください。
子テーマ作成が初めての場合は、初めに子テーマ作成の練習用として使用してないテーマを使ってエックスサーバーの子テーマ作成をしてみると覚えやすくなります。
エックスサーバーで子テーマを作成する流れ
エックスサーバーで子テーマを作成するには、「ファイルマネージャー」まで進みます。
エックスサーバーにログインして子テーマが作成できるファイルマネージャーが表示されたら、子テーマを作成するthemeフォルダまで進みます。
以下がthemaフォルダまでの進み方です。
1. 子テーマを作成するドメインをクリック
2. WordPressのファイルが入ってるpublic_html
3. WordPressテーマが入ってるwp-content
4. 子テーマを作成するテーマが入ってるtheme
パスは「/ドメイン名/public_htnl/wp-content/themes/」です。
するとエックスサーバーで子テーマを作成したい親テーマがあるので、子テーマのフォルダを先に作成してから子テーマのファイルを作成をします。
子テーマのフォルダとファイルを作成する
記事内ではエックスサーバーで子テーマの作成方法の説明用として「twenty seventeen」を使用してます。
themeフォルダには現在使用してるテーマ以外のテーマも入ってると思いますが、子テーマを作成する親テーマ名を子テーマのフォルダ名にします。
画面の右下に「作成」があるのでフォルダ作成の左横の入力ボックスに「親テーマ名-child」と入力します。
例 twentyseventeen-child
フォルダ名を入力したら、文字コードファイル名の文字コードが「UTF-8」になってることを確認します。
そうしたら、子テーマのフォルダ名を入力したボックスの右にある「フォルダ作成」をクリックすると、子テーマフォルダが作成されて親テーマの下に子テーマが表示されたのが確認できます。
次に子テーマのファイルを作成します。
先ほど作成した子テーマフォルダをクリックして、子テーマフォルダの中に進みます。
進んだ画面の右下の「作成」で、ファイル作成の左にある入力ボックスにstyle.cssと入力します。
入力したらファイル作成をクリックすると子テーマフォルダの中にstyle.cssが表示されてるのが確認できます。
次にfunctions.phpの子テーマファイルを作成します。
ファイル作成でfunctions.phpと入力してから、ファイル作成をクリックするとfunctions.phpが子テーマフォルダに表示されます。
上記の画像のように子テーマファイルが表示されてれば子テーマ作成は順調です。
作成した子テーマにコードを記述する
エックスサーバーのファイルマネージャーで作成した子テーマが読み込みができるように、作成したstyle.cssとfunctions.phpにコードを記述します。
先ほど作成した子テーマのstyle.cssをクリックしてファイルの中を表示します。
/*
Theme Name: twentyseventeen-child
Template: twentyseventeen
*/
上記を子テーマのstyle.cssにコピペします。
これはスタイルシートヘッダといって、子テーマと親テーマが読み込めるようにする情報を書いてます。
twentyseventeenの部分は子テーマ作成してる親テーマの名前に変更してください。そうしないと子テーマが動作しません。
そのあとに保存文字コードが「UTF-8」になってることを確認してから「保存する」をクリックします。
次に子テーマの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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>
上記のPHPコードをコピペします。
子テーマのfunctions.phpに書いてあるPHPコードが実行してることはstyle.cssの読み込み順序です。詳しくはfunctions.phpファイルの作り方を読んでみてください。
保存文字コードがUTF-8になってることを確認してから「保存する」をクリックします。
single.phpも子テーマ作成してみる
エックスサーバーで作成した子テーマ「style.css」と「functions.php」の他に、single.phpを子テーマにする作成方法です。
single.phpの子テーマを作成する方法は親テーマのテンプレートを開いた中の記述を丸ごと子テーマsingle.phpにコピペします。
エックスサーバーでファイルマネージャーまで進んで、themeフォルダで子テーマを開きます。
先ほど作成したstyle.cssとfunctions.phpがある子テーマ画面で、ファイル作成の左横のボックスにsingle.phpと入力してファイル文字コードをUTF-8にして保存をします。
保存したsingle.phpにはコピペするので、ファイルをクリックして開いておきます。
一度WordPressのテーマエディターから親テーマのsingle.phpを選択してファイルを開いたら、書いてあるPHPコードを上から下まで丸ごとコピーします。
そしてエックスサーバーに戻り、作成した子テーマ「single.php」にコピーしたPHPコードをペーストして「保存」します。
エックスサーバーで作成した子テーマを確認する
エックスサーバーで子テーマの作成ができたら、WordPressの管理画面のテーマで子テーマが表示されてるのが確認できます。
作成した子テーマを有効化する前にも「ライブプレビュー」をしてサイトの表示を確認してみたり、テーマエディターからも子テーマの作成が成功してるか確認して、style.cssとfunctions.phpのファイルの記述も確認しておきます。
WordPressのテーマ画面でみる子テーマの画像が何も表示されてませんが、作成したテーマにはscreenshotを使用してテーマ画像を作成することができます。
エックスサーバーで子テーマ作成した子テーマの動作には必ず必要な設定ではないので、親テーマと子テーマの区別をわかりやすくしたいとか思う場合は読んでみてください。
まとめ
エックスサーバー内で子テーマの作成方法を覚えると、サーバーに表示される子テーマのフォルダとファイルを確認しながら作成できるし、子テーマを作るファイル操作が分かりやすいです。
それでも、もし「エックスサーバーで子テーマ作成は難しいなぁ…」と思ったら、私の知ってる簡単だと思う子テーマの作り方は、WordPressのプラグインを使った作成方法なので、お時間があるときにでも読んでみてください。
