子テーマとは、公式やプロが配布しているワードプレスの「テーマ」のデザインや機能を利用しながらも、自分のカスタマイズを反映させるための仕組みです。
ワードプレスデフォルトテーマ「Twenty Twenty-Two」をインストールするにあたって、「子テーマはまだ必要なのか？」と英語で調べてみたのですが、不必要だとの記述が見つからなかったので、今年も子テーマ作成を継続することにしました。
functions.phpの作り方が、親テーマが「get_stylesheet_directory()」系なのか「get_template_directory()」系かで明確に分かれちゃっていたので、記事更新しました。
参考：Wordpress Theme Handbook、Child Themes
子テーマ作成の流れ
- サーバーで子テーマのフォルダを作る
- 「style.css」を新規作成
- 「functions.php」を新規作成
- ワードプレス管理画面で、子テーマを有効化する
「子テーマ」ディレクトリの作成
ディレクトリとは、フォルダのことです。
レンタルサーバーのコントロールパネルのファイルマネージャーに入り、
入った先で、public_htmlから階層構造を辿って、「themes」のフォルダー上で「＋New Folder」または「＋フォルダー」を押す。
フォルダー名は「親テーマ名-child」と命名するのが、公式の推奨。
※階層設定はサーバーで違います。
style.cssをつくる
上で作成した子テーマフォルダー内に、「style.css」という新規ファイルを作成します。
出来たファイルを「編集」で開いて、ファイルの冒頭にCSSのコメントで「子テーマの名前」と「親テーマ」のフォルダ名を入れると、テーマとして認識されます。
/*
Theme Name: Twenty Twenty Two Child(子テーマの名前)
Template: twentytwentytwo(親テーマのフォルダ名)
*/
上記2つの情報は、「最低限」なので、ホントは日本語のマニュアルを見て、ステキ情報をもりもり追加できます。
↓私が実際に使っているコード↓
/*
Theme Name: twentytwentytwochild
Template: twentytwentytwo
Theme URI: https://tehehet.com/wp-content/themes/twentytwentytwochild/
Description: twentytwentytwochild
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwochild
/*参考：ワードプレスCodex日本語版「子テーマの作り方」
functions.phpをつくる
functions.phpは、php関数を記述するファイルです。子テーマフォルダの中に、「functions.php」という名前のファイルを作成します。
「編集」で作成したファイルの中に入って、親テーマを呼び出した後に子テーマのカスタマイズを適用するコードをコピペするのですが…
親テーマが「get_template_directory()」系のコードを使っている場合(Twenty Twenty-Twoなど)は、下記のようなコードを使います。
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get('Version') // this only works if you have Version in the style header
);
}親テーマが「get_stylesheet_directory()」系のコードを使っている場合は、下記のコードを使うとのこと。
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}個人的に、以前は下記のコードを使いまわしていたのですが、「Twenty Twenty-two」からこのコードが使えなくなったっぽいので、マニュアルを見直しました。あはは。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>子テーマを有効化する
function.phpが作成できたら、ワードプレス側の管理画面に戻ります。
外観 → テーマ → 有効化
これで終わり。
ただ、上の画像の様に子テーマにイメージがついてません。テーマのスクショをつけたい場合は、「ついでに」まで読んでいってください。
ついでに
機能には関係ないですが、「screenshot.png」を親テーマからコピーしておくと、テーマの管理画面にイメージが現れて分かりやすいです。
screenshot.png
コントロールパネルのファイルマネジャーに戻ります。
親テーマのフォルダから「screenshot.png」というファイルを探して、「コピー」を押すとポップアップが出てきます。
ココに子テーマのフォルダのパスを入れると、子テーマにコピーされます。
ワードプレスの管理画面に戻って、ページの再読み込みをかけるとイメージが反映されていると思います。
画像は、screenshot.pngという名前だったら違う画像ファイルでも同じところに反映されます。
最後までお読みいただきありがとうございました。