WooCommerceストアフロントの子テーマを作成する方法[完全ガイド]

公開: 2022-01-05

WooCommerceストアフロントの子テーマを作成する方法 この記事では、WooCommerceStorefrontの子テーマを4つの簡単なステップで作成する方法を見ていきます。 ストアフロントのWooCommerceテーマは、WooCommerceが無料で使いやすく、最小限の労力でユニークなストアを作成できるようになった主な理由の1つです。

さらに、Woocommerceにはほぼ無限のカスタマイズの可能性があり、これはWooCommerceの成功に貢献するもう1つの大きな要因です。 これは、適切なテーマと組み合わせると、デザインの柔軟性が大幅に向上することを意味します。

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

プロフェッショナルな外観には、ストアフロントのテーマが最適です。 WooCommerceストアが稼働しているので、正確なビジョンに合わせてストアの外観をカスタマイズすることもできます。

WooCommerceストアフロントテーマをインストールしたら、次のステップでWooCommerceストアフロント子テーマを作成する必要があります。これにより、親テーマのコードを直接編集しなくても、ストアフロントの親テーマテーマに変更を加えることができます。

これにより、ストアの外観を簡単にカスタマイズでき、テーマとストアの潜在的なリスク、特にWooCommerceStorefrontテーマの更新時に追加したカスタマイズが失われるリスクを排除できます。

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

なぜWooCommerceストアフロントの子テーマを作成するのですか？

WordPressで多くの時間を読んでいる場合は、以前に子テーマに出くわしたことがあるかもしれません。 簡単に言うと、子テーマは別のテーマのコピーであり、「親テーマ」と呼ばれることがよくあります。

つまり、親テーマを直接編集しなくても、子テーマに変更を加えてテストすることができます。 元のテーマを変更すると、元に戻せないエラーが発生したり、Webサイトが損傷したりする可能性があるため、子テーマに変更を加えることは重要です。

さらに、別のテーマをベースとして使用したいので、子テーマを作成することもできます。 これにより時間を節約でき、新しいテーマを完全にゼロから作成する必要がなくなります。

さらに、テーマのブランディングや全体的な美学に小さな変更を加えることもできます。 子テーマを使用すると、進行中のプロジェクトに専念する時間に応じて、多くの可能性が開かれます。

ただし、公式のWooCommerceストア、またはThemeForestなどの他のサイトからいくつかのオプションをダウンロードできますが、提供されている既存の子テーマはどれもニーズに合わない場合があります。 さらに、独自の外観を作成することもできます。 ストアフロントの子テーマは、ニッチに最適なストアエクスペリエンスを提供することを目的としています。

子テーマを作成する実際のプロセスは、WooCommerceまたはより一般的なWordPressサイトでも同じです。 この事実にもかかわらず、子のテーマをカスタマイズするときは、ストアの目的を念頭に置く必要があります。

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

このチュートリアルでは、Storefrontを親として使用するテーマを作成します。 任意のテーマをベースとして使用できます。 続行する前にサイトのバックアップを作成することも重要です。これにより、開発プロセス中に何かが壊れた場合でもストアを安全に保つことができます。

さらに、子テーマを作成および調整するためにステージング環境を使用することも賢明です。 子テーマを作成するには、子テーマディレクトリ、style.cssファイル、functions.phpファイルの3つを開始する必要があります。

WooCommerceの子テーマを作成するために従う必要のある手順は次のとおりです。

1.テーマフォルダの作成

このテーマフォルダには、スタイルシートと関数ファイルが格納されます。 専門家の観点からは、親テーマの名前をフォルダー名として使用し、それに「-child」を追加するのが理想的です。 このチュートリアルでは、ディレクトリに「Storefront-child」という名前を付けました。 エラーの可能性を回避するために、子テーマのディレクトリ名にスペースが含まれていないことを確認することも重要です。

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

2.子テーマのスタイルシート

フォルダを作成したら、子テーマのスタイルシートを作成する必要があります。 親テーマからスタイルを継承するようにスタイルシートを設定する必要があります。

これを行うには、次のスタイルシートヘッダーを挿入し、関連する詳細に置き換える必要があります。 ここで行われるカスタマイズは、親テーマのスタイルを上書きすることにも言及する価値があります。

 / *

 テーマ名：ストアフロントチャイルド

 テーマURI：http：//sitename.com/storefront/

 説明：ストアフロントの子テーマ

 著者：あなたの名前

 著者URI：http：//sitename.com

 テンプレート：ストアフロント/ *これは大文字と小文字を区別します* /

 バージョン：1.0.0

 ライセンス：GNU General Public Licensev2以降

 ライセンスURI：http：//www.gnu.org/licenses/gpl-2.0.html

 タグ：明るい、暗い、全幅、レスポンシブレイアウト、アクセシビリティ対応

 テキストドメイン：storefront-child

* /

/ *テーマのカスタマイズはここから始まります* /

