しばらくWordPressサイトを運営していて、その性能には満足しています。しかし今になって、カスタマイズする必要性が生じました。

または、テーマディレクトリからダウンロードした、または購入したテーマを使用してサイトを作成しているときに、サイトの機能では不十分だと感じたとします。

そんな時には、どうすればいいのか。

必要な機能を追加してくれるプラグインを見つけるか、新しいテーマに切り替えることができます。しかし、現在のテーマに満足していて、機能面で必要なものを追加するプラグインが見つからない場合はどうでしょうか?

答えは、テーマのカスタマイズです。そしてベストプラクティスは子テーマ(WordPress)を作成して、カスタマイズを行うこと。

今回の記事では、WordPressで子テーマを作成する方法、それを使用してサイトをカスタマイズする方法、そして子テーマがどのように機能するかをご紹介します。また、親テーマの概念と、サイトの親テーマが子テーマとどのように関係しているのかについても扱います。

子テーマの作成について説明する前に、WordPressサイトのカスタマイズ方法を3つご紹介します。

If you don't want to lose all your customizations, child themes are your best bet. 👶 Learn how to create them with our extensive guide!Click to Tweet

WordPressのカスタマイズ方法

テーマのカスタマイズには常にリスクが伴います。サードパーティのテーマ(たとえば、マーケットプレイスから購入したもの)でコードを編集すると、次にテーマを更新した時に、すべての変更が失われます。つまり、サイトが以前の状態に戻るだけでなく、すべての作業が無駄になってしまいます。

WordPressサイトをカスタマイズする方法は3つあります。

これらを順番に見ていきましょう。

テーマを編集する

サイトでカスタムWordPressテーマを使用している場合、つまり、サイト用に特別に開発したテーマである場合、テーマが次回更新されたときにカスタマイズの内容が失われるリスクはないため、直接編集することができます。

あなたまたは開発者が将来的にテーマに変更を加える場合には、元のテーマではなく、最新の(カスタマイズを施した後の)バージョンがその対象になります。

だからといって、テーマの編集にリスクがないわけではありません。テーマのコーディングに慣れていない場合でも、子テーマを作成してしまう方が安全です(これについては後ですぐに扱います)。私は以下のことを行っています。すべてのサイトで1つの基本テーマを使用し、レイアウト、フック、関数の土台として、これに、各サイトの子テーマを使用してカスタマイズを施します。

テーマを直接編集する場合は、必ず元のテーマのバックアップを保持し、本番サイトではテーマを編集せず(代わりに開発サイトまたはステージングサイトを使用)、 バージョン管理を使用して変更を追跡してください。

また、サードパーティのテーマを使用している場合は、直接の編集は避けましょう。代わりに、プラグインを使用するか、子テーマを作成してください。

プラグインを追加する

WordPressテーマをカスタマイズする2つ目の方法は、プラグインのインストールまたはコーディングです。

カスタマイズがデザイン関連ではなく機能的である場合、プラグインを扱うのが適切です。したがって、コードをテーマに追加するのではなく、代わりにプラグインを作成することをお勧めします。

プラグインは大規模または複雑になる必要はありません。テーマのfunctions.phpファイルにコードを追加する必要がある場合などは、サイトに数行のコードを加えるだけの単純なプラグインを作成できます。これのいい例は、 カスタム投稿タイプの登録です。

テーマのfunctions.phpにコードを追加したくなるかもしれませんが、投稿タイプを追加することはサイトの機能的な変更であり、デザインの修正ではありません。将来的にテーマを切り替える際に、その投稿タイプとそれを使用して作成したすべての投稿を失うのは避けたいものです。そのため、代わりにプラグインをインストールまたは作成するようにしましょう。

ちょうどいい既存のプラグインを見つけられることもあれば、プラグインを自分でコーディングする必要がある場合もあります。

WordPressのレポジトリ

WordPressのレポジトリ

