WooCommerceストアフロントの子テーマを作成する方法

公開: 2021-03-04

最終更新日-2021年3月5日

子テーマは、基本的なスタイルと機能を保持した既存のテーマの変更です。元のテーマは親テーマと呼ばれ、新しく変更されたテーマは子テーマと呼ばれます。独自のWooCommerceStorefront子テーマを作成することは、新しいテーマを購入せずにストアをパーソナライズしたい場合に適した方法です。

WooCommerceストアフロントを手に入れよう！

子のテーマ–概要

冒頭で述べたように、子テーマは親テーマをベースとして使用し、テーマに追加機能を付与します。多くの場合、これは1つのテーマのバリエーションを作成する場合に適したオプションです。ストアフロントの子テーマディレクトリには、さまざまな業界や製品タイプに適したさまざまなプレミアム子テーマがあります。このようにして、ストアフロントの独自の子テーマを簡単に作成できます。

子テーマを使用する利点

テーマを直接変更すると、更新中に変更が失われるリスクがあります。子テーマは、変更がそのまま保持されることを保証します。全体として、子テーマの開発は、新しいテーマを作成するよりも高速なプロセスです。さらに、 WordPressテーマの開発に興味がある人にとって、子テーマを作成することは、実験して学ぶための優れた方法です。

子テーマを作成する利点のいくつかを次に示します。

異なるドメインに合わせて、同じテーマに異なるバリエーションを作成するのに役立ちます。
親テーマを変更せずに、デザインのカスタマイズを個別に保存できます。
親テーマまたはWordPressやWooCommerceのコアファイルを更新した後でも、カスタマイズを維持できます。

WooCommerceストアフロントの子テーマの作成

テーマをカスタマイズする前に、サイトの適切なバックアップを作成することをお勧めします。新しい子テーマをアップロードするには、ホストへのFTPアクセスが必要です。

プロセスを開始するには、WooCommerce Docsに記載されている次のサンプルコードを使用して、子テーマのstyle.cssファイルを作成します。

次に、Storefrontを指すようにテンプレートフィールドを変更します。

ここで気付いたかもしれない1つの違いは、Storefrontでは、25のテーマの子テーマを作成するときに実行したエンキューステップが必要ないことです。 Storefrontを使用して子テーマを作成する場合、プロセスを開始するために必要なのは、空白のfunction.phpファイルとstyle.cssファイルのみです。

ファイルを子テーマフォルダーに転送し、zipファイルを作成して、アップロードするだけです。これが完了したら、 [外観]>[テーマ]から新しい子テーマをアクティブにします。

ホスティングサービスにアクセスできる場合は、FTPを介して子テーマをアップロードすることもできます。 FileZillaのようなFTPプログラムを使用できます。

MacおよびWindows用のトップFTPクライアント。

これで、子テーマのスタイルシートとテンプレートファイルにコードを追加してカスタマイズできます。たとえば、任意のテンプレートファイルをStorefrontテーマフォルダーから子テーマフォルダーにコピーできます。子テーマフォルダー内のこのファイルは、要件に応じてコードを変更することでカスタマイズできます。

子テーマのデザインと機能をカスタマイズするにはどうすればよいですか？

上記の設定で、Storefrontの子テーマを作成しました。ただし、テーマのカスタムプロパティはまだありません。親テーマを変更せずに、子テーマに機能とデザインのカスタマイズを追加できます。

デザインの変更

たとえば、子テーマ用に作成した上記のスタイルシートでは、次のコードを使用してサイトタイトルの色をカスタマイズできます。
.site-branding h1 a { color: red; }

テンプレートの変更

テーマフォルダ内のテンプレートファイル（* .php）を変更することもできます。たとえば、header.phpを親テーマフォルダーwp-content / themes / storefront /header.phpから子テーマフォルダーwp-content/themes / storefront-child / header.phpにコピーすることで、特定のコードを変更できます。

コピーが完了したら、header.phpを編集し、必要に応じてコードをカスタマイズできます。子テーマのheader.phpは、親テーマのheader.phpの代わりに使用されます。

