WordPressの子テーマの究極のガイド

公開: 2017-06-29

WordPressエコシステムは、見栄えのする無料のプレミアムテーマでいっぱいですが、すべてのボックスにチェックマークを付けるような、ニーズに最適なテーマを見つけるのは非常に困難です。 幸い、WordPressには、子テーマと呼ばれるこの問題の解決策があります。 したがって、心配しないでください。子テーマを使用して変更を適用し、ほぼ完璧なテーマを作成できます。

WordPressの子テーマは、カスタムCSSコードのように単純にすることも、既存の親テーマテンプレートを上書きして、テーマ機能を変更または追加することもできます。 この記事では、子のテーマについて知っておく必要のあるすべてのことを説明しますので、すぐに説明しましょう。

子供のテーマとは何ですか？

子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承するテーマです。 子テーマは、既存のテーマを変更するための推奨される方法です。

—WordPressドキュメント

上記の公式のWordPress定義は素晴らしいですが、これが何を意味するのかをもっと詳しく見てみましょう。 スターター（ベアボーン）の子テーマは、親テーマとまったく同じように見え、機能します。 スターターの子テーマを作成する方法をすぐに説明しますが、今のところ、スターターテーマは最小限の子テーマであり、親テーマからすべてを継承します。 次に、子テーマにファイルとコードを追加できます。これにより、親テーマの外観と機能が変更または強化され、別の固有のテーマになります。

子供のテーマのアナロジー
子供のテーマのアナロジー

子テーマを使用することには多くの利点があり、実際の欠点はないので、子テーマを使用する必要がある理由を見てみましょう。

なぜ子テーマを使用する必要があるのですか？

さらに良い質問：なぜ子テーマを使用しないのですか？ 私は実際にそれを使用しない正当な理由を考えることはできませんが、子テーマを使用する必要があるいくつかの大きな理由を知っています。

テーマの更新–テーマコードを直接変更し、将来そのテーマを更新すると、これらの変更はすべて失われます。 子のテーマを使い始めるには、この理由だけで十分だと思います。 テーマファイルを直接編集していて、テーマの更新によって作業が破壊されたと言ってサポートチケットを開いたクライアントが数人いました。 子テーマを使用した場合、すべてが問題ありません。 テーマの更新も必要ですか？ はい！ 例：テーマの更新にセキュリティ修正が含まれていて、テーマを更新しないことで、WPサイトがハッカーの潜在的な標的になる可能性がある場合はどうなりますか？

コード編成–すべての変更は子テーマフォルダーに配置されるため、どの変更が行われ、どのように行われたかを明確に確認できます。 将来何かを変更する必要がある場合は、これらの変更をどこで見つけるかを正確に知ることができ、これにより多くの時間を節約できます。

より迅速な開発–子テーマの親テーマのスタイルと機能を拡張またはオーバーライドすることは、テーマの更新で上書きされる可能性のある変更されたテーマコードベースを維持するよりもはるかに優れたオプションです（更新が重要であることはすでに確立されています:)） 。

前述したように、子テーマを使用しない理由は1つも考えられないので、できるだけ早くスターター子テーマを設定することをお勧めします。 新しいテーマをインストールするときは、親テーマをカスタマイズする計画がすぐにない場合でも、スターター子テーマを作成して代わりに使用する必要があります。 私を信じてください。将来、いくつかの変更を加える必要があるときは、子テーマを使用していることをうれしく思います。

補足として：WordPress 4.7では、カスタムCSSコードを追加できる追加のCSSエディターがカスタマイザーに導入されました。 したがって、テーマの変更が少しカスタムCSSコードであることが確実な場合は、子テーマは必要ありません。 追加のCSSエディターを使用してCSSコードを追加できます。それだけです。 しかし、将来、テーマに追加の変更を加えないでよろしいですか？ あなたは？

スターターチャイルドテーマを作成する方法は？

何がなぜかがわかったので、その方法を見てみましょう。 すでに述べたように、スターターの子テーマは非常に最小限の子テーマです。 外観と機能は親テーマとまったく同じですが、変更と改善の開始点になります。

