ワードプレスの子テーマの作り方

ネットビジネスを目的としたブログ運営などでワードプレスを使用されている方が多いと思います。

そのワードプレスでデザインやレイアウトをCSSファイルを用いて編集さる際、子テーマを使って編集されていますでしょうか。

ワードプレスに適用した各テーマには元々CSSファイルは存在しますが、そのまま使うことはあまりおすすめできません。
長い間ブログ運営を続けていくなら途中からでもいいので作っておくべきで、今後のリスク回避にもつながります。

子テーマを使ってない人は下記を参考にして作成してみてください。

それほど時間もかからず簡単にできます。

ワードプレスで子テーマを作るメリット

親テーマではなく子テーマを適用すれば様々なメリットがあります。

・子テーマの編集箇所は親テーマより優先されるので複雑な親テーマのCSSをいじるより格段に作業がしやすい

・親テーマだとなかなかいじりにくい躊躇するような箇所がある時も子テーマだと安心して色々試せる。（最悪もう一度作ればいい）

・自分でカスタマイズしたCSSのテンプレートとして別のワードプレスにも流用しやすい

・親テーマはアップデートすると上書きされるため、編集した内容が消えてしまうが
子テーマは名前が異なる別のテーマなので親テーマのアップデートの影響を受けない

一番下の部分だけでも子テーマを作る理由は十分あるといえます。

時間かけて作ったデザインを保持するためにも子テーマの使用は必須です。

子テーマの作成手順

※作業は元となる親テーマのフォルダの中身を削除したり書き換えたりしないよう慎重にご自身の責任で行ってください

まずはワードプレスが入ってるサーバーを開きます。

※使用しているサーバーのファイルマネージャーや自分で用意したフリーのFTPサーバーを使用します。
サーバーの中身の確認方法がわからなければご契約されているレンタルサーバー会社にお問い合わせください。

そしてサーバー内のワードプレスの使用しているテーマのフォルダを開きます。
ほぼ以下の階層の中にあります。

この「themes」の中に普段ご自身が使用されているテーマ名があるはずです。

そのテーマ（親）のフォルダとは別に、新たに「-child」と加えた子テーマ用のフォルダを作ります。

例として親テーマの名前が「hitmag」なら「hitmag-child」という名前のフォルダを新たに作成します。

続いてデスクトップ上にメモ帳などで「style.css」という名前でCSSのファイルを作成します。
中身は以下のコードを記述してください。

○○○には親（元）のテーマ名
●●●には子テーマ名を入れます。

【例】

※全角半角、大文字小文字など入力ミスに気をつけてください

以上を記述したCSSファイルを保存し、作成した子テーマのフォルダの中に入れます。

続いてPHPファイルを作成します。
同様にメモ帳などの中に以下のコードを記述し、「functions.php」という名前のファイルを作ります。

作成後、こちらも先ほど作成したCSSと同様に子テーマのフォルダの中に入れます。

サーバーへの準備は以上です。

子テーマのフォルダーと中の2つのファイルが正しく設定できていれば、
ワードプレス管理画面の「外観」→「テーマ」を選択した際に作成した子テーマが表示されるので「有効化」にしましょう。

※ここで作成した子テーマを選択できない場合は、上のテキストやフォルダー名が間違ってる可能性あるのでよく確認しましょう。

すると「テーマの編集」の右側で親テーマを引き継いでるのが確認できます。

これで子テーマの設定が完了です。

以降はこののまま子テーマを使ってワードプレス、CSSなどの編集作業をしていきましょう。

なお子テーマに変更した直後は親テーマで「カスタマイズ」した内容がはずれたりしてます。
その際は再度、子テーマ上で新たにカスタマイズをすれば問題ありません。

今後、編集作業は子テーマのファイルを使い、親テーマの中身は触らないのが理想です。

今回のファイル以外でも「index.php」や「header.php」などを編集する必要性が出た場合、phpファイルを直接いじるのに抵抗があるなら、一度親テーマから編集したいファイルをデスクトップなどにダウンロードして編集し、その編集したファイルは「子テーマ」の中に入れてください。

そうすれば何かあっても最悪、親テーマに編集元のファイルは残りますし、設定内容が優先されるのは子テーマの方なので安心です。

中身全部ごっそりコピーすることもできますが、子テーマの中は自分が編集を加えたファイルだけをおいてた方が見栄え的にも作業がわかりやすいと思いますのどご活用してみてください。

なおワードプレスのテーマの中には標準で子テーマを実装したり様々な機能が搭載されている便利なものもあります。

考察TOPへ
HOMEへ