WordPress 向けの最高の WooCommerce コード スニペット

公開: 2023-05-12

WordPress に最適な WooCommerce コード スニペットを知りたいですか? オンライン ストアを調整して機能を追加する予定がある場合は、この記事を読み続けてください。 このガイドでは、知っておくべき一連のコード スニペットを示します。

まず、コード スニペットとは何か、そしてコード スニペットを使用する必要がある理由を見てみましょう。

コードスニペットとは何ですか?

コード スニペットは、Web サイトまたはプログラム上で特定のタスクまたは機能を実行するコードの小さなセクションです。 Web サイトやツールをカスタマイズし、機能を強化するためによく使用されます。

単純な 1 行から複数​​行の関数やアルゴリズムに至るまで、さまざまな複雑さのコード スニペットを任意のプログラミング言語で作成できます。 さらに、これらはオンラインのコード ライブラリ、フォーラム、プログラミング ブログでも見つけることができ、開発者によって特定のニーズに合わせて共有および変更されることがよくあります。

コード スニペットを使用すると、時間と労力を節約できます。 ただし、コードがどのように機能するかを理解し、コードが安全で脆弱性を引き起こさないことを確認することが重要です。 さらに、外部ソースのコード スニペットを使用する場合は、著作権侵害を避けるためにライセンスと帰属の要件を確認することが不可欠です。

WooCommerce コード スニペットを WordPress に追加する理由

WordPress 用の WooCommerce コード スニペットを使用すると、所有者と開発者の両方に利益がもたらされます。

たとえば、WooCommerce コード スニペットを使用して、オンライン ストアの新しい機能を追加したり、既存の機能を変更したりできます。 これにより、ユーザー エクスペリエンスが向上し、売上が増加します。

たとえば、コード スニペットを使用して、カスタム製品並べ替えオプションを追加したり、特定のビジネスのニーズに合わせてチェックアウト プロセスを変更したりできます。

また、WordPress 用の WooCommerce コード スニペットを使用すると、よりターゲットを絞った変更が可能になり、他のプラグインやテーマとの潜在的な競合が回避されるため、別のプラグインをインストールして設定するよりも効率的です。

さらに、WooCommerce コード スニペットは、オンライン ストアのセキュリティとパフォーマンスの向上に役立ちます。 カスタム コードを function.php ファイルまたは別のプラグイン ファイルに追加することで、開発者はコードが Web サイトの特定のニーズに合わせて最適化されていることを確認できます。

最後に、コード スニペットは、開発者を雇うよりもコスト効率の高いソリューションを提供できます。 一部のカスタマイズにはより複雑な開発作業が必要になる場合がありますが、オンラインで見つかる簡単なコード スニペットを使用して多くの変更を行うことができます。

ただし、コードの書き方が不十分だと、エラーやセキュリティ上の脆弱性が発生する可能性があります。 したがって、コードを Web サイトに追加する前に、ステージング環境でコードをテストして理解することをお勧めします。

また、Web サイトのファイルとデータベースのバックアップを作成して、懸命な作業を安全に保ってください。

WooCommerce コードスニペットを WordPress に追加する方法

いくつかの簡単な手順で、WooCommerce コード スニペットを WordPress に追加できます。

  • function.php ファイルを開きます。functions.phpファイルには、ほとんどの WordPress コード スニペットが含まれています。 通常はテーマ フォルダー内にあります。 WordPress ダッシュボードまたは FTP クライアントを通じてアクセスできます。
  • コード スニペットを追加します。必要なスニペットをコピーして、functions.php ファイルに貼り付けます。 ファイルの末尾、既存のコードの後ろなど、適切な場所に必ず追加してください。
  • 変更を保存する:コード スニペットを追加したら、変更をfunctions.php ファイルに保存します。 これにより、入力したコードが有効になります。
  • 機能をテストする:コード スニペットを追加した後、新しい機能をテストして、意図したとおりに動作することを確認します。

ただし、親テーマの function.php ファイルにコード スニペットを追加したくない場合は、カスタムの子テーマを作成できます。 このようにすれば、テーマの更新によって問題が発生することはありません。

WordPress 向けの最高の WooCommerce コード スニペット

WordPress に WooCommerce コード スニペットを追加する理由と方法を学びました。 次に、一般的なニーズに合わせて選択された最適な WooCommerce コード スニペットに移りましょう。

一言で言えば、これから共有するコードは次のことに役立ちます。

  • カスタム製品タブの追加
  • WooCommerce サポートをテーマに追加する
  • WooCommerce にカスタム通貨を追加する
  • テンプレートに「マイアカウント」リンクを表示する
  • 注文を自動的に完了する
  • ショップに表示される商品の数を変更する
  • 検索を無効にする
  • 「カートに追加」ボタンのテキストを変更する
  • ショップページのタイトルを微調整する

それぞれのコードを詳しく見てみましょう。

1) カスタム製品タブを追加する

WooCommerce にカスタム製品タブを追加することは、製品に関する追加情報を表示する優れた方法です。 したがって、これを追加できるようにするコード スニペットを次に示します。

 // カスタム製品タブを追加します