プラグインを作成すべきか、テーマ(または子テーマ)をカスタマイズすべきかわからない場合は、次の点を考慮してください。将来的に、サイトのデザインを変更し新しいWordPressテーマをインストールした場合には、この変更内容は維持したいでしょうか?答えが「はい」なら、その変更は見た目ではなく機能面での話であり、プラグインで実装するようにしましょう。

子テーマを作成する

WordPressテーマをカスタマイズする3番目の方法は、子テーマを作成することです。

子テーマを使用したパターンを以下に示します。

ここまでをまとめると、子テーマは、サイトにカスタマイズを施す効果的かつ安全な方法です。それでは、子テーマについてもう少し深く見てみましょう。

WordPressの子テーマとは?

では、WordPressの子テーマとは正確にはどんなものなのでしょうか?そして具体的な機能とは?

子テーマは、親テーマと呼ばれる別のテーマと連携して機能します。

子テーマには、それが子テーマであり、親テーマが何であるかをWordPressに伝えるための特定の指示が記述されます。WordPressは、通常、親テーマのコードを使用しますが、これを子テーマのコードが上書き(必要に応じて)するかたちとなります。

WordPress子テーマ内部のファイル

すべてのWordPress子テーマには、少なくとも2つのファイル(スタイルシートと関数ファイル)が必要です。スタイルシートの上部にはコメントアウトしたテキストがあり、WordPressにこれが子テーマであり、親テーマが何であるかを伝えます。関数ファイルには、親テーマからスタイルシートをキューに入れる関数が含まれます。

注意:子テーマのスタイルシートから親テーマのスタイルシートを呼び出すように指示する記事に出くわすかもしれません。これは現在正しい方法ではなく、代わりに関数ファイルのエンキューを使用する必要があります。これのやり方はすぐにご紹介します。

子テーマにその他のファイルを含める必要はありません。親テーマとは違い、テーマに特定のファイルがない場合の代用としてのindex.phpファイルは必要ありません。テンプレートファイルが子テーマに存在しない時には、WordPressは親テーマのファイルを使用するためです。

したがって、子テーマに何を実行させるかに応じて、スタイルシートまたは関数ファイルにコードを追加するか、子テーマで別のファイルを作成して親テーマを上書きします。具体的には、以下のような選択肢があります。

しかし、余分にファイルや関数を追加した時に、WordPressはどれを使用すべきかをどのようにして判断するのでしょうか?親テーマのものか、子テーマのものか。これについて考えてみましょう。

WordPressはどのようにしてテンプレートファイルを選択しているのか

WordPressはサイトのコンテンツを表示するときにテーマからテンプレートファイルを選択するのですが、その際には、テンプレート階層が参照されます。

WordPressのテンプレート階層

WordPressのテンプレート階層

WordPressはこの階層を使用して、テーマ内のテンプレートファイルを扱い、特定の種類のコンテンツを表示するための適切な階層を見つけます。上部(上の画像の左側)から始まり、指定されたコンテンツタイプの各ファイルを順に探します。そして、そのコンテンツを表示するファイルが見つかると、それを使用します。

それでは、テーマにarchive.phpファイルとcategory.phpファイルがあり、tag.phpファイルがないと仮定します。カテゴリアーカイブを表示する際には、WordPressはcontent.phpを使用します。これは、コンテンツタイプに固有であるためです。タグアーカイブを表示する場合には、代わりにarchive.phpを使用します。

WordPressが指定されたコンテンツタイプのテンプレートファイルを見つけられない時、最後の手段としてindex.phpファイルを参照します。だからこそ、すべてのスタンドアロンテーマ(つまり、子テーマは含まれない)にindex.phpファイルが必要になります。

同じことが投稿と固定ページにも言えます。たとえば、テーマにsingular.phpファイルがあるとします。これは、全ての投稿タイプ (カスタム投稿タイプを含む)の投稿を扱います。また、page.phpファイルもあります。固定ページを表示する際には、page.phpを使用します。投稿を表示するには、singular.phpを使用します。また、カスタム投稿タイプを登録し、その投稿タイプのテンプレートファイルを追加しない場合には、singular.phpが再び使用されることになります。