この方法でWooCommerceテンプレートに変更を加えることもできます。子テーマに新しいフォルダを作成し、「WooCommerce」という名前を付けるだけです。ここでは、WooCommerceテンプレートに変更を加えて、サイトのデザインに合わせることができます。

このWooCommerceのドキュメントは、WooCommerceテンプレートの構造について理解するのに役立ちます。

カスタマイズ機能

子テーマを作成するときは、カスタム機能も含める必要があります。このためには、最初に、functions.phpファイルが空であり、親のfunctions.phpファイルからの情報が含まれていないことを確認する必要があります。これで、親テーマの関数の特定の関数がプラグイン可能（条件付きのifステートメントでラップされている）の場合、それを子テーマのfunctions.phpにコピーできます。プラグ可能な関数をコピーしたら、必要に応じて変更を加えることができます。以下は、プラグ可能な関数の例です。
if (!function_exists("parent_function_name")) { parent_function_name() { ... } }

一般的な子テーマの作成

子テーマを作成するプロセスは、他のテーマと比較して、Storefrontでは異なり簡単です。この記事では、一般的な方法の基本的な詳細についても説明します。

最初のステップは、テーマディレクトリを作成することです。次に、子テーマのスタイルシート（style.cssファイル）を作成します。 WooCommerceは、スタイルを正しくエンキューするのに役立つfunctions.phpファイルを作成することをお勧めします。

一般的な子テーマの作成

子テーマを作成するプロセスは、他のテーマと比較して、ストアフロントでは異なり、単純です。この記事では、一般的な方法の基本的な詳細についても説明します。

子テーマディレクトリの作成

子テーマディレクトリを作成して、wp-content/themesに配置します。必須ではありませんが、子テーマディレクトリの名前に「-child」を追加することをお勧めします。問題を回避するために、子テーマのディレクトリ名にスペースを残さないように注意する必要があります。

子テーマのスタイルシートの作成

プロセスを開始するためのスタイルシートヘッダーを作成します。以下は、TwentyFifteenテーマに基づいて子テーマ用に作成されたスタイルシートヘッダーのWordPressCodexの例です。

子テーマを作成するときに、このサンプルテキストを参照ポイントとして使用し、テーマに関連する詳細に置き換えることができます。テンプレート行は、親テーマのディレクトリ名を示します。使用しているテーマに合わせて調整する必要があります。

親と子のテーマをキューに入れる

親テーマと子テーマをキューに入れるために、子テーマディレクトリにfunctions.phpファイルを作成します。 wp_enqueue_scriptsアクションを追加し、子テーマのfunction.phpでwp_enqueue_style（）を使用して、親テーマのスタイルシートをキューに入れます。 PHPタグ（<？php）を使用して子テーマのfunction.phpを開きます。次に、親と子のテーマスタイルシートをキューに入れます。以下のスクリーンショットは、親テーマが1つの.cssファイルを使用してCSSを保持している場合にのみ機能する例です。 style.css、main.css、ie.cssなどの.cssファイルが複数ある場合は、すべての親テーマの依存関係を維持するようにしてください。優れたレベルのコーディング知識は、これを最初に正しく行うための重要な要素であることは明らかです。

また、子テーマstyle.cssに実際のCSSコードをエンキューする必要があります。子テーマのスタイルシートが親スタイルシートの後に確実に読み込まれるようにするには、親スタイルを依存関係として設定できます。さらに、子テーマのバージョン番号を含めて、子テーマに対してもキャッシュを無効にできるようにします。 Codexで推奨される例は次のとおりです。

お子様のテーマを有効にする

子テーマフォルダのzipファイルを作成し、[外観]→[テーマ]→[新しいテーマの追加]に移動してアップロードします。

子テーマのアップロード

これで、新しい子テーマがテーマのリストに表示されます。

[アクティブ化]ボタンをクリックすると、新しい子テーマをアクティブ化できます。

今すぐStorefrontテーマをダウンロードしてください。
WordPressCodexの子テーマについてもっと読む。

このWooCommerceリンクからサンプルの子テーマをダウンロードして、よりよく知ることもできます。または、関連記事のいくつかをお読みください。

WooCommerceストアに適したテーマを選択する方法は？
ストアフロントをインストールして構成する方法は？
WooCommerceテーマの最新トレンド。