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

  • 『Twenty Seventeen』 子テーマ style.css

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

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

functions.php を用意する

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

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

rtl.css を用意する

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

おまけにscreenshot追加

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

zipファイルにする

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

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

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

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

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

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

ダウンロード

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

Contribute to twentyseventeen-child development by creating an account on GitHub.

参考サイト

コメントの入力は終了しました。