WordPressの制作では、既存テーマを使うことも多いですよね。私もお世話になっています。
ただ、中には「子テーマ」がないテーマもあるので、内容を上書きしたいときに困ることも。
親テーマで編集するとシステム側で更新される度に消されるため、子テーマが必要。
そんな場合に備え、公式の「Twenty Twenty-One」を使って、子テーマを作る方法をご紹介。
テーマによってファイル構成に違いはありますが、変更箇所は共通しているため、記述に注意すればOK！
子テーマフォルダを作成して、親テーマと連携するところまで順を追って解説していきます。
目次
はじめに
WordPressインストール後、テーマに「Twenty Twenty-One」が入っているか確認します。
あわせて作業に入る前に、以下「3ファイル」を用意してください。中身は何も書かなくてOK。
子テーマフォルダを作成
「wp-content」>「themes」の順に進み、親テーマ名に-childをつけたフォルダを作成。
名前は自由ですが、子テーマと分かるものにしましょう。
├─twentytwentyone
├─twentytwentyone-child // 子テーマフォルダを作成
├─twentytwentytwo
└─index.php親テーマのスタイルヘッダを確認
親テーマのtwentytwentyoneに移動し、style.cssを開きます。スタイルヘッダの情報をコピー。
/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/子テーマのスタイルヘッダを作成
親テーマと子テーマを連携させていきます。子テーマに移動し、style.css上部に以下コードを貼り付けます。
/*
Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/親テーマのスタイルヘッダとの違いは、1行目の「Theme Name」と3行目の「Template」。
前者は管理画面の「テーマ」に表示されるテーマ名、後者は親テーマのフォルダ名になります。
ここで「Template」に親テーマのフォルダ名を書くことで、子テーマであることを認識させています。
「Template」は、親テーマにはなく、子テーマだけに書かれる唯一の項目です。
コメントを加えて保存すると「外観」＞「テーマ」から子テーマが選べるようになるので確認してください。
空になっているテーマ画像は、screenshotの名前で設置すれば反映されます。親テーマからコピーするなどして対応。
├─functions.php
├─index.php
├─screenshot.png // テーマイメージを設置
└─style.css親テーマのスタイルを子テーマに読み込む
子テーマのfunctions.phpを使って、親テーマのスタイルシートを読み込んでいきます。
これにより子テーマを有効化したときにも親テーマのスタイルが適用されるようになります。
<?php
function enqueue_theme_styles() {
// 親テーマのスタイル
wp_enqueue_style( 'style-parent', get_template_directory_uri() . '/style.css' );
// 子テーマのスタイル
wp_enqueue_style( 'style-child', get_stylesheet_directory_uri() . '/style.css', array('style-parent') );
}
add_action( 'wp_enqueue_scripts', 'enqueue_theme_styles' );
?>詳しいコードの書き方、ファイル別の読み込み方については、こちらの記事をご覧ください。
スタイルシートをヘッダーに出力
読み込んだスタイルシートをテーマに出力していきます。子テーマのindex.phpに最低限必要なコードを追加します。
<?php get_header(); ?>
<?php get_footer(); ?>今回は「twentytwentyone」の構造上、wp_head();の入ったget_header();が必須。
別途確認用にテキストを入力し、同じく子テーマのstyle.cssにもスタイルを追加してください。
<?php get_header(); ?>
<p>サンプル</p><!-- テキスト追加 -->
<?php get_footer(); ?>p {
color: #cccccc;
font-size: 96px;
text-align: center;
}子テーマに切り替え
管理画面の「テーマ」から完成した子テーマ「Twenty Twenty-One Child」に切り替えます。
サイトを表示し、親テーマのスタイル、確認用に入力した子テーマのテキストとスタイルが反映されていれば完了です。
親テーマの「Twenty Twenty-One」を有効化すると子テーマが適用されないので注意。
おわりに
style.css中心の作業になりましたが、これ以降は、随時子テーマにPHPファイルを作成して編集していきます。
どのように書き換えるかは元のテーマとの兼ね合いなので、特にこれという正解はありません。
もし思い通りに構築できず困ったときは、自分でオリジナルテーマを作るのもひとつの選択肢。
子テーマと同じように一定時間かかりますが、自分に合った構成、機能にすることができます。
完成後に、繰り返し利用できるところもおすすめ。案件に応じて、使い分けてみてくださいね。
