子テーマを利用してWordPressサイトをカスタマイズするメリット

子テーマを利用してWordPressサイトをカスタマイズするメリット


今回はWordPressテーマの子テーマを作成してWordPressサイトをカスタマイズするメリットについてお伝えします。こちらはWordPressカスタマイズの基本といえば基本ですが、応用と言えば応用です。

WordPressサイトはWordPress本体とWordPressテーマで大枠が構成されています。

このうちWordPressサイトの外観を決定しているWordPressテーマを編集することで、WordPressカスタマイズが可能になりますが、この際にWordPressテーマの子テーマを作成してカスタマイズすることにより、テーマファイルの更新の際に「カスタマイズが無効になる」というメリットがあります。

なお、もちろん親テーマファイルをそのまま編集してもカスタマイズができます。

WordPressテーマの「子テーマ」

WordPressテーマの「子テーマ」

WordPressを構成しているWordPressテーマによって、WordPressサイトのデザインや大まかな仕様が決まりますが、WordPressテーマをカスタマイズする時、テーマファイルをそのまま編集すると大きくカスタマイズすることができる反面、もし無料テーマなどを使っていて「テーマの更新」があった場合、更新してしまうと、それまでに加えたカスタマイズ部分が上書きされて無効なります(運良く該当部分にアップデートが無ければそのまま継続されることもあります)。

そんなときはWordPressテーマの「子テーマ」を作成して、テーマファイルのfunctionやCSSのみオリジナルなものにしてしまうという方法があります。

いわば元となる親テーマの一部分を子テーマの利用によって上書きのような形で書き換えてしまうという方法です。

WordPressテーマの親子関係

WordPressテーマの親子関係

テーマの親子関係を示した場合は次のようになります。

  1. 親テーマ=WordPressサイトの外観を決定するのWordpressテーマ
  2. 子テーマ=親テーマをベースとして機能を引き継ぎながら、親テーマの一部ファイルを上書きする形で編集(カスタマイズ)するためのテーマ

子テーマは、既に利用しているWordpressテーマのカスタマイズ用のテーマといって良いでしょう。

ファイル構成として子テーマは次のような構成になっています。

子テーマの構成

子テーマの構成 WordPress

  1. 子テーマディレクトリ(新規生成)
  2. functions.php
  3. style.css

なお、ローカルで生成する場合は文字コードを合わせておいたほうがいいでしょう。

基本的にはUTF-8です。エディタでの保存時に文字コードをチェックしましょう。

子テーマ利用のメリット

子テーマ利用のメリット WordPress

子テーマを利用することの最大のメリットは、通常WordPressテーマを操作してカスタマイズした後に、テーマの更新を行うと、カスタマイズ内容が上書きされて無効になってしまうことを防ぐことができる点です。

子テーマ利用のデメリット

子テーマ利用のデメリット WordPress

一方WordPressで子テーマを利用することにはデメリットもあります。

大きなデメリットはまず、子テーマ作成に手間がかかること。

そして、こちらのほうが肝心ですが、子テーマ利用によって、プラグインやテーマカスタマイズ内容がうまく機能しない場合があるというケースです。

プラグインやカスタマイズ内容がうまく反映されない

プラグインやカスタマイズ内容がうまく反映されない WordPress 子テーマ

子テーマを利用した場合、プラグインやカスタマイズ内容がうまく反映されない場合があります。

これはプラグインファイルがアクションフックなどをかける際に、対象ファイルにズレが生じるためです。

うまくカスタマイズすれば、それも回避することができますが、相当高度なカスタマイズになりますので、子テーマ利用によってプラグインが機能しなかったりする場合には、親テーマを操作するほうが無難かもしれません。

子テーマ作成の手順

子テーマ作成の手順 WordPress

WordPressテーマの子テーマを作成する手順は次のとおりです。

既存のテーマを直接カスタマイズしてしまうと、テーマのアップデートの際にカスタマイズファイルがすべて上書きされてしまうため、子テーマ作成後は子テーマのファイルを操作します。

