WordPressの子テーマを操作するための究極のガイド

公開: 2016-01-05

HeroThemesで購入したテーマをカスタマイズしたい場合、おそらく自分自身やクライアントのためにオーダーメイドのデザインを使用してWebサイトを構築している場合は、WordPressの子テーマの力を利用できることが必要です。

最も基本的には、子テーマを使用すると効率が向上します。すべてのプロジェクトで使用するコードを独自の親テーマに保持するか、私たちのような既成の親テーマを使用することは、 DRY（Do Not Repeat Yourself）の原則。

さらに、子テーマと親テーマを使用して、コアコードベースを使用してサイトのネットワークを作成したり、サードパーティのテーマフレームワークに基づいてカスタムテーマを構築したり、テーマフレームワークとして使用する独自の高度な親テーマを作成したりすることもできます。。この記事では、子テーマの基本事項の概要を簡単に説明してから、より高度なテクニックをいくつか紹介します。あなたは学びます：

子テーマを使用して、サードパーティの親テーマまたはテーマフレームワークをプロジェクトのニーズに適合させる方法
WordPressが親テーマと子テーマのそれぞれでテンプレートファイルに優先順位を付ける方法
子テーマの関数ファイルで親テーマ関数をオーバーライドする方法。

親と子のテーマを理解する

理論的には、どのテーマも親テーマとして機能できますが、この役割に適したテーマもあります（私たちを含む）。テーマの1つを使用していて、それを独自のプロジェクト用に微調整したい場合は、メインテーマをハックするよりも、子テーマを使用する方がはるかに優れています。つまり、更新するとすべての変更が失われます。将来のバージョンへのテーマ。子テーマを作成するには、新しいテーマを作成し、スタイルシートの先頭に以下を追加するだけです。以下の私の例では、HeroThemesテーマHelpGuruを親として使用していますが、KnowAllなどの別のHeroTheme製品を含む任意のテーマを使用できます。

今日からナレッジベースの構築を始めましょう！

KnowAllテーマには、ナレッジベースサイトをカスタマイズするのに役立つ子テーマが含まれています

テーマを取得

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

重要な行は次の2つです。

Template: helpguru
@import url("../helpguru/css/style.css");

最初のセクションはテンプレートを指定します。これは、これが子テーマであり、その親がHelpGuruテーマであることをWordPressに通知します。ここでは、テーマの名前ではなく、親テーマのフォルダーの名前を使用していることに注意してください（したがって、上記では「HelpGuru」ではなく「helpguru」を使用しました）。

2番目のセクションでは、親テーマからスタイルシートをインポートします。これは、親テーマのすべてのスタイルが子テーマでアクティブ化されることを意味します。次に、この@import宣言の下に独自のスタイルを追加します。これは、両方のテーマのスタイルが使用されることを意味しますが、同じ要素の両方のスタイルシートに宣言が存在する場合、カスケードのために子テーマのCSSが優先されます（子テーマのスタイリングは、親テーマのスタイリングの後になります）。

子テーマはスタイルシートで構成することもできますが、必要に応じて他に何も含めることはできません。その場合、子テーマを使用して、親テーマのスタイルの一部をオーバーライドするだけです。または、テンプレートファイルや関数ファイルを追加することもできます。その場合、WordPressが親テーマと子テーマのテンプレートファイルにアクセスする方法を理解する必要があります。

親子テーマテンプレートファイル

WordPressが親と子のテーマでテンプレートファイルを使用する方法は非常に簡単です。特定のページ（または投稿、またはその他のコンテンツタイプ）が表示されている場合、WordPressは、テンプレート階層に従って、親テーマまたは子テーマのいずれかから最も関連性の高いテンプレートファイルを使用します。同じテンプレートファイルの2つのバージョンが見つかった場合は、子テーマのバージョンを使用します。これは、次の2つのシナリオで、子テーマのテンプレートファイルが親テーマのテンプレートファイルを上書きすることを意味します。

子テーマに、親テーマよりも階層の上位にあるテンプレートファイルが含まれている場合。
または、親と子のテーマの両方に必要なテンプレートファイルのバージョンが含まれている場合。

親または子のテーマテンプレートファイルの決定

WordPressはテンプレート階層を使用して、使用するテンプレートファイルを決定しますが、これは、親テーマと子テーマのそれぞれにあるファイルと相互作用します。簡単に言うと、WordPressは次の3つのステップを実行します。

表示されているコンテンツの種類を識別します。
親テーマまたは子テーマのいずれかでそのコンテンツを表示するファイルが見つかるまで、テンプレート階層を介して機能します。
ファイルが親テーマと子テーマの両方に存在する場合、ファイルは子テーマのファイルを使用します。

これを例で説明しましょう。次の表は、2つの仮想テーマのテンプレートファイルのセットを示しています。一方は他方の子です。強調表示したファイルが優先されます。

したがって、上記の例では、特定のタイプのコンテンツを表示するためにどのテンプレートファイルが使用されるかを見てみましょう。

'product'カスタム投稿タイプの単一投稿は、子テーマのsingle-product.phpを使用して表示されます。
他の投稿タイプ（通常の投稿を含む）の単一の投稿は、子テーマのsingle.phpを使用して表示されます。
静的ページは、親テーマのpage.phpを使用して表示されます。
ウィジェットカテゴリのリストは、子テーマのcategory-widgets.phpを使用して表示されます。
他のカテゴリリストは、親テーマのcategory.phpを使用して表示されます。
他のアーカイブリストは、親テーマのarchive.phpを使用して表示されます。
検索結果は、親テーマのsearch.phpを使用して表示されます。
親テーマの404.phpを使用して404ページが表示されます。
特定のテンプレートファイルのない他のページは、子テーマのindex.phpを使用して表示されます。

