WooCommerce の拡張機能開発環境の設定
どんなコードを書き始める前に、安定した効率的なローカル開発環境を設定することが重要です。これにより、拡張機能が最新のWooCommerceバージョンと互換性があるだけでなく、オンラインストアの運営に影響を与えることなく、安全な環境ですべての機能をテストすることができます。
ローカル開発環境の設定
典型的なWooCommerce拡張開発環境には、少なくとも、PHP、MySQL/MariaDB、Webサーバー(NginxやApacheなど)が含まれています。Local by Flywheel、Laravel Valet、XAMPPなどの統合型ローカルサーバーソフトウェアの使用がお勧めです。これらのツールは、環境設定プロセスを簡単にします。PHPのバージョンはWooCommerceの最低要件(通常は7.4以上)に準拠している必要があり、cURL、GD/ImageMagick、OpenSSLなどの必要な拡張機能が有効になっている必要があります。
コアファイルとコード構造
WooCommerceのコアは、よく設計されたプラグインであり、その拡張機能は主にWordPressのプラグインアーキテクチャに依存しています。最も基本的なWooCommerce拡張機能は、標準のWordPressプラグインそのものです。したがって、あなたの拡張プロジェクトは、メインプラグインファイルから開始する必要があります。例えば、 your-extension.phpこのファイルには、WordPressのバックエンドでプラグインを識別するための標準的なWordPressプラグインヘッダーコメントが含まれていなければなりません。
推薦図書 WooCommerceチュートリアル:ゼロからプロの電子商取引ウェブサイトを構築するための完全なガイド。
/**
* Plugin Name: Your Awesome WooCommerce Extension
* Plugin URI: https://yourwebsite.com/
* Description: 为WooCommerce添加自定义功能。
* Version: 1.0.0
* Author: Your Name
* License: GPL v2 or later
* Text Domain: your-text-domain
*/ ファイル内では、次のように使用する必要があります。 add_action フックを使用すると、コードはWooCommerceが読み込まれた後にのみ実行されるようになります。一般的なやり方は、タグにコードを追加する方法です。 plugins_loaded または woocommerce_loaded 行動面で。
add_action( 'plugins_loaded', 'initialize_your_extension' );
function initialize_your_extension() {
// 检查WooCommerce是否已激活
if ( ! class_exists( 'WooCommerce' ) ) {
add_action( 'admin_notices', function() {
?>
<div class="notice notice-error">
<p><?php _e( '本插件需要WooCommerce才能运行。请先安装并激活WooCommerce。', 'your-text-domain' ); ?></p>
</div>
<?php
} );
return;
}
// 你的扩展核心代码从这里开始
// ...
} WooCommerceのコア拡張メカニズムを理解する。
WooCommerceの強みは、その高度に拡張可能なアーキテクチャにあります。開発者は、アクションフック、フィルターフック、カスタムテンプレートのオーバーライド、クラスや関数の継承や書き換えなど、いくつものコアメカニズムを通じて機能を変更し、強化することができます。
アクションとフィルターのフックを利用する。
フック(Hooks)は、WordPressやWooCommerceの拡張機能の基盤です。アクションフックを利用すると、特定のタイミングで自分のコードを「実行」することができます。例えば、ユーザーが注文を完了した後にコードを実行することができます。woocommerce_thankyouカスタム関数をトリガーして、第三者システムに通知を送信します。
フィルターフックを使用すると、プロセス中に渡されたデータを「変更」することができます。例えば、次のように使用することができます。 woocommerce_product_get_price フィルターは商品の価格を動的に変更するか、または woocommerce_checkout_fields チェックアウトフォームのフィールドを追加、削除、または変更するためのフィルター。
// 示例:在结账页面添加一个自定义字段
add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
$fields['billing']['billing_custom_field'] = array(
'label' => __( '自定义信息', 'your-text-domain' ),
'placeholder' => _x( '请输入...', 'placeholder', 'your-text-domain' ),
'required' => false,
'class' => array( 'form-row-wide' ),
'clear' => true
);
return $fields;
}
// 示例:保存自定义字段的值
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
if ( ! empty( $_POST['billing_custom_field'] ) ) {
update_post_meta( $order_id, '_billing_custom_field', sanitize_text_field( $_POST['billing_custom_field'] ) );
}
} カスタムテンプレートのオーバーライド
WooCommerceでは、商品の詳細ページ、カート、チェックアウトページなど、フロントエンドのページの表示を制御するためのテンプレートファイルを使用しています。これらのページの外観を変更するには、WooCommerceのコアプラグイン内のファイルを直接変更するのではなく、テンプレートオーバーライドを使用することをお勧めします。
推薦図書 WordPressプラグイン開発の入門ガイド:最初の機能プラグインをゼロから構築する方法。
具体的な操作方法は次のとおりです。テーマ(できればサブテーマ)やプラグインのディレクトリ内に、「」という名前のファイルを作成します。 woocommerce まず、WordPressのプラグインフォルダに移動し、変更したいコアテンプレートファイルをこのディレクトリにコピーし、同じパス構造を維持します。例えば、カートページのテンプレートを上書きする場合は、WooCommerceプラグインのフォルダからファイルをコピーする必要があります。 templates/cart/cart.php ファイルをあなたのテーマにコピーしてください。 woocommerce/cart/cart.phpそして、このコピーを修正します。
カスタム機能拡張を開発する。
さて、完全な例を実践してみましょう。拡張機能を開発し、シンプルな製品に「カスタム価格」フィールドを追加し、フロントエンドの顧客がこの価格を入力して購入できるようにします(例えば、寄付やカスタム金額の商品に使用)。
メインプラグインクラスを作成する。
コードのカプセル化とメンテナンビリティを維持するために、オブジェクト指向プログラミング(OOP)を採用し、すべての機能を1つのメインクラスにカプセル化しました。このクラスに与えた名前は WC_Custom_Price_Product。
if ( ! class_exists( 'WC_Custom_Price_Product' ) ) {
class WC_Custom_Price_Product {
/**
* 构造方法,初始化所有钩子。
*/
public function __construct() {
// 后台:为产品添加自定义字段
add_action( 'woocommerce_product_options_pricing', array( $this, 'add_admin_custom_price_field' ) );
add_action( 'woocommerce_process_product_meta', array( $this, 'save_admin_custom_price_field' ) );
// 前台:在产品页面显示输入框并处理价格
add_action( 'woocommerce_before_add_to_cart_button', array( $this, 'add_frontend_price_input' ) );
add_filter( 'woocommerce_add_cart_item_data', array( $this, 'add_custom_price_to_cart_item' ), 10, 2 );
add_filter( 'woocommerce_get_item_data', array( $this, 'display_custom_price_on_cart_and_checkout' ), 10, 2 );
add_action( 'woocommerce_before_calculate_totals', array( $this, 'apply_custom_price_to_cart_item' ), 20, 1 );
}
// 后续方法将在这里定义...
}
// 实例化类
new WC_Custom_Price_Product();
} バックエンド管理機能を実現する。
まず、製品編集ページの「一般」タブにチェックボックスを追加し、業者がこの機能を有効にできるようにし、最低価格を設定できるようにします。
public function add_admin_custom_price_field() {
global $product_object;
woocommerce_wp_checkbox( array(
'id' => '_enable_custom_price',
'label' => __( '允许自定义价格', 'your-text-domain' ),
'description' => __( '允许顾客在前台输入他们希望支付的价格。', 'your-text-domain' ),
'value' => $product_object->get_meta( '_enable_custom_price' ) === 'yes' ? 'yes' : 'no',
) );
woocommerce_wp_text_input( array(
'id' => '_min_custom_price',
'label' => __( '最低价格(可选)', 'your-text-domain' ) . ' (' . get_woocommerce_currency_symbol() . ')',
'placeholder' => '0.00',
'desc_tip' => true,
'description' => __( '设置顾客可以输入的最低价格。', 'your-text-domain' ),
'type' => 'number',
'custom_attributes' => array(
'step' => '0.01',
'min' => '0',
),
'value' => $product_object->get_meta( '_min_custom_price' ) ? $product_object->get_meta( '_min_custom_price' ) : '',
) );
}
public function save_admin_custom_price_field( $post_id ) {
$enable_custom_price = isset( $_POST['_enable_custom_price'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_enable_custom_price', $enable_custom_price );
if ( isset( $_POST['_min_custom_price'] ) ) {
update_post_meta( $post_id, '_min_custom_price', sanitize_text_field( $_POST['_min_custom_price'] ) );
}
} フロントエンドのインタラクションとカートのロジックを処理する。
フロントデスクでは、その製品にカスタム価格機能が有効になっているかどうかを確認する必要があります。有効な場合は、入力ボックスが表示されます。
public function add_frontend_price_input() {
global $product;
if ( $product->get_meta( '_enable_custom_price' ) !== 'yes' ) {
return;
}
$min_price = $product->get_meta( '_min_custom_price' );
?>
<div class="custom-price-field">
<label for="custom_price"><?php _e( '请输入您的价格', 'your-text-domain' ); ?>
<?php if ( $min_price ) : ?>
<small>(<?php printf( __( '最低:%s', 'your-text-domain' ), wc_price( $min_price ) ); ?>)</small>
<?php endif; ?>
</label>
<input type="number" name="custom_price" id="custom_price" step="0.01"
<?php echo $min_price ? 'min="' . esc_attr( $min_price ) . '"' : 'min="0"'; ?>
value="<?php echo $min_price ? esc_attr( $min_price ) : ''; ?>"
style="width:200px; display:block; margin-bottom:1em;" />
</div>
<?php
} ユーザーが「カートに追加」をクリックしたときに、このカスタム価格をキャプチャし、カートの商品データとして保存する必要があります。
推薦図書 WordPressのプラグイン開発に着手するということは、世界中の人々のためにソフトウェアを開発することを意味します。。
public function add_custom_price_to_cart_item( $cart_item_data, $product_id ) {
if ( isset( $_POST['custom_price'] ) && ! empty( $_POST['custom_price'] ) ) {
$cart_item_data['custom_price'] = floatval( $_POST['custom_price'] );
$cart_item_data['unique_key'] = md5( microtime().rand() ); // 确保项目唯一性
}
return $cart_item_data;
}
public function display_custom_price_on_cart_and_checkout( $item_data, $cart_item ) {
if ( isset( $cart_item['custom_price'] ) ) {
$item_data[] = array(
'name' => __( '自定义价格', 'your-text-domain' ),
'value' => wc_price( $cart_item['custom_price'] ),
);
}
return $item_data;
} 最後に、そして最も重要なステップは、カートの合計金額を計算する際に、保存したカスタム価格で製品の元価格を置き換えることです。
public function apply_custom_price_to_cart_item( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 ) {
return;
}
foreach ( $cart->get_cart() as $cart_item_key => $cart_item ) {
if ( isset( $cart_item['custom_price'] ) ) {
$cart_item['data']->set_price( $cart_item['custom_price'] );
}
}
} 拡張されたテスト、配布、およびメンテナンス
開発が完了した後、機能テスト、互換性テスト(異なるテーマ、他のプラグイン)、セキュリティチェック(データ検証やクレンジングなど)を含む総合テストが必要です。WP-CLI、PHPUnit、ブラウザの自動化ツールなどを使用してテストを支援することができます。
公式マーケットに公開する準備をしています
WooCommerceの公式マーケットプレイスやWordPressのプラグインディレクトリに公開しようとする場合、プラグイン情報を入念に準備する必要があります。明確な readme.txt 標準フォーマットに従ったファイル、詳細なドキュメント、高品質のバナーやアイコン。コードはWordPressおよびWooCommerceのコーディング標準に従わなければならず、GPLと互換性のないライセンスコードは使用されてはならない。
今後の更新とサポート
メンテナンスはライフサイクルを延長するうえで重要な要素です。ユーザーのフィードバックに対処し、バグを修復し、WooCommerceのコアが更新された場合には互換性のアップグレードを実施するためのメカニズムを設定する必要があります。バージョン管理(Gitなど)やセマンティックバージョン番号(SemVer)を使用してコード変更を管理しましょう。また、インストール済みユーザーにセキュリティアップデートや機能向上を提供するために、拡張機能に自動更新チェッカーを追加することを検討してください。
概要
WooCommerceの拡張開発は、あなたのアイデアを強力な電子商取引機能に変えるプロセスです。環境設定やフック、テンプレートシステムを理解することで、店舗のあらゆる側面を深くカスタマイズすることができます。この記事では、「カスタム価格製品」という完全な例を通して、バックエンドのフィールド作成、フロントエンドの対話、カートロジックの処理に至るまでの完全な開発プロセスを示します。優れた拡張機能は、明確な要件、厳密なコード構造、そして総合的なテストから始まります。WooCommerceのエコシステムが継続的に発展するにつれ、最新のAPIやベストプラクティスを学び実践することで、より専門的で信頼性の高いビジネスソリューションを構築することができるようになります。
FAQ よくある質問
WooCommerceの拡張機能を開発するにあたっての前提知識は何が必要ですか?
あなたは、しっかりとしたPHPのプログラミング基礎と、オブジェクト指向プログラミング(OOP)の概念に精通している必要があります。また、アクションフック、フィルターフック、カスタム投稿タイプ(CPT)、メタデータなど、WordPressのコアメカニズムを深く理解しなければなりません。HTML、CSS、JavaScript(特にjQuery)、MySQLの基本知識も必要です。
WooCommerceのプラグインで問題が発生した場合、どのようにトラブルシューティングを行うのでしょうか?
まず、確認してください。 wp-config.php ファイルは有効化されています。 WP_DEBUG と WP_DEBUG_LOGこれにより、エラー情報がログファイルに記録されます。次に、WooCommerce自体がログシステムを提供しており、これを利用することができます。 wc_get_logger() 関数は実行状態を記録します。また、ブラウザの開発者ツール(コンソールとネットワークタブ)を使用して、フロントエンドのJavaScriptエラーやAJAXリクエストの応答を確認できます。複雑な論理問題の場合は、XdebugなどのPHPデバッグツールを使用して段階的にデバッグできます。
私のプラグインは、さまざまなWooCommerceのバージョンとどのように互換性があるのでしょうか?
開発時には、WooCommerceの公式ドキュメントで説明されている、関数やフックの廃止に常に注意する必要があります。コード内では、WooCommerceのバージョンやクラス/メソッドの存在を確認するための条件判定を使用して、後方互換の代替策を提供します。例えば:if ( version_compare( WC_VERSION, '4.0.0', '>=' ) ) { // 使用新API } else { // 使用旧API }プラグインのリリース情報の中で、サポートされる最低および最高のWooCommerceバージョンを明確に記載してください。
ユーザーの入力や支払いデータを安全に処理する方法は?
ユーザーから入力されたすべてのデータ(例えば、 $_POST, $_GETすべてのプラグインやテーマは検証およびクリーンアップが必要です。WordPressが提供する機能を利用する場合も、例えば、 sanitize_text_field(), absint(), wp_unslash() など。ブラウザに出力されるデータの場合は、document.write()を使用します。 esc_html(), esc_attr(), wp_kses_post() エスケープ処理を行ってください。決して自分で処理したり、クレジットカード番号などの敏感な支払い情報を保存しないでください。支払い機能を実現するには、WooCommerceに内置された支払いゲートウェイを利用するか、厳しいセキュリティー監査を受けたサードパーティの支払いAPIを利用する必要があります。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。