子テーマの作り方
wordpressの既存テーマの子テーマを作成するのに、私が試した方法を紹介します。
開発環境は以下の通りです。
テキストエディタ・・・Visual Studio Code
サーバー・・・Xサーバー
もともと有効になっていたテーマの子テーマを作成していきます。
目次
- 1. 子テーマのフォルダ を作成する
- 2. style.cssを用意する
- 3. ローカル環境のファイルをサーバー上にアップする
- 4 子テーマが認識正しく認識されない
- 5. functions.phpを作成する
- 6. 再度確認する
1. 子テーマのフォルダ を作成する
親テーマの名前を調べる
サーバーのファイル管理を開き、wordpressをインストールしたディレクトリまで移動します。
このように、wordpressに必要なファイルが並んでいるのが確認できます。
そして、wp-content > themesに移動します。
ここでは、有効化されていないテーマも含めて、テーマフォルダが並んでます。
現時点で、有効化されているテーマは、twentytwentyです。
管理画面の名前(Twenty Twenty)とはやや異なっています。
このtwentytwentyを親テーマの名前として使用します。
子テーマの名前を決める
子テーマの名前は、https://wpdocs.osdn.jp/子テーマで推奨されている方法(以下参照)
子テーマディレクトリの名前には最後に '-child' を付けることが推奨されます
にならって、twentytwenty-childにしておきます。
フォルダを作成する
先ほど決めたフォルダ名にします。
2. style.cssを用意する
新規フォルダ作成
ローカル環境の作業フォルダを作成しましょう。
フォルダ名は、サーバーと同じ(twentytwenty-child)でいいかと思います。
3. ローカル環境のファイルをサーバー上にアップする
VS Codeからコマンドで簡単にファイルをアップロードすることができる、SFTPを使用します。
qiita.com
この記事の「選択肢1 VS Code拡張機能「SFTP」でサーバーにファイルを即アップする設定と方法」に沿って設定します。
今回、jsonファイルの"remotePath"の値は、子テーマフォルダ「twentytwenty-child」までの絶対パスを指定しました。
"remotePath": "/home/(サーバーID)/(ドメイン名)/public_html/", // ファイルをアップするリモートサーバーのディレクトリ(絶対パス)
これで、Shift + command + P を押してSFTP: Sync Local -> Remote
を実行すると、サーバー上の子テーマフォルダ「twentytwenty-child」にローカルのファイルがアップロードできます。
4 子テーマが認識正しく認識されない
管理画面に、子テーマのフォルダ名が表示されているのを確認します。
このまま子テーマを有効化しようとすると、
「使用中のテーマが壊れている」との表示が出てきます。
原因は、親テーマのstyle.cssを正しく読み込む記述が書かれたfunctions.phpを作成していないからです。
style.cssを正しく読み込むためにはfunctions.phpが必要と子テーマ - WordPress Codex 日本語版に書かれていました。
キューについて
ちなみにキューとは「先に入ったものが先に出てくる構造の何か」のことだそうです。
style.cssをキューに入れることで順番通りに読み込まれるという意味合いでしょう。
5. functions.phpを作成する
子テーマ - WordPress Codex 日本語版の「2. 子テーマの作り方」にある以下の部分を、新規作成したfunctions.phpにコピペします。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
6. 再度確認する
サーバーにアップした後、子テーマを有効化します。
これで子テーマが有効化されました！
参考書の紹介
テーマを作成する方法や、その他のwordpressに関する知識はこの本で学ぶことができます。
