子テーマを利用すればワードプレスのテーマ更新が気軽に実行できる


 



本ブログはWordPress(ワードプレス)を利用して記事を書いています。
それで、たまにテーマのバージョンアップを促してくるのですが、前回は何も考えずに更新ボタンを押してしまったところ、変更していたフォントが上書きされてカスタマイズする前の状態に戻ってしまいました。

初心者にとってはフォントひとつを変えるのも大変な作業です。
なので、そのときの私は一瞬頭の中が真っ白になってしまいました。

スポンサード リンク


 

子テーマ

テーマのバージョンアップについて対処する方法がないかと調べてみると「子テーマ」を利用するのが良いというのを知りました。
というか、冒頭の画像にもありますが、更新ボタンのところには次のような記載がありました。

注:テーマに加えたカスタマイズが全て失われます。テーマを修正する場合、子テーマの利用を検討してください。

これはどういうことかというと、バージョンアップの更新をしても子テーマは上書きされないので、カスタマイズした部分が消えてしまうことがないということのようです。しかも、比較的に子テーマの作り方は簡単なので、私でも時間をかけずに作れそうです。

ちなみに、テーマ(themes)というのはWordPressの”着せ替え”とか”テンプレート”みたいな機能をもっています。
テーマを変えることでサイトのデザインを簡単に変えることができるという優れものです。

 

子テーマの利用の仕方

WordPress Codex日本語版に子テーマについての記載がありますが、テーマの「Twenty Ten」について書かれているので、「Twenty Twelve」とは相違するところがあるようです。参考として見ておく程度にするのがよさそうです。

 

書類のコピー

Codex日本語版には、子テーマの最小構成は style.css ファイルのみでも可能と記載されていましたが、style.css ファイルと index.php ファイルの2つが最小構成のようです。
なので、最低でもこの2つをコピーしておきます。

他にカスタマイズしたファイルがあれば、そちらもコピーしておきます。

 

style.css に記載する内容

コピーした style.css の最初のところには、下記のよう記載しておきます。
/*
Theme Name:tade(サイトの名前)
Theme URI:http://tade-blog.info/(サイトのURL)
Description:Twentytwelveの子テーマ(テーマの説明文など)
Author:tade(作成者)
Author URI:http://tade-blog.info/profile/(作成者に関するページのURL)
Template:Twentytwelve
Version:1.0(バージョンナンバー)

@import url('../Twentytwelve/style.css');
*/
今回、親テーマの style.css をコピーしたのは、既にフォントの変更等のために style.css に追記してあるからです。本来の子テーマの style.css の記載要件は上記だけですので、これから新たにサイトをつくるのであれば、上記だけの項目を記載しておけばOKです。

 

子テーマ用ディレクトリー

子テーマ用のディレクトリーをつくります。つくる場所は、wp-comtent → themes の中の他のテーマディレクトリーと同階層につくります。



ディレクトリーの名前はどんな名前でもOKで、「kid」や「child」などと説明している例が多いようです。

そして、このディレクトリーにコピーをしたファイルをアップロードします。
既に説明したように少なくとも、style.css ファイルと index.php ファイルはアップロードします。



この例では、4つのファイルをアップロードしています。

 

子テーマの有効化

アップロードが完了すれば、ワードプレスが子テーマを認識するようになります。



外観のテーマ管理に表示されるようになりました。
アイキャッチ画像が無いのは、画像のアップロードと設定をしていないからで、このままで何ら問題はありません。
(表示させることは比較的簡単です)



「有効化」を押して子テーマを有効化すると、このように表示されます。
この時点で、メニューやウェジェット等が親テーマのときと同じ表示になっているか確認します。

 

テーマの更新

テーマ Twenty Twelve のバーションアップを更新します。



子テーマを利用しているので、カスタマイズをしたフォントなどは影響を受けずにバージョンアップの更新ができたはずです。

 

functions.phpの扱い

最後に1つ注意です。
functions.php は、コピーして子テーマ用ディレクトリーにアップロードして単純にカスタマイズしても機能しません。

CSSファイルや他のファイルは、親テーマを承継して子テーマで追加や変更を行います。
ところがfunctions.phpの場合は、親functions.php⇒子functions.php⇒再度親テーマのfunctions.phpを読み込むように設定してあるために元にもどってしまうようです。

これを解決するためには、それなりの知識が求められます。
私の場合はそこまでカスタマイズしていませんし、時間がかかりそうなので割り切って断念しました。

ちなみに、functions.php をコピーして子テーマ用ディレクトリーにアップロードしたところ、次のようなエラーメッセージが表示されました。



その後、子テーマにアップロードしたfunctions.phpを削除したところ、正常にサイトの表示がされました。