まずは元となるWordPressの親テーマを選ぶ

元となるWordPressの親テーマを選ぶ

WordPressサイトには複数のテーマをインストールすることができます。子テーマを利用する場合は、まず元となる親テーマを選ぶことが必要です。

子テーマの元となる親テーマを選んで決めた後は、それをベースとして子テーマを作成します。

ディレクトリ新規生成

ディレクトリ新規生成 WordPress

WordPressサイトをインストールしているサーバーの中で、親テーマが格納されているディレクトリを見つけてそのディレクトリの下に子テーマ用のディレクトリを新規生成します。

WordPressインストールディレクトリ/wp-content/themes/テーマ名/子テーマ

一般的には、親テーマのテーマ名の後ろに「-child」を加えて生成します。

style.css の作成

WordPressテーマの子テーマディレクトリにstyle.css

WordPressテーマの子テーマディレクトリにstyle css

基本的には親テーマのstyle.cssをそのまま貼り付けて、

Theme Name: 子テーマ名

Theme URI: 子テーマディレクトリの絶対URL

Template: 親テーマ(テンプレート)名

といった感じで修正部分を記述します。テンプレートだけは親テーマのままにしておきましょう。

この子テーマのスタイル(CSS)を編集することで、Webデザインの細かな調整をすることができます。

WordPressテーマの子テーマディレクトリにfunctions.php

WordPressテーマの子テーマディレクトリにfunctions php

style.cssと同じように親テーマの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、functions.phpの中でWordPressカスタマイズを行うことができます。

ただし、基本的にはstyle.cssによってWebデザイン面を調整できたり、functions.phpでアクションフックやフィルターフックを使うカスタマイズまでに限定されます。

大幅なWordPressカスタマイズには全てのテーマファイルを操作する必要があることがほとんどです。

WordPressテーマの更新をしない予定ならば、functions.phpでフィルターなどを使うよりも親テーマを直接操作したほうが簡単なケースもよくあります。

WordPressの子テーマを利用したカスタマイズで限界を感じた場合は、弊社までご相談ください。

親テーマのCSSなどを上書きする仕組み

親テーマのCSSなどを上書きする仕組み WordPress

このWordPressにおける子テーマの本質的な特徴として、基本的には親テーマを残しながらも一部ファイルを上書きする仕組みが用いられている点が挙げられます。

例えばCSSは読み込む順番によって、後に読み込まれたものが上書き優先されます。このルールは単一のCSSの記述においても同じです。

そして、複数のCSSがあった場合は、ブラウザ上で後で読み込まれるものが先に読み込まれたものを上書きする形で優先されます。

こうしたことから、子テーマ利用の場合、親テーマ子テーマのCSSが両方読み込まれ、先に親テーマのCSSが反映されて、重複している箇所についてはパッチとして、子テーマのCSSが優先されます。

イメージとしては次のとおりです

  1. WordPressサイト表示の際に先に親テーマのCSSを読み込む
  2. その後、子テーマのCSSの読み込んで、親テーマと重複している部分は子テーマのCSSを適用する

WordPressカスタマイズ・修正

ファンフェアファンファーレのWordPress(ワードプレス)のカスタマイズ、テーマカスタマイズサービス

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress(ワードプレス)のテーマ(テンプレート)やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。

WordPress(ワードプレス)のカスタマイズ

WordPressでのホームページ制作(WordPressサイト制作)

WordPress(ワードプレス)を使ったウェブサイト制作・ホームページ制作ならファンフェアファンファーレにお任せください!

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作(WordPressサイト制作)を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作(WordPressサイト制作)ならお任せください!

WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作


「子テーマを利用してWordPressサイトをカスタマイズするメリット」のカテゴリ Web制作・Web関連
タグ: , ,


ホームページ制作、サイトカスタマイズなどのお問い合わせ・ご依頼はこちら