そして子テーマを使用する場合であっても、WordPressは引き続きテンプレート階層を使用し、サイトのコンテンツを出力するときに使用すべきファイルを決定します。親テーマと子テーマの両方のファイルを確認し、最初に見つかったファイルを使用します。

次に、子テーマにsingular.phpとpost.phpがあり、親テーマにpage.phpとindex.phpがあるとします。投稿を出力する際には、WordPressは子テーマのpost.phpを使用します。固定ページを出力するには、親テーマのpage.phpを使用します。また、カスタム投稿タイプの投稿を出力するには、子テーマのsingular.phpを使用します。

それでは、子と親の両方のテーマに同じ役割を果たすファイルが存在する場合はどうでしょうか?

前の例を基にして、子テーマにpage.phpファイルを追加するとします。そのテーマは子テーマにあるため、親テーマの同じファイルを上書きします。したがって、固定ページを表示する際には、WordPressは子テーマの側にあるpage.phpファイルを使用します。

このようにして、子テーマを作成して親テーマをカスタマイズすることが可能になります。テンプレートファイルのコピーを親テーマから子テーマに追加し、これを編集してカスタマイズすると、WordPressは親テーマのテンプレートファイルの代わりにこの新しいテンプレートファイルを使用します。親テーマを編集することなく、コンテンツ表示の際に用意したカスタマイズが使用されるということです。素晴らしい仕組みですね!

WordPressはどのようにして親テーマと子テーマの機能を実行しているのか

テーマのテンプレートファイルではなく、関数をカスタマイズする場合はどうでしょうか?

関数のカスタマイズも可能です。まず、確認事項として、これはプラグインではなく、子テーマを使用して行います。たとえば、親テーマに既に記述されている関数を編集する場合(フッターにコピーライトを出力する関数など)が考えられます。

これを実行するには、新しい関数を子テーマの関数ファイルに、または関数ファイルから呼び出すことになるインクルードファイルに追加します。

新しい関数が親テーマの機能を上書きするために、関数を上書きする方法を理解する必要があります。これには、以下の3つの方法があります。

これらの詳細は、記事の後半でご紹介します。まずは、子テーマを使用する場合と使用しない場合の違いを考えてみましょう。

WordPressで子テーマを使用すべきケース(メリット)

ここまでで、子テーマが何であるか、そして、これを使用して親テーマのテンプレートファイルまたは関数を上書きする方法を扱いました。

簡単にまとめると、次のいずれかが当てはまるならば、子テーマを使用する必要があります。

これのメリットは以下の通りです。

それでは、子テーマを使うべきではないケースはどうでしょうか?

WordPressで子テーマを避けるべきケース(デメリット)

子テーマではなく、別の方法でサイトをカスタマイズすべきケースもあります。以下の通りです。

デメリットは以下の通りです。

子テーマを使用すべきタイミング(または使用しないケース)がわかったところで、実際にWordPressで子テーマを作成する方法を学びましょう。

WordPressサイトで子テーマを作成する方法

WordPressで基本的な子テーマを用意するには、スタイルシートと関数ファイルの2つのファイルを作成する必要があります。一つずつ見てみましょう。

スタイルシート

ファイルを作成する前に、テーマを保持するフォルダーを作成する必要があります。これは、WordPressインストールのwp-content/themesファイルに作成します。

注意:本番サイトをいきなり編集しないでください。まず開発サイトにコードを追加してから、ステージングサイトでテストしましょう。問題がなければ、本番サイトに変更を適用します。ちなみにKinstaのすべてのホスティングプランには、ステージング環境が含まれています。

新しく作成するテーマ(子テーマ)のフォルダーに、style.cssというファイルを作成します。以下を追加してください。

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

このテキストはコメントアウトされています。サイトで何かを実行したり、機能を拡張したりするコードではありません。これはWordPressにテーマの役割を伝えるものです。すべてのテーマでこのようなテキストが必要になります。これを記述しないと、WordPressはこのファイルをテーマとして認識できません。

