【 更新 】おすすめ記事はこちら

【WordPress】子テーマを新しく作る!Twenty Twenty-One

WordPressの制作では、既存テーマを使うことも多いですよね。私もお世話になっています。

ただ、中には「子テーマ」がないテーマもあるので、内容を上書きしたいときに困ることも。

親テーマで編集するとシステム側で更新される度に消されるため、子テーマが必要。

そんな場合に備え、公式の「Twenty Twenty-One」を使って、子テーマを作る方法をご紹介。

テーマによってファイル構成に違いはありますが、変更箇所は共通しているため、記述に注意すればOK!

子テーマフォルダを作成して、親テーマと連携するところまで順を追って解説していきます。

はじめに

WordPressインストール後、テーマに「Twenty Twenty-One」が入っているか確認します。

あわせて作業に入る前に、以下「3ファイル」を用意してください。中身は何も書かなくてOK。

  • functions.php
  • index.php
  • style.css

子テーマフォルダを作成

「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ファイルを作成して編集していきます。

どのように書き換えるかは元のテーマとの兼ね合いなので、特にこれという正解はありません。

もし思い通りに構築できず困ったときは、自分でオリジナルテーマを作るのもひとつの選択肢。

子テーマと同じように一定時間かかりますが、自分に合った構成、機能にすることができます。

完成後に、繰り返し利用できるところもおすすめ。案件に応じて、使い分けてみてくださいね。