この例では、Adrenaline親テーマのスターター子テーマを作成します。

  1. フォルダを作成し、adrenaline-pt-childという名前を付けます。 ベストプラクティスは、親テーマのフォルダー名（adrenaline-pt）を使用し、その末尾に「-child」を追加することです。これにより、どのテーマが子テーマで、どのテーマが親であるかが明確になります。
  2. 子テーマフォルダーにstyle.cssファイルを作成します。 style.cssファイルを開き、このコードをそのファイルに貼り付けます（このコードはファイルの先頭にある必要があります）。
     /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ /* Write your custom CSS code below */
  3. 子テーマフォルダーにfunctions.phpファイルを作成します。 functions.phpファイルを開き、次のコードを貼り付けます。
     <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
  4. 必要に応じて、screenshot.png（または.jpg）を子テーマフォルダーに追加できます。これは、[外観]-> [テーマ]セクションにプレビュー画像として表示されます（スクリーンショット画像のサイズは1200x900pxである必要があります）。
子テーマのフォルダー構造
子テーマフォルダの構造

これが基本的なスターターチャイルドテーマです。 これをインストールするには、このフォルダーを親テーマフォルダーの隣のwp-content / themes /ディレクトリに配置する必要があります。 または、この子テーマフォルダーからzipファイルを作成し、 [外観]-> [テーマ]のWP管理ダッシュボードから通常のWPテーマとしてインストールすることもできます。

上記のスニペットのコードを説明しましょう。

style.css –「必須」のフィールドは、テーマ名（子テーマの名前）とテンプレート（親テーマのフォルダー名）のみです。 他のフィールドはオプションであり、子テーマはそれらがなくても機能します。 ただし、これらのメタフィールド：テーマURI、説明、作成者、…は「必要なもの」であり、 WP管理->外観->テーマに表示されます。これにより、子テーマがより「完全」になります。

Functions.php –子テーマを親テーマと同じスタイルにするために、親テーマのCSSファイルをキューに入れる必要があります。 これを行うための推奨される方法は、 wp_enqueue_scriptsアクションフックを使用することです。 コールバック関数では、親テーマのCSSファイルをwp_enqueue_style関数でキューに入れます。 親テーマが複数のCSSファイル（ style.cssだけでなく）を使用している場合、親テーマのエンキュー手法によっては、それらもエンキューする必要がある場合があります。

Adrenalineテーマでは、カスタムWooCommerce CSSファイルも使用しているため、子テーマにもエンキューするのが最適です。 wp_enqueue_style関数のhandleパラメーターに親テーマと同じ名前を付ける必要があるため（この例ではadrenaline-woocommerce ）、ここで注意する必要があります。 このようにして、子テーマのCSSファイルが最後にキューに入れられ、親テーマのスタイルを問題なく上書きできるようになります。 Adrenalineテーマの更新されたfunctions.phpファイルは次のとおりです。

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); /** * Enqueue additional parent theme CSS files. * Watch out to name the "handle" parameter the same as it is named * in the parent theme, otherwise the file might be enqueued twice. * In this example the parent handle name for this CSS file was * "adrenaline-woocommerce" */ wp_enqueue_style( 'adrenaline-woocommerce', get_template_directory_uri() . '/woocommerce.css' ); }

この時点で、親スタイルを子テーマに追加する古い方法は、CSS @importルールを使用していたことを述べておきます。 style.cssの@importルールを使用して親テーマのCSSファイルをインポートする子テーマを使用している場合は、親テーマのCSSファイルがfunctions.phpにエンキューされている上記の例に切り替えることをお勧めします。ファイル（およびstyle.cssから@importルールを削除します）。 @importルールの問題は、 wp_enqueue_scriptsフックを介して親CSSファイルをエンキューするよりもはるかに遅いことです。 この問題の詳細については、こちらをご覧ください。

「子テーマを作成するためのプラグインが必要です…」とお考えかもしれません。はい、あります。 このプラグインについては、構成済みの親テーマの子テーマへの切り替えというセクションで説明します。

親と子のテーマテンプレートファイルはどのように機能しますか？

子テーマをカスタマイズする方法の例を続ける前に、WordPressテンプレート階層がどのように機能するかを簡単に見ていきます。

WordPressは、テンプレートファイルを使用して、Webサイトの訪問者に表示される実際のHTMLページを作成します。 よく知られているWordPressテンプレートファイルには、 header.php 、 footer.php 、 index.php 、 single.php 、 page.phpなどがあります。たとえば、ブログページにアクセスすると、 index.phpテンプレートファイルが使用されます。ブログ投稿のリストを表示します。 一部のテンプレートファイルはモジュール式で再利用可能です。 たとえば、 header.phpは通常、すべてのWordPressページで使用されます。

