Welcartには関連商品という概念はありません。
そこで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品リスト」として表示する関数をここで作成しています。
尚、このプログラムは下記の設定が完了している事が前提となります。
②Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方
③総ての「Font Awesome」アイコンフォントを利用可能にする
1.開発方針
1.関数名と引数
relation_products($pc_num,$sm_num,$msg)
| 引数 | デフォルト値 | 備考 |
| $pc_num | 5 | PC画面の時、1行に表示する商品数 |
| $sm_num | 2 | スマホ画面の時、1行に表示する商品数 |
| $msg | ’関連商品’ | タイトルに付ける名前 |
2.その他の条件
①関連商品とは、現在表示している商品と同じカテゴリの商品とする。
②関連商品には、現在表示している商品は含めない。
③関連商品が1行に表示する商品数を超えた場合は「slick.js」でスライドさせる。
2.プログラムの詳細
1.プログラム
func￥welcart￥item-listフォルダに下に「relation_products.php」を作成し下記を追加します。
<?php /***************************************************************************** 関連商品のリスト出力 引数 $pc_num：1行の表示個数(PC)デフォルトは5 引数 $sm_num：1行の表示個数(スマホ)デフォルトは2 引数 $msg ：タイトル名 デフォルトは「関連製品」 *******************************************************************************/ function relation_products($pc_num=5,$sm_num=2,$msg='関連製品') { if(!is_single()){return;} /* 個別商品ページ以外の場合は終了 */ list($slug,$name) = get_my_itemgenre(); /* ①商品カテゴリの取得 */ $msg = '<i class="fas fa-grip-lines-vertical" style="color:blue;"></i> '.$msg; /* ②タイトル */ $args = array( /* ③wp_queryのパラメータセット */ 'posts_per_page' =>-1, 'category_name' => $slug, 'meta_key' => 'price', 'orderby' => 'meta_value_num', 'order' => 'asc', 'post__not_in' => array(get_the_ID()),/* 現在の商品は非表示 */ ); $products = new WP_Query( $args ); ?> <h3><?php echo $msg;?></h3> <div class="my_relation"> /* ④商品リスト */ <?php while ($products->have_posts()) : $products->the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="itemimg"> <a href="<?php the_permalink() ?>"><?php usces_the_itemImage(0, 150, 150); ?></a> <?php welcart_basic_campaign_message(); ?> </div> <div class="itemprice"><?php usces_the_firstPriceCr(); usces_guid_tax(); ?></div> <?php if(! usces_have_zaiko_anyone() ) : ?> <div class="itemsoldout"><?php _e('Sold Out', 'usces' ); ?></div> <?php endif; ?> <div class="itemname"><a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?></a></div> </article> <?php endwhile; ?> </div> <style> /* CSSの出力 */ .my_relation article{padding:10px;} .my_relation .itemimg img { width: 100%; height: auto; } @media screen and (max-width:768px){.my_relation{margin:0 20px;max-width:100%;}} .slick-prev:before, .slick-next:before{color:'#000';} .slick-track{margin-left:0;} </style> <?php echo <<<EOM <script> /* ⑤Jqueryの出力 */ $(function(){ $('.my_relation').slick({ arrows:true, /* 左右矢印を表示 */ dots:false, /* ドットは非表示 */ infinite:false, /* 無限ループ機能はOFF */ slidesToShow:$pc_num, /* 1行の表示個数(PC) */ slidesToScroll:1, /* スクロール個数 */ swipeToSlide:true, /* スワイプはslidesToScroll値に影響を受けない */ responsive:[{ breakpoint:768,settings:{slidesToShow:$sm_num,}/* 1行の表示個数(スマホ) */ }] }); }); </script> EOM;?> <?php wp_reset_postdata(); /* ⑥WP_Queryのリセット */ } /* functionの終了 */ ?>
①get_my_itemgenre()関数は、下記で事前に作成しておいて下さい。
②アイコンフォントは「fas fa-grip-lines-vertical」を利用しています。
総ての「Font Awesome」アイコンフォントを利用可能にするの設定をして下さい。
③「wp_query」のパラメータは左記リンク先の解説を参照してください。
尚、価格順の表示方法は商品リストを価格順に並べるカスタマイズを実行して下さい。
④商品の表示部分はwelcart_basicの商品表示プログラムを「wp_query」用に少し変更しました。
⑤「slick.js」の設定は、プログラムで変更する必要がある為、phpプログラムで書きました。
<<<EOMはヒアドキュメントと言われる物で、何行にも渡る長い文章を出力する方法です。次のEOMまでが1つのドキュメントになります。
⑥「 wp_reset_postdata()」は、Wp_Queryのリセット関数で必須です。
2.プログラムのロード
functions.phpに下記を記述します
/* 商品リスト関数の追加 */ get_template_part('func/welcart/item-list/relation_products'); /* 関連商品 */
■「welcart」の下に「item-list」フォルダを作成し、その中に「relation_products.php」関数を作成します。
3.上記関数を設定する場所
個別商品表示プログラム「wc_item_single.php」の中に記述します。
子テーマに上記プログラムが無い場合は親テーマの「wc_templates」フォルダと合わせて、子テーマにコピーして下さい。
関数を追加する場所は下記になります。
<div id="primary" class="site-content">
<div id="content" role="main">
個別商品の各種情報の表示
・・・・
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php relation_products(5,2);?><!-- 関連商品の表示 -->
■追加する場所は<?php get_sidebar(); ?>の下です。
