子テーマの作り方

こんにちは、ルカです。

「非エンジニアの視点から、WordPressを楽しく学ぶ」をテーマに執筆しています。1記事あたり15分〜1時間程度でセットアップできるようまとめていますので、少しずつWordPressを更新してくださいね。

今回は、子テーマを作っていきます。

そもそも、子テーマって何？

非エンジニアの私が、一番分からなかったのはこれです。そもそも子テーマって何？何のために作るの？子テーマを作って、何かいいことあるの？

しかし、ある事件が起きてから、子テーマの大切さを身に染みて分かるようになったのです。それは、テーマをアップデートした時です。

はっきりと言えば、やらかしてしまいました。

何も考えずに、テーマを最新版にアップデートしてしまったのです。一体、何が起こったと思います？子テーマの大切さが分かっている方なら、すぐに分かると思いますが、そう、テーマを直接編集していた部分が全て消えました。

正直、どこをどのように編集していたかなんて、一切覚えていません。バックアップは一応取っておいたのですが、その事実に気づいた時には、既にかなり苦労して、他の箇所に手を加えていたのです。

ここで話を戻すと、子テーマとはつまり、親テーマをベースに、親テーマを書き換えずにカスタマイズするためのシステムのこと。親テーマを書き換えると、誤って大事な部分を書き換えてしまったり、アップデートの際に書き換えた箇所が消えてしまったりしますが、子テーマを作ることで、親テーマには触れずにカスタマイズをすることができるのです。

私のように、テーマを最新版にアップデートしたら、カスタマイズした部分が全て消えた、ということがなくなります。

子テーマの作り方

では、子テーマはどのように作るのでしょうか。

まず、テーマによっては、そもそもテーマの作成者が子テーマを用意していたりするケースがあるので、既に公開されている子テーマを使うのが、一番簡単な方法となります。

私の使っているLightningの場合は、特に公開されている子テーマがなかったので、自力で作ることにしました。作り方はとても簡単でした。

子テーマ作成で用意する3つ

• フォルダ
• style.css
• functions.php

これだけです。WordPressの公式オンラインマニュアル WordPress Codexにも詳しいやり方が書かれていますが、非エンジニアには詳しすぎて難しかったので、簡単にまとめますね。

フォルダ

フォルダ名は何でも大丈夫ですが、公式には”lightning-child”など、”テーマ名-child”を推奨しているようです。他にも、テーマ名に”_child”をつけたり、単に”child”とだけする人も結構いるようで、厳格なルールではないようです。これは、”wp-content”内の”themes”直下に格納します。

この作成したフォルダの中に、”style.css”と”functions.php”を格納します。

style.css

style.cssには下記の項目を記載します。内容は、サンプル用にTwenty Fifteenというテーマのものなので、自分の使っているテーマに合わせて書き換えます。念のため、下記ソースは公式オンラインマニュアルから直接確認することを推奨します。

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

https://wpdocs.osdn.jp/子テーマ

ただこれ、実は、

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

ここだけあれば、機能するようです。私は、この2項目に加えて、親テーマの”style.css”に書かれている内容が、似たような内容だったので、一部追記しておきました。

functions.php

functions.phpについては、もっと簡単で、下記のソースをそのまま使うことで、機能しました。こちらも念のため、公式オンラインマニュアルから直接確認することを推奨します。

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’) ); }

https://wpdocs.osdn.jp/子テーマ

もちろん、最初にと最後に、<?php〜?>をつけることを忘れずに。

子テーマの有効化

3つのものが用意できたら、子テーマを有効化します。

WordPressの管理画面から、外観 > テーマを開くと、アラ不思議。テーマの一覧に、子テーマと有効化ボタンが出てくるので、「有効化」をクリックすれば、子テーマの作成が完了します。

テーマの一覧に子テーマが出てこない場合は、上記をもう一度見直す必要があります。ちなみに、私は親テーマのフォルダ名の、大文字・小文字が間違っていたため、子テーマが出て来ませんでした。

子テーマを作成する際の注意点

子テーマを作成するにあたって、ひとつ注意点があります。

子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。

https://wpdocs.osdn.jp/子テーマ

なんと、カスタマイズ等が消えてしまいますw

案の定、全て設定し終えた後に、この事実に気づいたので、イチから設定し直しましたが・・・早く言ってよーwって感じですね。

子テーマについては、後から知ったので仕方がないのですが、今後もしWordPressで新しくブログやサイトを作る際には、テーマを選んだ際に、最初から子テーマの作成をしようと思いました。

まとめ

子テーマ作成は、最初は面倒臭そうに見えますが、案外簡単に設定することができました。設定の手間がかからないわりには、アップデートの際の手間を大幅に省くことができるので、ぜひ試してみてくださいね。

また、この記事内では、私の体験談と、公式オンラインマニュアルに書かれた内容を中心に、非エンジニアでも分かるよう簡単にまとめていますが、ソースや、より高度な内容については、念のため公式オンラインマニュアルを確認することをお勧めします。