一部のテンプレートファイルは他のファイルよりも具体的であり、WordPressによって優先度が高いと見なされます。 たとえば、テーマにsingular.phpテンプレートとpage.phpテンプレートがあり、訪問者が通常のWordPressページを表示する場合、 page.phpテンプレートを使用してページが生成されます。 これは、 page.phpテンプレートファイルがWordPressテンプレート階層のsingular.phpテンプレートよりも具体的であるために発生します。 テーマからpage.phpファイルを削除すると、 singular.phpテンプレートが使用されます。 WordPressテンプレート階層のドキュメントをご覧ください。このトピックはより詳細に説明されており、いくつかの例があります。

チェックアウトする必要があるもう1つのリソースは、WordPressテンプレート階層のインタラクティブな視覚化です。

WPテンプレート階層
WPテンプレート階層

したがって、訪問するページのタイプに応じて、訪問者に表示されるページを生成するためにさまざまなテンプレートファイルが使用されます。 これは、サイトをカスタマイズするためにどのテンプレートファイルを変更または子テーマに追加する必要があるかを把握するのに役立つため、重要です。

WordPressは、テンプレート階層に応じて、見つけることができる最も関連性の高いテンプレートファイルを常に使用します。 子テーマを使用している場合、最初に子テーマでこれらのテンプレートファイルを検索し、次に親テーマにフォールバックします（テンプレートファイルが子テーマに存在しない場合）。 また、子テーマが親テーマよりも（WordPressテンプレート階層内の）より具体的なテンプレートファイルを使用している場合は、代わりにそのファイルを使用します。

あなたの子供のテーマをカスタマイズする方法は？

アドレナリンの子テーマの例を続けて、それをカスタマイズする方法を見てみましょう。 これらのユースケースについて説明します。

  • カスタムスタイルを追加し、親スタイルを上書きし、
  • カスタム機能を追加し、親機能を上書きし、
    • 新しい機能の追加、
    • 親機能を上書きし、
    • 新しいテンプレートファイルの追加、
    • 親テンプレートファイルの上書き

カスタムスタイルの追加と親スタイルの上書き

すべてのカスタムCSSコードは、子テーマのstyle.cssファイルに追加する必要があります。

子テーマにテキストの警告スタイルを追加したいとします。 warningのクラスとWordPressページのテキストを含むdivHTML要素があり、この要素に適切なスタイルを追加したいと考えています。 この例で作成するカスタムCSSコードは、 style.cssファイルの子テーマヘッダーコメントの下（常にファイルの先頭にあります）に配置する必要があります。 カスタムCSSコードをstyle.cssファイルは次のようになります。

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .warning { margin: 1rem 0; background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; }

子テーマにカスタムCSSコードを追加するよりも重要なのは、親テーマのスタイルを上書きすることです。 親テーマの全体的な外観は気に入っても、アイコンの色など、いくつか変更したい場合があります。 例として、Adrenalineホームページヘッダーのショッピングカートアイコンの色を上書きします。 このアイコンの色は、原色のカスタマイザー設定によって変わりますが、独自の色を付けたいとしましょう。

この親テーマスタイルを上書きするには、親テーマでCSSセレクターを見つける必要があります。これにより、このアイコンの色が設定されます。 CSSセレクターはChrome開発ツールで見つけることができます。 これを行う方法についての簡単なビデオチュートリアルがあります。 正しいCSSセレクター（この例では.header-info__link .fa ）を取得したら、子テーマのstyle.cssファイルにコードを配置する必要があります。 この上書きを含む子テーマstyle.cssファイルは、次のようになります。

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .header-info__link .fa { color: #2ebd61; }

最も難しいのは、ターゲットとする正しいCSSセレクターを見つけることです。それが完了したら、正しいCSSルールを適用するだけです。

素晴らしい！ 子テーマにいくつかのカスタムスタイルを適用しました。 子テーマのstyle.cssファイルには必要なだけカスタムCSSコードを追加できます。

次に、子テーマにいくつかの機能を追加する方法を見てみましょう。

カスタム機能の追加と親機能の上書き

これは、物事が面白くなり、追加機能で子テーマを改善したり、変更したい親テーマ機能を上書きしたりできる部分です。

カスタマイズを実現する方法はいくつかあるので、それらを見てみましょう。

  • 新しい機能の追加、
  • 親機能を上書きし、
  • 新しいテンプレートファイルの追加、
  • 親テンプレートファイルの上書き

新しい機能の追加

子テーマに追加する可能性のあるPHPコード形式の新しい機能は、 functions.phpファイルに配置する必要があります。 多くのPHPコードを追加する場合は、コードを複数のPHPファイルに抽出してから、これらのファイルをfunctions.phpファイルに追加して、コードをより適切に編成する必要があります。

たとえば、子テーマにショートコードを追加する場合、 shortcodes.phpというファイルを作成し、そのファイルに適切なコードを追加できます。 次に、次のように、 functions.phpにファイルが必要になります： require_once get_stylesheet_directory() . '/shortcodes.php' require_once get_stylesheet_directory() . '/shortcodes.php'

親機能の上書き

親テーマ関数の一部を変更する必要があるかもしれませんが、親テーマコードを直接編集することは許可されていないため、子テーマでこれを何らかの方法で実現する必要があります。 心配しないでください。WordPressにはそのためのシステムがあります。

親機能を変更する方法は2つあります。1つはWordPressアクションとフィルターフックを使用する方法、もう1つはプラグイン可能な機能を使用する方法です。

WordPressのアクションとフィルターフック–適切にコーディングされた親テーマを使用している場合は、テーマ全体でカスタムWPアクションとフィルターを見つけることができ、テーマにフックして動作を変更できます。 親テーマでdo_action関数とapply_filters関数を検索する必要があります。 たとえば、Twenty Seventeenテーマでは、次のカスタムフィルターを見つけることができます： twentyseventeen_front_page_sections 、デフォルト値は4です。 この値は、このテーマのフロントページで定義されているセクションの数を表します。 27個の子テーマを作成し、2つのセクションのみを作成したい場合は、このコードを子テーマのfunctions.phpファイルに配置します。

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } // Custom Twenty Seventeen front page sections filter example. add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_child_front_page_sections' ); function twentyseventeen_child_front_page_sections() { return 2; }

