子テーマでテーマを編集していけばアップデートの時も安心

スポンサーリンク

2016年9月8日追記
子テーマの作り方について最新情報は子テーマ – WordPress Codex 日本語版を要確認のこと。

本記事作成は、2014年9月のため情報が古い部分あり。CSSの読み込み方法が新しくなっています。


テーマをアップデートしても上書きされないという子テーマを試してみたしまぷー(@Shimapoo_jp)です。

スポンサーリンク

テーマをアップデートするとファイルは更新されて、自分が編集した部分は消えてなくなります。
子テーマで編集していけば、消えてなくなることはないようです。(ただ、何が起こるか分かりませんから、自分のパソコンの中などへ定期的にバックアップすることはお忘れなく)

子テーマに自分で作ったテンプレートファイルなどを置いておけば、WordPressは優先して子テーマのファイルを使ってくれます。

では、さっそく試してみましょう。

themesフォルダの中に子テーマ用のフォルダを作る

まずは、themesフォルダの中に、childといった子テーマ用のフォルダを新たに作ります。
フォルダ名は、ご自身の管理しやすい名前にしましょう。

style.cssを新たに作成

childフォルダの中にstyle.cssというファイル名で

/*
    Theme Name: Twentyfourteen Child Theme
    Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');

と書いて文字コードをUTF-8(BOMなし)にして保存します。
(WordPressで使えるテキストエディタについては、用語集 – WordPress Codex 日本語版を確認しましょう)

親テーマとしてTwenty Fourteenを使ってみました。
style.cssには、最低Theme NameとTemplateが必要とのことなので入れておきます。(ご自身が利用しているテーマに応じてかえましょう)

@importで親のスタイルシートシートを読み込むようにします。

ここで、ダッシュボードの中のテーマへ行ってみると、Twentyfourteen Child Themeというのができていました。
新しくできた子テーマを、有効化しておきましょう。

参考ページ
子テーマ – WordPress Codex 日本語版
Child Themes « WordPress Codex(英語版)
参考書籍
基礎からのWordPress (BASIC LESSON For Web Engineers)の172ページ

スタイルシートの追加は、子テーマのstyle.cssを使う

試しに、childフォルダの中のstyle.cssに

p.teststyle {
 color: red;
}

と書いて、p要素にclass=”teststyle”を指定してみると、赤色になってくれました。

「idセレクタもちゃんと動くかな?」と思って、

p#idteststyle {
 font-size: small;
}

と書いてp要素にid=”idteststyle”と指定したのを作ってみると、文字が小さくなりました。

テンプレートファイルも子テーマで編集

テンプレートファイルの編集も、試してみます。

編集したいテンプレートファイルを、childフォルダの中へコピーします。
twentyfourteenのフォルダの中にあるテンプレートファイルsidebar.phpをchildのフォルダの中にコピーして、childのフォルダの中のsidebar.phpを編集してみました。

サイトを再表示してみると、おー、ちゃんと編集したsidebar.phpが反映しています。
親テーマに無いテンプレートファイルを子テーマの中で作っても、テンプレート階層の優先順位で子テーマのテンプレートファイルを読み込んでくれました。子テーマという仕組みはすごいですね。

新しい関数を追加する時には、子テーマにfunctions.phpを作る

childフォルダの中にfunctions.phpを新たに作れば、新しい関数を追加できます。

functions.phpをさわる時には、必ずテスト用サイトで動作確認を取りながら慎重に行いましょう。

スポンサーリンク

functions.phpは、WordPressを動かす重要なファイルです。
関数の使い方を間違えると、WordPressが動かなくなります。

WordPressが動かなくなると怖いので、WordPressを始めた最初の頃は、functions.phpはおっかなくてさわれませんが、子テーマのfunctions.phpに自分で関数などを追加できるようになると、飛躍的にいろいろ細かなことをやっていけるようになります。

functions.phpが何のことだかさっぱりという方は、時間のある時にじっくり勉強してみてくださいね。

functions.phpの最初にphpの開始タグ<?phpを忘れずに

子テーマでfunctions.phpを使う場合は、functions.phpの最初の行にphpの開始タグ

<?php

を忘れずに入れましょう。

最初、単純にtwentyfourteenの中のfunctions.phpの自分で書いたコードをカットしてchildフォルダの中のfunctions.phpにペーストしたのですが、コードがそのままwebページに表示されて「あれ?」となりました。

あ、そうだそうだと思って<?phpをfunctions.phpの最初の行に書いたら正常に動いてくれました。

逆にphpの終了タグ?>はつけない方がいいみたいです。

参考書籍
本格ビジネスサイトを作りながら学ぶ WordPressの教科書の157ページ「コラム」(〜閉じなくても問題ありませんか?)
パーフェクトPHP (PERFECT SERIES 3)の37ページ:終了タグの省略

以前、テーマのアップデートでファイルが消えてしまった

2014年9月初旬に、Twenty Fourteenのテーマをアップデートしたら、今まで書いたファイルが全部消えてしまってショックでした。

アップデートボタンをポチッと押した時に「あ、そういえばファイルって全部上書きされるんじゃなかったっけ?」と頭をよぎったのですが、すでに手遅れ。

綺麗さっぱり、自分が編集した内容は消えて無くなりました。

子テーマというのは、以前から聞いたことはあったのですが難しそうだったのでスルーしていました。
今日、何気なく基礎からのWordPress (BASIC LESSON For Web Engineers)を読んでいたら、子テーマついて書いてあったので、試してみたら意外と簡単にできました。

せっかく書いたコードがテーマのアップデートで消えてしまわないよう、これからは子テーマを使っていこうと思うしまぷー(@Shimapoo_jp)でした。

スポンサーリンク