add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab' );
関数 add_custom_product_tab( $tabs ) {
$tabs['custom_tab'] = 配列(
'タイトル' => __( 'カスタムタブ', 'woocommerce' ),
「優先度」 => 50、
'コールバック' => 'custom_product_tab_content'
);

$tabs を返します。

}

// カスタム製品タブのコンテンツ

関数custom_product_tab_content() {
echo '<h2>カスタム製品タブ</h2>';
echo '<p>カスタム コンテンツがここに表示されます。</p>';
}

このコードは、優先度 50 で新しい「カスタム タブ」タブを製品ページに追加します。さらに、要件に応じてカスタム製品タブのタイトルと内容を変更できます。 コールバック関数custom_product_tab_contentは、タブのコンテンツを表示します。 ニーズに応じてコードをカスタマイズできます。

2) サードパーティのテーマで WooCommerce サポートを宣言する

デフォルトで WooCommerce サポートを提供しないサードパーティのテーマを使用している場合は、Web サイトのテーマの function.php ファイルに次のコード スニペットを追加することで問題を追加修正できます。

 // WooCommerce サポートをテーマに追加します

関数 mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

出典: ミディアム。

3) WooCommerce にカスタム通貨を追加する

カスタム通貨を WooCommerce に追加する場合は、次のコード スニペットを使用できます。

 // カスタム通貨を WooCommerce に追加します

関数 add_my_currency( $currency ) {
$currency['ABC'] = __( '私の通貨', 'woocommerce' );
$currency を返します。
}

add_filter( 'woocommerce_currency', 'add_my_currency' );
function add_my_currency_symbol( $currency_symbols ) {
$currency_symbols['ABC'] = '$'; // ABC をカスタム通貨コードに変更し、$ を通貨記号に変更します。
$currency_symbols を返します。
}

add_filter( 'woocommerce_currency_symbols', 'add_my_currency_symbol' );

ここでは、 woocommerce_currencywoocommerce_currency_symbols という2 つのフィルターを使用して、カスタム通貨とその記号を追加します。 まず、通貨の名前とコードを使用可能な通貨のリストに追加します。 次に、カスタム通貨コードの通貨記号を追加できます。

4) テンプレートファイルにマイアカウントリンクを表示する

WooCommerce のテンプレート ファイルにアカウントリンクを表示するには、次のコード スニペットを使用できます。

 <?php if ( is_user_logged_in() ) : ?>

<a href="<?php echo esc_url( wc_get_account_endpoint_url( 'dashboard' ) ); ?>"><?php esc_html_e( 'My Account', 'woocommerce' ); ?></a>

<?php else: ?>

<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php esc_html_e( 'ログイン / 登録', 'woocommerce' ); ?></a>

<?php endif; ?>

このコードは、 is_user_logged_in()関数を使用してユーザーがログインしているかどうかを確認します。

ユーザーがログインしている場合は、 wc_get_account_endpoint_url( 'dashboard' )関数を使用してダッシュボードへのリンクが表示されます。 ただし、ユーザーがログインしていない場合は、 wc_get_page_permalink( 'myaccount' )関数を使用して [マイ アカウント] ページへのリンクが表示されます。

このコードを、私のアカウントのリンクを表示したい WooCommerce テーマ内の任意のテンプレート ファイルに追加できます。 たとえば、これを header.php ファイルに追加して、サイトのヘッダーにリンクを表示できます。

5) 注文を自動的に完了する

WooCommerce で注文を自動的に完了したい場合は、次のコード スニペットを使用できます。

 // 注文をオートコンプリートする
add_action( 'woocommerce_thankyou', 'custom_woocommerce_auto_complete_order' );

関数custom_woocommerce_auto_complete_order( $order_id ) {
if ( ! $order_id ) {
戻る;
}

$order = wc_get_order( $order_id );
$order->update_status( '完了' );
}

出典: スタックオーバーフロー

このコードは、 woocommerce_ thankyou関数にアクション フックを追加します。この関数は、注文が完了したときにトリガーされます。 このフックがアクティブになると、 custom_woocommerce_auto_complete_order関数が実行されます。

この関数はまず、 $order_id変数が設定されているかどうかを確認します。 設定されていない場合は戻ります。 それ以外の場合は、 wc_get_order()関数から order オブジェクトにアクセスします。

最後に、 update_status()メソッドを使用して、注文ステータスを「完了」に設定します。

自動的に完了する注文は、すべての製品またはビジネスに適合しない場合があることに注意してください。 したがって、このコードをアクティブ化する前に、特定のニーズを考慮することが重要です。

6) ページごとに表示される商品数を変更する

WooCommerce でページごとに表示される商品の数を変更したい場合は、次のコード スニペットを使用できます。

 // ページ数ごとに商品を変更します
add_filter( 'loop_shop_per_page', 'custom_loop_shop_per_page', 22 );
関数custom_loop_shop_per_page( $cols ) {
$cols = 14; // この数値を、ページごとに必要な商品数に変更します。
$cols を返します。

}

このコードは、 loop_shop_per_page関数にフィルターを追加します。 これにより、WooCommerce のページごとに表示される商品の数が制御されます。 その後、 custom_loop_shop_per_page関数が実行され、現在の列数がパラメータとして取り込まれます。