プラグ可能な機能–プラグ可能な機能とは何ですか？ これらは通常のPHP関数ですが、この名前の関数がすでに存在するかどうかを確認するために、ifステートメントでラップされています。 彼らはこのように見えます：

 <?php if ( ! function_exists( 'some_function_name' ) ) { function some_function_name() { // Function code goes here. } }

テーマがこれらのプラグ可能な関数を使用している場合は、子function.phpファイルで同じ名前と変更されたコードで関数を定義することにより、子テーマのコードを上書きできます。 WordPressのブートストラッププロセスでは、子テーマのfunctions.phpファイルが親テーマのfunctions.phpファイルの前に読み込まれるため、このプラグイン可能な関数メソッドが可能です。 また、親テーマ関数がプラグインできない場合、同じ名前の2つの関数が重大なPHPエラーをスローするため、それを上書きすることはできません。

プラグ可能な関数は、初期のWordPressコアで使用され、フィルターに置き換えられました。

新しいテンプレートファイルの追加

新しいWordPressテンプレートファイル（親テーマにはありません）を子テーマに追加するのは簡単です。 必要なのは、テンプレートファイルを子テーマのルートに配置することだけです。

たとえば、親テーマに特定のカテゴリの投稿の表示を担当するcategory.phpテンプレートファイルがない場合は、 category.phpテンプレートファイルを子テーマフォルダーのルート（ functions.php ）。 WordPressはこのcategory.phpファイルを使用してカテゴリページを表示します。

子テーマにさらに具体的なテンプレートファイルを追加して、それぞれのページのより小さなセグメントを引き継ぐこともできます。

たとえば、親テーマに、作成者、カテゴリ、分類、日付、タグのページを表示するための親テンプレートファイルであるarchive.phpテンプレートがありますが、より具体的なテンプレートであるauthor.phpテンプレートがない場合WordPressテンプレート階層の場合、このauthor.phpテンプレートを子テーマに追加し、作成者ページのレイアウトを変更できます。 このようにして、カテゴリ、分類法、日付、タグページのレイアウトと表示を同じままにし、作成者ページのみを変更します。

親テンプレートファイルの上書き

親テーマ機能を上書きする最後の、そしておそらく最も一般的な使用法は、親テーマテンプレートファイルを上書きすることです。

以前に作成したAdrenaline子テーマのページテンプレートで何かを変更したい場合は、 page.phpファイルを親テーマから子テーマフォルダーにコピーして、必要な変更を加える必要があります。

単一の投稿に表示される作成者と日付を変更する場合は、 single.phpファイルを子テーマにコピーして、そのファイルに変更を加えます。

親テーマテンプレートの上書きは非常に強力です。既存の親テーマテンプレートファイルにいくつかの変更を加えるだけで必要なものを変更できますが、親テーマはそのままで、更新しても安全です。

構成済みの親テーマで子テーマに切り替える

子テーマのない既存のWordPressサイトがあり、子テーマの使用を開始したい場合は、注意すべき点がいくつかあります。

プラグインを使用して子テーマを自動的に作成することも、手動で作成することもできます。 今、あなたはおそらく次のように考えているでしょう。 自動的に実行できるのであれば、誰が手動で何かを実行したいと思いますか？」 間違いではありませんが、子のテーマについて詳しく知りたいので、最初に手動の手順を見ていきます。

子テーマへの手動切り替え

まず、親テーマの子テーマを作成し、親テーマのコードで直接行った変更または追加を子テーマに抽出します。 これにより、親テーマが安全に更新され、カスタムコードが子テーマにきちんと組み込まれます。

これで、子テーマをアクティブにした後、フロントページを見ると、奇妙に見えたり、壊れたりすることがあります。 この混乱の背後にある理由は、WordPressが子テーマを新しい個別のテーマと見なし、すべてのテーマ設定がデフォルト値にリセットされるためです。 これにより、ウィジェットがサイドバーの場所を切り替え（フッターサイドバーからのウィジェットがヘッダーセクションに表示されるなど）、カスタマイザー設定がテーマのデフォルトにリセットされます。

ウィジェット–ウィジェットの問題を修正するには、 [外観]-> [ウィジェット]に移動し、ウィジェットを正しいサイドバーに再配置（ドラッグアンドドロップ）します。

カスタマイザー設定–親テーマで既に設定したカスタマイザー設定を移行する簡単な方法があります。 カスタマイザーのエクスポート/インポートプラグインは非常に使いやすく、親テーマのカスタマイザー設定をインポートするため、手動で設定する必要はありません。 次の手順に従って、カスタマイザ設定を子テーマに移行します。

テーマが他のテーマオプションフレームワークを使用している場合は、それらも再構成する必要がある場合があります。

これらの操作を行うと、子テーマは親テーマと同じように表示されますが、さらに変更を加えたり、親テーマを定期的に更新したりする準備ができています。

これで、問題が何であるかを理解したので、子テーマに切り替えるときとその解決方法を理解したので、プラグインを使用して子テーマに切り替える簡単な方法を見てみましょう。

子テーマへの自動切り替え（プラグイン付き）

子テーマに切り替えるにはまだいくつかのことを行う必要があるため、ここでは「自動」という言葉は少し多すぎるかもしれませんが、手動で行うよりもはるかに簡単で高速です。

私がテストした最高の子テーマジェネレータプラグインは、子テーマConfiguratorプラグインです。 これにより、子テーマを作成し、すべてのテーマ設定を親テーマから一度に移行できます。 すごい！

このプラグインを使用して子テーマに切り替える方法の簡単なチュートリアルは次のとおりです。

  1. WPサイトにChildThemeConfiguratorプラグインをインストールしてアクティブ化します。
  2. [ツール]-> [子テーマ]に移動します。
  3. 最初のステップとして、[新しい子テーマを作成する]オプションを選択し、正しい親テーマが選択されていることを確認して、[分析]ボタンをクリックします。
  4. プラグインの分析が終了したら、親のテーマに応じて、表示されるすべての追加オプションを確認して調整できますが、通常、デフォルト設定で問題ありません。
  5. [子テーマ属性の表示/非表示]ボタンをクリックして、子テーマ名やその他のメタデータを変更できます。
  6. [メニュー、ウィジェット、およびその他のカスタマイザー設定を親テーマから子テーマにコピー]オプションで、チェックボックスを有効にして、ウィジェットとカスタマイザー設定が既存の親テーマからこの新しく作成された子テーマに移行されるようにする必要があります。
  7. [新しい子テーマの作成]ボタンをクリックします。

それでおしまい！

子テーマの作成とこのプラグインの例に関する完全なチュートリアルについては、Child ThemeConfiguratorプラグインページに投稿されたビデオをご覧になることをお勧めします。

私はこのプラグインをアドレナリンテーマでテストしましたが、うまく機能しました。 子テーマは正常に作成され、ウィジェットとカスタマイザー設定もそれに移行されたので、このプラグインを絶対にお勧めします。

概要

子テーマは、WordPressテーマを変更するための推奨される方法です。 これにより、ユーザーは、マイナーまたはメジャーな変更を加えて独自のテーマを作成できますが、同時に親テーマはそのまま残されます。

子テーマが提供するすべてのものを検討しました。何かが明らかになったと思われる場合は、以下のコメントセクションで共有してください。このガイドに追加します。

基本的にマイナス面はなく、メリットのみであるため、今後のすべてのWordPressプロジェクトで子テーマを使用することを願っています。 他に何もない場合、親テーマは定期的に更新を受け取ることができます。