ベストセラー人気 WordPress テーマTop 30 詳細

WooCommerce 外部商品リンクを新しいウィンドウで開く

Last Updated:2021年10月28日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

WordPress WooCommerce ショッピングモールでは、外部の商品/連携商品を登録することができます。 しかし、外部の商品のリンクをクリックすると、同じウィンドウで開くので、訪問者がサイトを離脱することになります。 直帰率を減らすために WooCommerce 外部商品リンクを新しいウィンドウで開くようにしたい場合、プラグインを使用したり、カスタムコードを使用することができます。

WooCommerce 外部商品リンクを新しいウィンドウで開く

WooCommerce ショッピングモールで商品を外部/連携商品に設定して、外部の商品を登録することができます。

WooCommerce 外部商品リンクを新しいウィンドウで開く
WooCommerce 外部商品例示。

外部/連携商品を構成するときにボタンのテキストを指定することができ、(例えば、「商品購入する」、「最商品表示」)ボタンをクリックしたときに移動する外部商品のURLを入力することができます。

アマゾンの商品、クパン商品、スマートストア商品などを WooCommerce ショッピングモールに外部/連携商品として登録することができます。 詳細については、「WordPress WooCommerceで、外部の商品/連携商品を追加する(アマゾン、クパン商品紹介)」を参照してみてください。

しかし、ボタンをクリックすると、ブラウザの新しいウィンドウまたは新しいタブで商品ページが開かれるのではなく、同じウィンドウで開きます。 このため、訪問者が商品を購入するボタンをクリックしてサイトを離脱するようになっ直帰率が増加することができます。

直帰率の増加は、SEO(検索エンジン最適化)に不利に作用することができるので、外部の商品を新しいウィンドウ/新しいタブで開くようにすることを検討することができます。

プラグインを使用して、外部の商品を新しいタブで開く

WooCommerce External Product New Tabプラグイン

WooCommerce 外部商品リンクを新しいウィンドウ/新しいタブで開くようにする WordPress プラグイン

簡単な方法で WooCommerce External Product New Tab(WooCommerce 外部商品の新しいタブ)という無料のプラグインを使用することができます。

このプラグインは、 WooCommerce サイトのすべての外部/連携で商品を購入するボタンのリンクを、Webブラウザの新しいタブで開くようにします。

このプラグインは、別の設定ページがなく、設置して有効にすると、自動的に動作します。

WooCommerce Improved External Productsプラグイン

似たような機能の他のプラグインで WooCommerce Improved External Productsがあります。 このプラグインは、WooCommerce External Product New Tabよりもユーザー数が少ない方の評価もあまり良くありません。 WooCommerce External Product New Tabプラグインが動作しない場合は、このプラグインをインストールしてテストすることができます。

カスタムコードを使用して、外部の商品を新しいウィンドウで開く

プラグインの使用は最小限にすることが望ましいです。 このような機能のために、あえて、プラグインまで使用する必要がないことです。

次のようなコードを チャイルドテーマ(子テーマ)の関数ファイル(functions.php)に追加して、外部の商品を新しいウィンドウ/新しいタブで開くようにすることができます。

function woocommerce_external_add_to_cart() {
   global $product;
   if ( ! $product->add_to_cart_url() ) return;
   echo '<p><a href="' . $product->add_to_cart_url() . '" class="single_add_to_cart_button button alt" target="_blank">' . $product->single_add_to_cart_text() . '</a></p>';
}
// 출처: https://www.businessbloomer.com/woocommerce-open-external-product-link-in-new-tab/

上記のコードはシンプルですが、正常に動作していない場合は、次のようなコードでもテストしてみてください。

// This will take care of the Buy Product button below the external product on the Shop page.
// 다음은 상점 페이지에서 외부 상품 아래에 상품 구매하기 버튼을 처리합니다.

 add_filter( 'woocommerce_loop_add_to_cart_link',  'ts_external_add_product_link' , 10, 2 );

// Remove the default WooCommerce external product Buy Product button on the individual Product page.
// 개별 상품 페이지에서 WooCommerce 외부 상품의 기본 상품 구매하기 버튼을 제거합니다.

 remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
  // Add the open in a new browser tab WooCommerce external product Buy Product button.
 add_action( 'woocommerce_external_add_to_cart', 'ts_external_add_to_cart', 30 );
 
function ts_external_add_product_link( $link ) {
          global $product;
          if ( $product->is_type( 'external' ) ) {
                    $link = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%s</a>',
                    esc_url( $product->add_to_cart_url() ),
                    esc_attr( isset( $quantity ) ? $quantity : 1 ),
                    esc_attr( $product->id ),
                    esc_attr( $product->get_sku() ),
                    esc_attr( isset( $class ) ? $class : 'button product_type_external' ),
                    esc_html( $product->add_to_cart_text() )
                    );
          }
          return $link;
 }
function ts_external_add_to_cart() {
                    global $product;
                    if ( ! $product->add_to_cart_url() ) {
                    return;
                    }
                    $product_url = $product->add_to_cart_url();
                    $button_text = $product->single_add_to_cart_text();
/**
 *  The code below outputs the edited button with target="_blank" added to the html markup.
 * 아래의 코드는 target="_blank로 수정된 버튼을 html 마크업에 추가하여 출력합니다.
 */
                    do_action( 'woocommerce_before_add_to_cart_button' ); ?>
                    <p class="cart">
                    <a href="<?php echo esc_url( $product_url ); ?>" rel="nofollow" class="single_add_to_cart_button                                                           button alt" target="_blank">  
                    <?php echo esc_html($button_text ); ?></a>
                    </p>
                    <?php do_action( 'woocommerce_after_add_to_cart_button' );
 }

// 출처: https://www.tychesoftwares.com/how-to-make-woocommerce-external-product-links-open-in-a-new-tab/

上記の方法がうまく動作しない場合は、次のようなコードでもテストすることができます。 次のコードは、古いためにうまく機能していない可能性が高いが、試みは試みることができるでしょう。

function ns_open_in_new_tab($args, $product) 
{
    if( $product->is_type('external') ) {
        // Inject target="_blank" into the attributes array
        $args['attributes']['target'] = '_blank';
    }    

    return $args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'ns_open_in_new_tab', 10, 2 );

// 출처: https://stackoverflow.com/questions/37801817/open-external-woocommerce-products-in-new-tabs-adding-attribute-target-blank

次は、 WordPress Enfold (Enfold)テーマで提示するコードです。 Enfold テーマを使用している場合は、次のコードをチャイルドテーマ関数ファイルの一番下に追加して動作するかをテストしてみてください。

// Open external product links in a new tab or a new browser in Enfold WordPress theme

function addCustomScript(){
?>
<script>
function a() {
jQuery('.products.columns-4 .button.product_type_external').attr('target', '_blank');
}

jQuery(window).load(function() {
a();
});
</script>
<?php
}
add_action('wp_footer', 'addCustomScript');

上記のコードを別のテーマでも応用できそうです。 ただし、上記のコードを追加すると、サイトのすべてのページでjQueryのスクリプトをロードするので、サイトの速度に若干の影響を与える可能性があります。 店舗ページと商品ページにのみロードされるように条件文を追加することを考慮してみることができます。

if ( is_product() || is_shop() ) {
// 코드
}

参照



コメントを残す

コメント