この関数では、 $cols変数をページあたりの製品の希望数 (この例では 14) に設定することもできます。 最後に、更新された列数を取得します。

ページごとに表示される商品の数を変更すると、ユーザー エクスペリエンスとページの読み込み時間に影響を与える可能性があります。 したがって、この設定を変更する前に、特定のニーズを考慮することが重要です。

7) 検索を無効にする

WordPress で検索を無効にするには、次のコード スニペットを使用できます。

 // 検索を無効にする
function fb_filter_query( $query, $error = true ) {
if ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;

// エラーになる
if ( $error == true )
$query->is_404 = true;
}
}

add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

出典: スタックオーバーフロー

このコードは、 custom_disable_search()というカスタム関数を使用して、WordPress の検索機能を無効にします。 ここでは、検索クエリの実行時にトリガーされるアクション フックをparse_query関数に追加します。

この関数では、現在のクエリが検索クエリ(is_search()) であるかどうかを確認します。 存在する場合、クエリ オブジェクトのis_searchプロパティを null に設定します。 また、 s クエリ変数を null に設定し、検索クエリを事実上無効にします。

最後に、このコード スニペットはget_search_formにフィルターを追加して、WordPress サイトから検索フォームを非表示にします。

8) 「カートに追加」ボタンのテキストを変更します。

WooCommerce で「カートに追加」ボタンのテキストを変更するには、次のコード スニペットを使用できます。

 add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text' );
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text' );

関数custom_add_to_cart_text() {
return __( '今すぐ購入', 'woocommerce' );
}

出典: ンジェンガ

このコードは、 Woocommerce_product_single_add_to_cart_text関数とwoocommerce_product_add_to_cart_text関数に 2 つのフィルターを追加します。これらは、WooCommerce の「カートに追加」ボタンのテキストを制御します。 次に、 custom_add_to_cart_text()関数が実行され、更新されたボタン テキストが返されます。

__()関数を使用して、WooCommerce 翻訳ファイルで定義されている「今すぐ購入」テキストにアクセスします。 テキストを別のテキストに変更する場合は、「今すぐ購入」を希望のテキストに置き換えます。

9) WooCommerce のショップページのタイトルを置き換える

WooCommerce でショップ ページのタイトルを置き換えるには、次のコード スニペットを使用できます。

 add_filter( 'woocommerce_page_title', 'custom_shop_page_title' );
functioncustom_shop_page_title( $page_title ) {
if( 'ショップ' == $page_title ) {
return __( '新しいショップタイトル', 'woocommerce' );
}

$page_title を返します。
}

このコードは、 Woocommerce_page_title 関数にフィルターを追加します。この関数は、WooCommerce ショップ ページのタイトルを制御します。 次に、 custom_shop_page_title()関数が実行され、ページ タイトルが「shop」かどうかがチェックされ、そうであれば更新されたタイトル (「New Shop Title」) が返されます。

このコード スニペットは、 __()関数を使用して、WooCommerce 翻訳ファイルで定義されている、更新されたショップ ページ タイトルの翻訳されたテキストにアクセスします。 ただし、テキストを別のテキストに変更したい場合は、「新しいショップタイトル」を希望のテキストに置き換えてください。

結論

WordPress の WooCommerce コード スニペットを使用することは、オンライン ストアをカスタマイズし、新しい機能を追加する強力な方法です。 たとえば、ストアの外観を変更したり、チェックアウト プロセスを変更したり、新しい機能を追加したりする場合、コード スニペットは目標の達成に役立ちます。

コード スニペットを追加するには、子テーマの function.php ファイルにコードを貼り付けるか、カスタム プラグインを作成します。 ただし、Web サイトのコードを変更すると、予期しない結果が生じる可能性があることを覚えておくことが重要です。 したがって、変更を加える前にサイトのバックアップを作成することを常にお勧めします。

上記で提供したコードを使用すると、多くのカスタマイズを備えた素晴らしい WooCommerce ストアを実行できます。 要約すると、以下のスニペットを共有しました。

  • カスタム製品タブの追加
  • WooCommerce サポートをテーマに追加する
  • WooCommerce にカスタム通貨を追加する
  • テンプレートに「マイアカウント」リンクを表示する
  • 注文を自動的に完了する
  • ショップに表示される商品の数を変更する
  • 検索を無効にする
  • 「カートに追加」ボタンのテキストを変更する
  • ショップページのタイトルを微調整する

要件に応じてコードを選択して作業できます。

この記事が役に立ち、楽しんで読んでいただければ幸いです。 よろしければ、この投稿をソーシャル メディア上で友人やブロガー仲間と共有することを検討してください。 ブログ アーカイブを参照して、WordPress/WoCommerce ガイドをさらに学習することもできます。

このガイドに他のスニペットを追加する必要がありますか?

以下のコメント欄でお知らせください。

あなたが好きかもしれない同様の記事:

  • WooCommerce 製品を属性でフィルタリングする方法
  • ベスト WooCommerce 寄付プラグイン
  • 最高の WooCommerce ライセンス マネージャー プラグイン