WooCommerce をカスタマイズ: シンプルな商品にカスタムフィールドを追加する

ECサイトをゼロから構築して、様々な商品を販売したいと考えている方もいるかもしれません。あるいは、ここ数年ECサイトを運営していて、視野を広げて新しい商品を販売したいと考えている方もいるかもしれません。このチュートリアルをご覧になった理由は何であれ、WooCommerceをカスタマイズする必要があるのは事実です。Bright Vesselには、必要な情報がすべて揃っています！

WooCommerce is the most popular WordPressプラグイン for eCommerce and the preferred solution for a lot of sellers. Why? It’s free and also highly versatile, as it’s effortless to customize WooCommerce to fit your needs. While the plugin offers a series of set options, there’s a lot you can do from its backstage.

Bright Vesselの多くのお客様は、それぞれのビジネスのニュアンスを考慮した、独自のeコマースソリューションを求めています。WooCommerceに関する豊富な経験を活かし、お客様のニーズに合わせたeストアの構築をお手伝いいたします。さあ、始めましょう！

必要なものCustomize WooCommerce

Below, you’ll find the basic setup you’ll need to customize WooCommerce:

• 好みのデスクトップ オペレーティング システム (MacOS、Microsoft Windows、Linux ディストリビューションなど)。
• Hypertext Preprocessor (PHP) 少なくとも 5.6.25。
• HTTP サーバー Apache または Nginx。
• MySQL 5.6.33。
• 更新された WordPress、または少なくともバージョン 4.7。
• 少なくとも 3.9 バージョンの WooCommerce プラグイン。
• 選択した統合開発環境 (IDE)。

WooCommerceをカスタマイズしてパーソナライズされたフィールドを追加する

ただし、WooCommerceのカスタムフィールドはWordPressのカスタムフィールドとは少し異なります。WordPressでは投稿のメタデータを扱うと定義されていますが、ここでは「カスタムフィールド」を実際のテキストフィールドとして扱います。WooCommerceメニューで、「Simple Products」タイプの「Linked Products」タブに移動します。

WooCommerce API - フック

There’s a critical WordPress concept we need to get out of the way before delving into how to customize WooCommerce: Hooks. According to WPBeginner, Hooks are “functions applicable to an Action or a Filter in WordPress. Actions and Filters in WordPress are functions that you can modify by theme and plugin developers to change the default WordPress functionality.”

WooCommerceは、ユーザーがページのライフサイクルにアクセスできるようにするAPIを提供しています。ただし、WooCommerce APIはWordPressのメタデータAPIとは少し異なります。知っておくべき主なフックが2つあります。

• Woocommerce_product_options_grouping。このフックは、説明と、値を受け入れるテキスト入力を作成するために使用されます。
• woocommerce_process_product_meta。この関数は、テキスト入力の値を処理、サニタイズ、保存するために使用します。

これらのフックを使用するには、フックを定義して機能をカスタマイズする必要があります。

機能のカスタマイズ

• インスタンスデータとしてsince変数を持つクラスを定義します。この変数は、ユーザーに表示される入力フィールドのIDを表します。

フックに 2 つのカスタム関数を登録する初期化関数を追加することで、上記のフックを使用できるようになりました。

テキスト入力フィールド

テキスト入力フィールドを追加するには、まず woocommerce_product_options_grouping にフックされた関数を追加する必要があります。

To implement the function, you should:

• テキストフィールドを識別するための一意のIDを作成します。コンストラクタでインスタンスデータを使用します。
• ラベルを使用して入力フィールドに説明を追加します。
• 必要に応じてプレースホルダーを指定できます。
• If it makes things more comfortable, you can display a tooltip when the user hovers the mouse over an icon.
• ツールチップにテキストを追加するには、説明のオプションを使用できます。

上記の情報は関連配列に格納され、woocommerce_wp_text_input に渡されます。WooCommerce をカスタマイズするためのこの API 関数は、入力した情報を含むテキスト要素を出力します。

情報の保存

To save the changes above, you’ll need to:

• init メソッドに次のコードを追加します。
• 複数の nonce 値が存在することを確認してください。存在しない場合は、セキュリティ対策として false を返す必要があります。WooCommerce が具体的に提供しているソースコードを確認することで、nonce 値を検出できます。
• ユーザー入力に対応する $_POST コレクションで、データをサニタイズします。
• 以前に記録した情報を投稿メタデータ テーブルに保存します。

フロントエンドでのレンダリング情報

To render information on the front-end, you’ll need to create a new class. You’ll specifically need:

テキスト フィールド ID とそれをコンストラクターで初期化します。

• フロントエンドを以前に作成したコードにフックするための初期化関数。
• 本当の価値を表現する。

プラグインの起動

WooCommerceのカスタマイズ方法に関するこのチュートリアルはほぼ完了です！最後のステップは、最新の変更をすべて反映したプラグインを起動するためのブートストラップファイルの設定です。起動用のコードは次のとおりです。

A couple of extra notes:

• ここで依存関係を追加します。
• 関数が動作したら、ダッシュボードが表示されるかどうかを確認してください。表示される場合は、プラグインの適切な部分が正しく読み込まれています。表示されない場合は、標準の表示が正しく読み込まれています。

結論は

Now that you know how to customize WooCommerce to add your fields to simple products, you’re on your way to providing exactly the services you want to deliver. You can find more WooCommerceチュートリアル on our blog. If you’re looking for experts who know how to work around this popular eCommerce plugin, お問い合わせ for more information!