各行について、何を意味するのか見てみましょう。

子テーマの最も重要な行は、Templateです。これがないと、テーマは子テーマとして機能しません。子テーマのみにこの行が含まれます。

これをテーマのスタイルシートに追加し、編集してあなたの情報を記入してください。Template行を編集して、既存のテーマが格納されているフォルダー名を指定する必要があります。これで親テーマと接続できます。

そして、ファイルを保存してください。ここでサイトからテーマの詳細画面を見ると、次のすべてが表示されているはずです。

スクリーンショットのないWordPressのテーマページ

スクリーンショットのないWordPressのテーマページ

スクリーンが読み込まれていないため、見栄えは良くありません。テーマの外観を表す画像が必要です。テーマが親テーマと大きく異なる場合を除き、screenshot.pngファイルを親テーマから子テーマにコピーしましょう。

スクリーンショットありのWordPressのテーマページ

スクリーンショットありのWordPressのテーマページ

関数ファイル

次のステップでは、関数ファイルを子テーマに追加します。親テーマからスタイルシートをエンキューするために必要になります。これがないと、サイトはまったくスタイルを持たず、次のようになります。

CSSのない状態のトップ画面

CSSのない状態のトップ画面

お世辞にも素敵とは言えません!それでは、スタイルを追加して、見た目を改善しましょう。

子テーマのフォルダーにfunctions.phpというファイルを追加します。それを開き、次のコードを追加してください。

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

wp_enqueue_style()関数を使用して親テーマからスタイルシートをエンキューします。get_template_directory_uri()関数がそのファイルが格納されている場所を特定します。この関数は、wp_enqueue_scriptsにフックされている、kinsta_parent_styles()という私が作成した関数内にあります。

wp_enqueue_stylesではなく、 wp_enqueue_scripts関数を使用していることを疑問に思っているかもしれません。これは、wp_enqueue_scriptsがスクリプトとスタイルの両方に使用されており、wp_enqueue_stylesフックがないためです。

このコードを編集して、関数の名前に独自のプレフィックスを追加してください。親テーマまたはプラグインの他の関数と競合しないように、私は「childtheme」を使用しています。

ここまでできたらファイルを保存します。

WordPressの子テーマを有効化する方法

子テーマが準備できたら、有効化する必要があります。子テーマを有効にすると親テーマが無効になるのではと心配する人もいるかもしれませんが、ご心配なく。WordPressは親テーマのファイルを使用すべき(子テーマに上書きするファイルがない限り)ことを認識しています。現段階では、子テーマにその他のファイルや機能を追加していないため、サイトは親テーマを有効化した場合とまったく同じように機能します。

注意:まずは開発またはステージング環境で試すようにしましょう。テストするまで、本番サイトでの子テーマ有効化は行わないでください。

WordPress管理画面で「外観」>「テーマ」に移動します。するとサイトにインストールされている他のテーマと一緒に、子テーマが表示されるはずです。

テーマにカーソルを合わせ、「有効化」ボタンをクリックすると子テーマが有効になります。これで、サイトにアクセスすると、以前と同じように表示されます。

ウェブサイトのトップページ

ウェブサイトのトップページ

まだカスタマイズを追加していないため、外観は同じです。それでも、これで使い始めることのできる子テーマの用意ができました。上出来です!

WordPressで子テーマをカスタマイズする方法

WordPressサイトの子テーマが完成したので、今度はカスタマイズしましょう。ここでは、テンプレートファイルを追加して親テーマのファイルを上書きする方法、子テーマにスタイルを追加する方法、そして新しい関数を追加する方法を扱います。

テンプレートファイルから始めましょう。

WordPress子テーマにテンプレートファイルを追加する方法

WordPressがサイトにコンテンツを表示するときに、どのようにテンプレートファイルを選択するかは、既にご説明しました。2つのことを頭に入れておく必要があります。

カスタマイズをする方法としては、親テーマから関連するファイルのコピーを作成し、それを子テーマに追加してから編集するのが簡単だと思います。

