WordPress公式テーマ『Twenty Seventeen』の子テーマづくりから、子テーマの作り方を学ぶ

motounagiya

7年前

WordPressでデザインをカスタムする際、
『テーマファイルを直接編集しない！』
『子テーマを作って、子テーマを編集する！』
と、言うのが鉄則なんですが。意外に『テーマファイルをそのまま編集している人』多いんですよね。

なので、実際に『子テーマ』を作ってみて、その過程をひも解いてみようと思います！

※ 最後には、『Twenty Seventeen』の子テーマが出来ています。

/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

『Twenty Seventeen』子テーマ style.css

/*
Theme Name: Twenty Seventeen child
Template:   twentyseventeen
Version: 1.1
Author: motounagiya
Author URI: https://vseomedia.com/
Text Domain:  twentyseventeen-child
参考URL: https://wpdocs.osdn.jp/子テーマ
*/

/* 子テーマ用のスタイルを書く */

必要なのは、上から3行分

/*
Theme Name: Twenty Seventeen child
Template:   twentyseventeen
Version: 1.1
*/

項目の説明

項目名	説明
Theme Name	テーマ選択時に表示される名前
Template	親テーマのディレクトリ名(※親テーマの名前ではないです)
Version	バージョン

functions.php を用意する

functions.php というファイルを用意して、以下を記載します。

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
//以下に子テーマ用の関数を書く

?>

この手順は公式のドキュメントから参照しています。

子テーマ – WordPress Codex 日本語版

https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

wpdocs.osdn.jp

rtl.css を用意する

存在することが推奨されているので、中身はないのですが作っておいておきます。

/*
Theme Name: Twenty Seventeen child
Template:   twentyseventeen
Text Domain:  twentyseventeen-child
Version: 1.1
Author: motounagiya
*/

/* RTL言語(右から左へ書く言語)用のスタイルを書く */

おまけにscreenshot追加

twentyseventeen-child
├── functions.php
├── rtl.css
├── screenshot.png
└── style.css

項目	役割
style.css	必須：CSSを記載するファイル
functions.php	必須：親テーマを提供して、子テーマのカスタムを適用
rtl.css	推奨：RTL言語(右から左へ書く言語)用のCSS
screenshot.png	オプション：テーマ選択時に表示される画像