ただし、このチュートリアルでは、CSSの使用方法については説明しません。これは、この記事では説明できないためです。 あなたはCSSを学ぶか、あなたのウェブサイトでCSSの微調整をするために開発者を雇う必要があります。

3.子テーマ機能

以前の方法では、スタイルシートで「@import」を使用して子テーマをロードすることをお勧めします。 これはもはやベストプラクティスとは見なされていないことに注意することが重要です。 ただし、親テーマのスタイルシートを子テーマのfunctions.phpファイルに「エンキュー」する必要があります。

これを可能にするには、「wp_enqueue_scriptsアクション」と「wp_enqueue_style（）」を使用できます。 また、子テーマのスタイルシートは通常自動的にロードされることにも言及する価値があります。

ロードされるように適切にキューに入れる必要があり、子スタイルシートが優先されることを確認する必要があります。 簡単にするために、「親スタイル」を依存関係として設定する次のコードを作成しました。これにより、子テーマのスタイルシートがその後に読み込まれます。

 <？php

関数theme_enqueue_styles（）{

$ parent_style = '親スタイル';

wp_enqueue_style（$ parent_style、get_template_directory_uri（）。 '/ style.css'）; wp_enqueue_style（ 'child-style'、get_stylesheet_directory_uri（）。 '/ style.css'、array（$ parent_style））; } add_action（ 'wp_enqueue_scripts'、 'theme_enqueue_styles'）;

？>

4.アクティベーション

子テーマフォルダーが完成したので、子テーマフォルダーの.zipファイルを作成して、WordPressテーマに追加できるようにする必要があります。

これは、7-zipまたはWinrarを使用して行うことができます。 また、子テーマフォルダー内にstyle.cssとfunctions.phpがあることを確認することも重要です。

さらに、子テーマをアクティブ化する前に、他のプラグイン設定をメモして記録しておくことが重要です。 その後、 [外観]> [テーマの追加]からWordPressにアップロードできます。 テーマのアップロードWooCommerceストアフロントの子テーマの作成

WordPressは他のテーマと同じようにインストールします。インストールしたら、次のように[外観]> [テーマ]に移動して[アクティブ化]をクリックし、これをアクティブ化する必要があります。 WooCommerceストアフロントの子テーマを作成する

有効にすると、元のテーマと同じように見えます。 子テーマは、親テーマからスタイルを取得しています。 次に、創造性を発揮し、スタイルシートの外観をカスタマイズする必要があります。

さらに、header.phpなどの変更するテンプレートファイルを親から子テーマフォルダーにコピーすることで、テーマのテンプレートファイルに変更を加えることができます。

さらに、WordPressがテンプレートファイルを参照するために使用する関数を指定するために、いくつかの変更を加える必要もあります。 これは、get_stylesheet_directory（）;を使用することを意味します。 テンプレートを参照するには、get_template_directory（）の代わりに関数を使用します。

結論

この時点で、WooCommerceストアフロントの子テーマを作成できると確信しています。 CSSをブラッシュアップしてスタイリングを最大限に活用し、子テーマの作成に関する他のガイドでさらにアドバイスを確認することを強くお勧めします。

サードパーティのプロバイダーから子テーマを購入することもできますが、他の人の創造性に頼る必要はありません。 これは、WooCommerceストアフロントの子テーマを作成するのが思ったほど難しくないためです。

さらに、ストアの外観と機能をほぼ完全に制御できます。 したがって、WooCommerceサイトで開発作業を行う場合のベストプラクティスと見なされるため、作成する必要があります。

さらに、テーマを直接変更すると、更新中に変更が失われるリスクがあります。 子テーマは、変更がそのまま保持されることを保証します。

同様の記事

  1. WooCommerceストアフロントテーマとは何ですか？ [回答済み]
  2. ストアフロントのWooCommerceテーマをカスタマイズするための80以上の秘訣：究極のストアフロントテーマのカスタマイズガイド
  3. WooCommerceチェックアウトページに信頼または安全なロゴを追加する方法
  4. チェックアウト後にWooCommerceをリダイレクトする方法：カスタムサンキューページにリダイレクトする
  5. プラグインのWooCommerce管理者通知を作成する方法–WooCommerce開発
  6. PHPMyAdminでWordPressデータベースを作成する方法
  7. For＆Foreachループを使用してWordPressで複数のウィジェットを作成する方法
  8. WordPressでプラグインのショートコードを作成する方法
  9. コマンドラインからMySQLデータベースWordPressを作成する方法
  10. WordPressの完全な初心者が始めるための最初の20のステップ
  11. WooCommerce製品をカテゴリ別に表示する方法
  12. ログアウトボタンを作成するためのWooCommerceログアウトPHPスニペット
  13. WooCommerceショップページのカートボタンテキストに追加を変更する方法
  14. WooCommerceで注目の商品を設定する方法
  15. WooCommerceでカスタム配送方法を追加する方法