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

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

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

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

もくじ

なぜ、子テーマを作り。子テーマを編集する必要があるのか?

まずは、子テーマを利用する理由。

テーマの更新すると、カスタマイズが消える

WordPress同様に『テーマ』にも、PHPが使われていたりして更新が行われます。

そのため、PHPのライブラリなどに不具合や脆弱性が出た場合、更新がリリースされます。

このテーマの更新を行うと、カスタマイズした項目が記載しているファイルによっては『リセットされる

カスタマイズが、消えてしまう。ということが発生してしまい。

表示が崩れてしまうなどの、表示に問題が出てしまいます。

テーマの更新を行わないのは、危険!

テーマの中で、PHPライブラリやPHPコードが使われている場合。

その不具合、脆弱性を修正しないまま使い続けることは自分のサイトを

『乗っ取り』や『改ざん』の危険にさらしていることになります。

テーマの更新ができない!と言うことはリスクになります。

テーマのカスタマイズをテーマを変えても、適用できる!

子テーマを編集することで、ファイルは親テーマとは別の場所に保存されているため
親テーマとは、変更したファイルを分離することが出来ます。

これは、仮に親テーマを変更しても同じカスタマイズ
簡単に、別の親テーマにも適用することが出来ます。


対象は2017年最新のWordPress公式テーマ『Twenty Seventeen』

それでは、実際に『子テーマ』を作ってみます。

子テーマ作成の最低条件

子テーマには、

  • 子テーマのフォルダ・ディレクトリ
  • style.css
  • functions.php
  • rtl.css(推奨)

が、最低限必要です。

子テーマのディレクトリを作成

今回は『Twenty Seventeen』の子テーマなので、

  • twentyseventeen-child

としました。

WordPress公式テーマ『Twenty Seventeen』 のstyle.cssから、子テーマのstyle.cssを作成

  • 『Twenty Seventeen』 のstyle.css
/*
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' );

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

?>

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

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 オプション:テーマ選択時に表示される画像

zipファイルにする

zipファイルで、1つにします。

子テーマをアップロード、適用

外観 > テーマ > 新規追加 > テーマのアップロード から、zipファイルをアップロード

インストールされました!

有効化』をすれば、適用されます。

と、ここまでで『子テーマ』作成でした!

ダウンロード

今回作成した『子テーマ』をgithubにアップしたので、ダウンロード可能です。

子テーマ作りで作った子テーマです。. Contribute to snickerjp/twentyseventeen-child development by creating an account on GitHub.

参考サイト

日本語情報は更新が止まったようで、以下は英語ですが最新情報のようです

Child themes are extensions of a parent theme. They allow you to modify an existing theme without directly editing that theme’s code. They…
コメントの入力は終了しました。