Ver1.3をリリースしました(10/16)

WordPressで子テーマを活用して安全にカスタマイズを行う方法

WordPressにはカスタマイズを安全に行うために「子テーマ」と呼ばれるものを使うことができます。

子テーマとは?

通常のテーマ(親テーマ)と組み合わせて使うカスタマイズ用のテーマです。子テーマにより親テーマ自体には手を加えること無く、変えたい部分だけを上書きするような形でカスタマイズすることができます。

子テーマのイメージ

子テーマを使うメリット

親テーマをいじること無く、子テーマを通してカスタマイズすることには大きなメリットがあります。

子テーマに対してカスタマイズを行う

誤って重要なコードを消してしまう不安が軽減

直接これらのファイルのコードを編集すると、誤って重要なコードまで消してしまうかもしれません。子テーマを使っていれば、上書きする形でカスタマイズをしていくため、最悪子テーマのファイルを消したり、元に戻すことで修正ができます。

テーマのアップデート時にもカスタマイズ内容が残る

親テーマ内のファイルに直接手を加えてカスタマイズを行うと、テーマのアップデート(バージョンアップ)時に手を加えたファイルまで修正されてしまいます。つまり、せっかくカスタマイズした内容が消えてしまうのです。

テーマに更新があったときにカスタマイズ内容が消えてしまう

子テーマを用意して、上書きする形でカスタマイズをしていれば、親テーマが更新されたときにも子テーマのカスタマイズ内容が残ります。

テーマに更新があったときに子テーマがあれば内容が残る


子テーマをインストールしよう

ここからは子テーマをWordPressにインストールする方法を解説していきます。SANGOをご利用の方は下のボタンから専用の子テーマをダウンロードできます。

子テーマをダウンロード

子テーマのインストールの方法

親テーマと同じ手順でWordPressの管理画面からインストールすればOKです。アップロード時には、圧縮されたファイル(.zip形式)をそのまま選択しましょう。詳しくはこちらの記事を御覧くださいませ。

WordPressにテーマをインストールする方法
WordPressにテーマをインストールする方法
親テーマも必須
親テーマが無ければ子テーマは働きません。

子テーマを有効化

これで親テーマと小テーマ両方がインストールされました。このうちの子テーマの方を有効化しましょう。子テーマが自動で親テーマの内容を読みに行ってくれます。


SANGOの子テーマでカスタマイズを行う方法

SANGO用の子テーマには、以下の2つのファイルが収録されています。

  • style.css
  • functions.php

style.css

このファイルにブログの見た目を変えるためのCSSを書いていきます。「CSSって何?」という方は下の記事にざっと目を通してみてください。きっと参考になるはずです。

初心者向けCSS入門:基本的な書き方を総まとめ!
初心者向けCSS入門:基本的な書き方を総まとめ!

このファイル内に記載されたCSSは、親テーマに上書きされて適用されていきます。編集はFTPソフトと呼ばれるものを使うと便利ですが、管理画面の「外観⇒テーマの編集⇒スタイルシート」から編集することもできます。

ファイルの冒頭に書かれているコードは消さずに、下に追記していきましょう。

functions.php

functions.phpにはテーマを制御する様々なコードを書いていきます。カスタマイズの本や記事を読むと「このコードをfunctions.phpに貼り付けましょう」というように書かれていることがよくあります。そんなときには、こちらのファイル内に記載していけばOKです。

関数を書く場所

その他のファイルをカスタマイズしたいときは

例えば、ブログのヘッダーのデザインを変えるためにheader.phpを編集する必要がでてきたとします。そんなときは、親テーマのheader.phpを子テーマに複製します。すると、親テーマのheader.phpは読み込まれず、子テーマ内のheader.phpが読み込まれるようになります。

つまり、親テーマ内のファイルは残したまま、子テーマの方で自由にファイルを編集できるというわけです。

MEMO
複製する際には子テーマ内にheader.phpという新規ファイルを作り、その中に親テーマのheader.phpの内容をまるっとコピペすればOKです。この作業にはFTPソフトが必要になるのでご注意ください(FTPソフトの使い方は別の記事で解説します)。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です