これは、子テーマのファイルが親テーマと同じ名前のファイルである場合でも、別のコンテンツタイプを表示するための新しいファイルである場合でも、階層上位のファイルである場合でも関係なく言えることです。

新しいバージョンのpage.phpを子テーマに追加すると、親テーマのpage.phpが上書きされます。page.phpを親テーマから子テーマにコピーして編集しましょう。親テーマには変更を加えないようにします。ファイルを(移動ではなく)コピーしてください。

たとえば、子テーマにカスタムページテンプレートが必要な場合は、page.phpを子テーマにコピーし、名前を変更して編集します。

このようにすると、カスタマイズする必要のないファイルのすべての機能が引き続き正しく実行されます。テンプレートパーツについても同様です。

WordPressの子テーマにスタイルを追加する方法

子テーマのstyle.cssファイルにスタイルを追加することもできます。これにより、親テーマのスタイルシートのスタイルが拡張または上書きされることになります。

WordPressは最初に親テーマからスタイルシートを呼び出し、次に子テーマからスタイルシートを呼び出します。つまり、親テーマのスタイルと同じ要素を対象とするスタイルを子テーマに追加すると、同じセレクタを使用する限り、親テーマのスタイルが上書きされます。

そこで、サイトのタイトルの色を変更したいとします。親テーマでは、次のようなスタイルになっています。

h1.site-title {
 color: #000;
}

子テーマで上書きするには、以下を追加します。

h1.site-title {
 color: #303030;
}

親テーマの後に子テーマのスタイルが上書きされ、ブラウザにはその結果が表示されます。

WordPress子テーマに関数を追加する方法

WordPressの子テーマは、機能を追加したり、親テーマの機能を上書きしたりするためにも使えます。

子テーマでの関数の記述は、テンプレートファイルを追加するよりも少し複雑ですが、もちろん可能です。

親テーマのどの関数とも関わらない新しい関数を作成するなら、特別な工夫はいりません。子テーマのfunctions.phpファイルに関数を追加し、アクションフックまたはフィルターフックを記述すれば準備OKです。

一方で、親テーマの関数を上書きまたは編集する場合は、利用できるメソッドの整理をしましょう。子テーマで親テーマの関数を上書きする方法は3つあります。

それぞれの方法を詳しく見てみましょう。

プラガブル関数を上書きする

プラガブル関数には条件チェック機能があり、すでに呼び出されている同じ名前の別の関数があるかどうかが確認されます。もしあれば、関数は実行されません。

WordPressは、子テーマの関数を親テーマのそれよりも先に実行します。WordPressが親テーマのプラガブル関数に出くわし、それと同じ名前の関数が子テーマにある場合には、そのプラガブル関数は実行されません。

例をご紹介します。WooCommerceサイトのStorefrontテーマにはコピーライトを出力する関数があります。コンテンツのない状態の関数は次のとおりです。

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

これを上書きしたい場合には、同じ名前(storefront_credit())で別の関数を記述し、親テーマと同じフックを設定します。

親テーマの関数のフックを解除する

親テーマの関数がプラガブルでない場合でも、実行されないようにすることができます。親テーマに、parent_function()という関数があり、initフックに優先順位20でフックされているとします。独自の関数で置き換えるために、これが実行されないようにしてみましょう。

親テーマの関数は次のようになります。

