子テーマが無いWordPressテーマ向け子テーマの作り方。

miyamoです。

WordPressのテーマをカスタマイズするときに、テーマそのものにカスタマイズを加えると、テーマをアップデートしたときに、すべて置き換えられてします。せっかくカスタマイズした内容が、上書きされテーマオリジナルの状態に戻ってしまいます。

WordPressには、子テーマという仕組みがあり、カスタマイズを子テーマにすることで、親テーマをアップデートしてもカスタマイズを残すことができます。

子テーマを使ってカスタマイズをしたいと思っても、子テーマが用意されていないテーマもあります。Simplicityは、公式な子テーマが用意されていたので、カスタマイズをするときに助かりました。

調べてみたら、子テーマの作り方はとても簡単でした。子テーマが用意されていないテーマを使いたい方のためにも、その方法を記事にしてみます。

それでは、いってみよー。

子テーマはなぜ必要なのか？

子テーマはカスタマイズをしなければ必要ありません。ここでいうカスタマイズとは、カスタマイザーではなく、CSSファイルやPHPファイルを直接修正することを意味しています。

子テーマを作るとテーマをアップデートしてもカスタマイズを残せる

カスタマイズをするときには、親テーマのファイルを直接書き換えてカスタマイズをする方法があります。しかし、親テーマをアップデートすると、カスタマイズしたファイルを含めて、すべて上書きされてしまいます。

上書きされないために、カスタマイズは親テーマを直接修正するのではなく、子テーマに対して行うのが正解です。そのためにも、子テーマが必要となります。

なかには子テーマが用意されていないテーマがあります。この場合は、子テーマを自作するしかありません。（有名なテーマなら、有志で作成して配布されているかもしれません）

子テーマの自作方法は次からです。

子テーマの作り方

子テーマの作り方ですが、実はとても簡単です。ほぼここに書いてあることを、コピペするだけで出来てしまいます。

子テーマに最低限必要な、style.cssとfunctions.phpの2つのファイルを作成して、FTPでアップロードするだけです。

それでは、手順を説明しますね。

STEP1　子テーマフォルダを作成する

WordPressをインストールしたフォルダの、/wp-content/themesに子テーマ用のフォルダを作成します。すでに親テーマが入っていると思いますので、（親テーマフォルダ名）-childのような名前で作成してください。

Simplicityの例で言うと、親テーマのフォルダがsimplicityなので、子テーマはSimplicity-childとなります。このようにすると関係性がわかりやすいと思います。

フォルダは、FTPソフトや、レンタルサーバーのFTPツールで作成することができます。

STEP2　style.cssとfunctions.phpの書き方

子テーマで必要なファイルは、style.cssとfunctions.phpの2つです。まずは、この2つを作ります。

テキストエディターを開いて必要事項を入力します。それぞれ、style.css、functions.phpと名前をつけて保存してください。

Windowsを使っている方は、標準のメモ帳は使わないようにしてください。（UTF-8形式で保存できません。）TeraPadなどのUTF-8で保存できるテキストエディターを使ってください。TeraPadでは、保存するときにUTF-8N形式としてください。

はじめに、style.cssから。

style.cssの内容

@charset "UTF-8";

/*
 Theme Name: （子テーマ名）
 Template:   （親テーマのフォルダ名）
*/

Theme Name:には、子テーマの名前を入力します。たとえば、「Simplicity Child」のようにします。

Template:には、親テーマのフォルダ名を入力します。/wp-content/themesに親テーマも入っていますので、その親テーマのフォルダ名を入力してください。Simplicityならsimplicityとなります。

style.cssにこの2行を記載することで、WordPressから子テーマとして認識されるようになります。

style.cssの例

@charset "UTF-8";

/*
 Theme Name: Simplicity Child
 Template:   simplicity
*/

ここまでできたら、style.cssと名前をつけて、UTF-8形式で保存してください。

続いて、functions.phpです。

functions.phpの内容

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

テキストエディターに、このままコピペしてください。できたら、functions.phpとしてUTF-8形式で保存してください。

以前は、style.cssに@importを書いていましたが、今ではfunctions.phpでstyle.cssを読み込む方法が推奨されています。

子テーマ - WordPress Codex 日本語版

wpdocs.sourceforge.jp

STEP3　作成した子テーマフォルダにファイルをアップする

style.cssとfunctions.phpができあがったら、先ほど作成した子テーマ用のフォルダに、FTPソフトなどでアップロードします。

STEP4　子テーマを有効にする

これまでの作業が成功したら、テーマ一覧に作成した子テーマが表示されるようになります。

表示された子テーマを有効化すると、子テーマを通して親テーマが表示されます。

STEP5　カスタマイズは子テーマに行う

カスタマイズは、子テーマに対して行います。

親テーマ内のphpファイルに修正を加える場合は、小テーマフォルダにコピーして、コピーしたファイルに修正を加えていきます。

まとめ

この方法で、子テーマを作ることができます。思ったよりも、簡単でした。

きっかけは、あるテーマに子テーマがなかったので、自分で作れるのかな？と調べたら、意外と簡単に作れることがわかりました。せっかくなので、記事のネタにさせていただきました。

おしまい。miyamoでした。