WooCommerce：商品ページに画像付きで「次の商品」「前の商品」を表示させる方法
WooCommerceに画像付きの次・前のナビゲーションを表示させる方法です。
次の商品、前の商品のリンクを表示させる方法
下記の図のように、アイキャッチ画像付きで「次の商品」「前の商品」のリンクを表示させます。
テンプレート「StoreFront」には標準機能でありますよね。
StoreFrontは使わないので、同じように「次へ」「前へ」のリンクを設置したいと海外サイトを探しましたよ。ループ外でも使えます。
「content-single-product.php」に直接記述してもよいのですが、長いのでモジュール化して呼び出す方がお薦めです。
PHP
<?phpfunction ShowLinkToProduct($post_id, $categories_as_array, $label) {$query_args = array( 'post__in' => array($post_id), 'posts_per_page' => 1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array(array('taxonomy' => 'product_cat','field' => 'id','terms' => $categories_as_array)));$r_single = new WP_Query($query_args);if ($r_single->have_posts()) {$r_single->the_post();global $product;?><ul class="product_list_widget"><li><a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if (has_post_thumbnail()) the_post_thumbnail('shop_thumbnail'); else echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="'.$woocommerce->get_image_size('shop_thumbnail_image_width').'" height="'.$woocommerce->get_image_size('shop_thumbnail_image_height').'" />'; ?><?php echo $label; ?><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a> <?php echo $product->get_price_html(); ?></li></ul><?phpwp_reset_query();}}if ( is_singular('product') ) {global $post;$terms = wp_get_post_terms( $post->ID, 'product_cat' );foreach ( $terms as $term ) $cats_array[] = $term->term_id;$query_args = array('posts_per_page' => -1, 'post_status' => 'publish', 'post_type' => 'product', 'tax_query' => array(array('taxonomy' => 'product_cat','field' => 'id','terms' => $cats_array)));$r = new WP_Query($query_args);if ($r->post_count > 2) {$prev_product_id = -1;$next_product_id = -1;$found_product = false;$i = 0;$current_product_index = $i;$current_product_id = get_the_ID();if ($r->have_posts()) {while ($r->have_posts()) {$r->the_post();$current_id = get_the_ID();if ($current_id == $current_product_id) {$found_product = true;$current_product_index = $i;}$is_first = ($current_product_index == $first_product_index);if ($is_first) {$prev_product_id = get_the_ID(); // if product is first then 'prev' = last product} else {if (!$found_product && $current_id != $current_product_id) {$prev_product_id = get_the_ID();}}if ($i == 0) { // if product is last then 'next' = first product$next_product_id = get_the_ID();}if ($found_product && $i == $current_product_index + 1) {$next_product_id = get_the_ID();}$i++;}if ($prev_product_id != -1) { ShowLinkToProduct($prev_product_id, $cats_array, "next: "); }if ($next_product_id != -1) { ShowLinkToProduct($next_product_id, $cats_array, "prev: "); }}wp_reset_query();}}?>出力されるHTMLの構造は下記のようになります。
分かりやすいように「次へ」だけの構造にしています。
HTML
<ul class="product_list_widget"> <li> <a> <img> next: キャップ </a> <del> //割引の場合表示される <span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-currencySymbol">¥</span> 19 </span> </del> <ins> <span class="woocommerce-Price-amount amount"> <span class="woocommerce-Price-currencySymbol">¥</span> 17 </span> </ins> <small class="woocommerce-price-suffix">（税込）</small> </li></ul>HTMLを適宜変更したり、CSSで装飾するとOKです。
次へ・前へリンクを表示させるメリット
シングルページに「次へ」「前へ」を表示させるメリットしては下記があります。
- 若干、回遊率が上がります。
- Googleのbotがインデックスしやすくなります。
ページのインデックスが遅い場合に「次へ」「前へ」のリンクを設置すると、Googleのインデックスが早くなります。
商品のアップロードが多いECサイトの場合は「次へ」「前へ」のリンクはお薦めです。