function parent_function() {
 //contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

フックを解除するには、以下を子テーマに記述します。

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

2番目の関数を各ページ上部で実行されるwp_headにフックし、元の関数と同じ優先順位の値を含める必要があるので、その点にはご注意ください。元のadd_action()関数に優先順位がなかった場合は、子テーマのremove_action()関数から省略することができます。

補足:元の関数がアクションフックではなくフィルターフックを使用している場合、remove_filter()を同じ要領で使用します。

関数を別の関数で拡張する

関数を上書きまたは削除するのではなく、関数を拡張したいこともあるでしょう。この場合、別の名前で新しい関数を記述し、同じフックと組み合わせます。

親テーマのフッターについてのparent_footerというアクションフックがあるとしましょう。そのフックを使う関数は全て、フックが存在している場所で実行されます。

親テーマには、フッターにデータを入力するparent_footer_content()という関数がすでにあります。これにコードを追加したい場合はどうすればいいでしょうか?

親テーマのparent_footer_content()関数は次のようになります。

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

これの後に、さらにコンテンツを追加したい場合は、最初の関数の後に実行する優先順位で、同じアクションフックを使った関数を子テーマに作成します。親テーマの機能には優先順位が設定されていないため、デフォルトの10となります。そのため、より高い数値を使用して、その後にトリガーされるようにしましょう。

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

これにより、親テーマの関数のコードの後に、子テーマの関数のコードが追加されます。

子テーマと親テーマのトラブルシューティングをする方法

ここまでで、WordPressで子テーマを作成する方法と、それを使用してテンプレートファイルを上書きする方法、スタイルを追加する方法、そして、サイトに機能を追加する方法を見てきました。

それでは、子テーマが期待どおりに機能しない場合はどうすればいいでしょうか?コンテンツが思った通りに表示されない時、または機能が実行されない場合は?

そんな時には、以下のチェックリストを子テーマのトラブルシューティングにお使いください。

  1. 子テーマが有効であり、親テーマが有効になっていないことを確認してください。意外とこのステップを忘れてしまうことはありがちです。
  2. ブラウザのキャッシュと、サイトのプラグインによって作成されたキャッシュをクリアしてください。
  3. 子テーマのwp-config.phpファイルでwp-debugをtrueに設定しましょう。白い画面が表示されたら、問題の原因となったコードやそれが位置するファイルを示すメッセージも表示されるはずです。これは、バグの正体と問題のファイルを特定するのに役立ちます。
  4. ページ、投稿、アーカイブの出力コードを確認してください。body要素を見つけて、そのクラスを確認します。これにより、どのタイプのコンテンツを見ているのかがわかり、どのテンプレートファイルが使用されているか把握することにつながります。時に、思い込みに気づくこともあります。たとえば、ブログのメインページでは、投稿のアーカイブが表示されていても、phpを使用することはありません。
  5. ファイルの名前が正しいかどうか確認してください。テンプレート階層を確認し、正しい構文を使用しているかチェックしましょう。
  6. 親テーマからファイルを複製し子テーマに追加した場合は、変更を保存したかどうか確認してください。
  7. プラガブル関数を上書きする関数が機能しない場合には、プラガブル関数とまったく同じ名前を付けているか、そして、親テーマの関数が実際にプラガブルであるか確認してください。
  8. 削除したはずの関数が動き続けている場合には、正しい優先順位を追加したか、スペルが親テーマの関数・フックと同じになっているか確認してください。
  9. 関数を上書きまたは拡張するために優先順位を使用した場合は、優先順位の値を増やしてみてください。これで、関数が完全に最後にトリガーされるようになります。同じフックを使いコードに干渉する他の関数がないかどうかも確認してください。

うまくいけば、これのいずれかが問題の特定と子テーマでの問題の修正に役立ちます。大事な点をもう一度おさらいします。親テーマは直接編集しないでください。

WordPressの子テーマを使用する際の便利なヒント

子テーマは大事なトピックであり、WordPressに欠かせない機能です。私自身、構築するすべてのサイトで子テーマを使用しています。

子テーマを効果的に使用できるように、私なりの子テーマ利用の際のポイントをご紹介します。

まとめ

子テーマはWordPressの便利な機能で、コードを直接編集せずにテーマをカスタマイズできます。これでテーマに機能を追加したり、スタイルをカスタマイズしたり、テンプレートファイルを作成・編集したりできます。

この記事にある方法で、WordPressのベストプラクティスに従った子テーマ作成ができ、さまざまなタスクに活用できるはずです。親テーマ更新時にも、変更点やカスタマイズを失ってしまう心配はご無用です。


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。