【WordPress】子テーマが必要な理由とは?作り方と設定方法を図解!

子テーマが必要な理由と設定方法

WordPressを使ってWebサイトを作成する場合、ほとんどの人が「テーマ」を選びカスタマイズなどを行っていくことと思います。

そんなWordpressには「子テーマ」と呼ばれるものが存在します。

この「子テーマ」はカスタマイズを行う上でかなり重要なものです。

「子テーマ」がなぜ必要なのか、実際に子テーマを設定するのはどうしたらいいのか、図解で分かりやすく解説していきたいと思います!

子テーマとは?

子テーマの役割イメージ

簡単に言うと、子テーマとは既存のWordpressテーマのカスタマイズを行うためのテーマです。

WordPressテーマは、機能の拡充やバグの修正などでバージョンが更新されていきます。(テーマによって異なります。)

子テーマを作成することで、テーマのアップデートによるカスタマイズ内容の消失や、カスタマイズのミスによる不具合発生リスクを減らすことができます。

子テーマの必要性について

子テーマを設定することによっていくつものメリットが得られます。

まずは、子テーマ無しでカスタマイズを行った場合を見てみましょう。

子テーマ無しでテーマをカスタマイズした場合

子テーマ無しでカスタマイズをした場合の図

このように、テーマのアップデートがあるとテーマ内のファイルは自動更新され、今までカスタマイズしてきた内容が消えてしまうのです。。。

バックアップデータから苦労して作成したカスタマイズ内容を毎回修正反映していては身が持ちません。。

ズバリ、この問題を解消してくれるのが「子テーマ」です。

では次に、「子テーマ」がある場合を見てみましょう。

子テーマ有りでテーマをカスタマイズした場合

子テーマ有りでカスタマイズした場合の図

このように、カスタマイズした子テーマを親テーマのあとに読み込むことで親テーマのアップデートにも対応し、自分がカスタマイズした内容も上書きされることなく確実に保持することができるのです。

子テーマの適用方法

有料のテーマなどの場合、子テーマも用意されている場合がおおいです。

その場合はダウンロードした子テーマを適用するだけで大丈夫です。

すでに用意されている場合は、下記の「子テーマを適用する」からご覧ください。

子テーマが用意されていないテーマの場合は、子テーマを作成する必要があります。

そんなに難しい作業はないので、子テーマの作り方から適用の方法までを解説していきたいと思います。

子テーマの作り方

作業内容自体はコピペでできるものなので、5分もあれば子テーマを作成することができると思います。

子テーマの作成方法は以下の手順で行っていきます。

3ステップ
  • ①子テーマのフォルダを作成する
  • ②必要なファイルを作成する
  • ③親テーマと連携するためのコードを書く

今回はWordpressにデフォルトでインストールされている「Twenty Seventeen」を参考に解説していきたいと思います。

①子テーマのフォルダを作成する

まずは子テーマのフォルダを作成します。

フォルダ名は「テンプレート名-child」とするとわかりやすくてよいと思います。

今回の場合、「twentyseventeen-child」といったファイル名になります。

フォルダの作成

②必要なファイルを作成する

次に、先ほど作成したフォルダの中に以下のファイルを作成します。

  • style.css
  • functions.php

③親テーマと連携するためのコードを書く

先ほど作成した2つのファイルに親テーマと子テーマをつなぐためコードを書いていきます。

style.css

/*
Template:twentyseventeen
Theme Name:twentyseventeen-child
*/

Template には「親テーマ名」
Theme Name には「親テーマ名_child」

を記載し保存しましょう。

注意
コメントアウトを指定する「/*」「*/」も忘れずに記載しましょう!
functions.php

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); 
    function theme_enqueue_styles() 
    { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); 
} ?>

このコードを記述することで親テーマのstyle.cssを読み込んでくれます。

子テーマをサーバーにアップロードする。

これで子テーマに必要なファイルはそろいました!

以下のフォルダ構成になっているかと思います。

子テーマ用フォルダのフォルダ構成

あとは、サーバの中に作成したフォルダを配置するだけです。

配置場所はWordpressがインストールされているフォルダ直下の「/wp-content/theme」の中に配置しましょう。

※ここはテーマ情報が格納されているフォルダになります。

ファイルのアップロード方法はサーバーによって異なりますが、FTPソフトを使用してアップロードするのがおすすめです。

子テーマを適用する

子テーマをインストール、もしくは作成したフォルダを格納したらあとは子テーマを有効化するだけです。

子テーマの有効化手順

STEP.1

外観 > テーマを選択します。
 テーマ選択画面へ

STEP.2

作成した子テーマを有効化します。
 子テーマの有効化

完了!!

以上で子テーマの適用は完了です!!

最初はstyle.cssfunction.phpのみが子テーマのフォルダ内に配置されていますが、ヘッダーのカスタマイズがしたければ、header.phpを親テーマからコピーして配置、フッターのカスタマイズがしたければfooter.phpをコピーして配置・・・

このようにしてカスタマイズしたいファイルを子テーマへコピーしてからカスタマイズすることで、親テーマのアップデートを実行しても子テーマ側でカスタマイズした内容は失われずに済むのです!!

これでテーマのアップデートも、心置き無く行うことができます。

コメントを残す

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