さらに進んで–親テーマの機能をオーバーライドする

親テーマのCSSファイルやテンプレートファイルをオーバーライドまたは補完するだけでなく、子テーマを使用して、親テーマの機能をオーバーライドしたり、機能を追加したりできます。

警告！ 子テーマを使用しているのが機能を追加することだけである場合は、プラグインを作成する方がよい場合があります。 残念ながら、親テーマと子テーマの関数ファイルは、スタイルシートと同じように相互作用しません。実際、それらは逆の方法で機能します（紛らわしいですが）。 WordPressは、子テーマの関数の後に親テーマの関数を呼び出します。つまり、子テーマの関数をオーバーライドできます。これは少し苦痛のように聞こえますが、サイトで必要なものとして子テーマを作成しましたね。幸いなことに、これを克服する方法があります。最初の方法は、子テーマで使用する方法です。これは、関連するアクションまたはフィルターフックに関数をアタッチするときに優先順位を設定することです。 2つ目は親テーマで行われ、それは関数をプラグ可能にすることです。これについてはすぐに説明しますが、最初に、子テーマのメソッドを見てみましょう。

優先度を使用して親テーマの機能をオーバーライドする

子テーマに追加する各関数をアクティブにするには、 add_action()またはadd_filter() ）を使用してアクションフックまたはフィルターフックに関数をアタッチする必要があります。 add_action() （）関数とadd_filter()関数には、次の3つのパラメーターがあります。

$tag –アクションまたはフィルターフックの一意の識別子
$function_to_add –関数の名前
$priority –関数をフックする優先度（詳細はまもなく）

add_filter()を使用すると、4番目のオプションのパラメーターである$argumentsを使用できますが、これは子テーマには特に関係ありません。ほとんどの場合、最初の2つのパラメーター（両方とも必須）が使用されますが、オプションの$priorityパラメーターを使用して、親テーマの関数を子テーマの関数でオーバーライドできます。優先度が高いほど、読み込みが遅くなります。デフォルトは10であるため、親テーマで優先度が指定されていない場合は、子テーマの優先度を10より大きい数値に設定するだけです。これを見てみましょう。動作します。 HelpGuruテーマの子を使用していて、メニュー機能をオーバーライドして独自の機能を追加したいとします。このテーマには、テーマを設定するためのht_theme_setup()関数（メニューの登録、注目の画像サポートの追加など）が含まれており、 after_setup_themeアクションフックにアタッチされています。 HelpGuruの関数ファイルのコードは次のとおりです。

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

子テーマのht_theme_setup()関数の要素（すべてではありません：すぐに説明します）をオーバーライドするには、HelpGuruによって提供される機能の要素を置き換える関数を記述し、それをafter_setup_themeアクションにアタッチします。フック、10より高い優先度を指定：

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

WordPressが同じフックに接続されたこれらの関数に遭遇すると、優先度の低い関数、つまり親テーマの関数を最初に起動します。次に、子テーマから優先度の高いものを起動します。つまり、親テーマの関数をオーバーライドできます。上で述べたように、別の方法があります。それは、親テーマとしてより簡単に使用できるようにテーマに書き込むことをお勧めします。それは、関数をプラグ可能にすることです。

プラグ可能な関数を使用して子テーマのオーバーライドを許可する

WordPressは、親テーマの関数を子テーマの関数の後に渡すので、親テーマの関数をコーディングして、子テーマの同じ名前の関数をチェックし、存在する場合は親テーマの関数をチェックしないようにすることができます。合格しました。これは、上記のHelpGuruで見たような条件ステートメントを使用して行います。

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

同じ名前の関数がまだ渡されていない場合（子テーマなど）、親テーマの関数が渡されます。ただし、WordPressがこの名前の関数を既に検出している場合は、プラグ可能な関数（つまり、親テーマの関数）を無視します。これを機能させるには、オーバーライドする親テーマの関数と同じ名前の関数を子テーマに作成するだけです。したがって、 ht_theme_setup()関数全体をオーバーライドするには、子テーマでこれを使用します。

function ht_theme_setup() {
// contents of function
}

それでおしまい！同じ名前の別の関数を作成するだけで、親テーマの関数が上書きされます。注：この手法は、独自の親テーマを作成している場合にのみ機能します。サードパーティの親テーマの関数ファイルを編集してプラグイン可能にしないでください。結局のところ、子テーマを作成することの全体的なポイントは、親に触れないことです！

概要

私が示したように、子テーマを使用すると、特にクライアントまたは自分用のカスタムサイトを開発する場合に、WordPress開発者としての効率と効果を高めることができます。少なくとも、HeroThemesの1つなど、既存のテーマの子テーマを使用すると、同じ作業を何度も繰り返す必要がなくなるため、開発ワークフローをより高速かつ効率的にすることができます。

子テーマのテンプレートファイルと関数ファイルを使用して、親テーマの機能をオーバーライドまたは補足することで、これをさらに進めることができます。また、子テーマを最大限に活用したい場合は、独自の親テーマを作成して、すべての新しいプロジェクトの迅速な開始点を提供し、最初から始めるよりも少ない労力で子テーマに多くを追加できるようにします。。