これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。
WelCart で投稿ページに商品購入欄を作るときのモジュール構造
モジュールを書くとき構造のテンプレートがあると便利なので概念図を書いておく。WelCart で投稿ページに商品購入欄を作るときの１商品の購入欄のモジュール構造
0001$args = array(
0002 ′post_type′ => ′post′,
0003 ′posts_per_page′ => -1,
0004 ′no_found_rows′ => true,//ページャーを使う時はfalseに。
0005 ′p′ => $postid,
0006 );
0007$query1 = new WP_Query( $args );
0008while($query1->have_posts()) {// post(商品ページ) loop / といっても p= で設定しているので1つしかない
0009<div style="margin-left:20px;">
0010$query1->the_post();
0011global $post;// 商品ページの post id をとる
0012usces_the_item();// 商品ページを指定する
0013$cnt = usces_sku_num();// 商品ページの SKU の数を見る
0014if($cnt>0){// 商品ページの SKU が1以上なら
0015while (usces_have_skus()){// 商品ページのSKUループ
0016<div style="margin-left:20px;">
0017//
0018// 商品ページ SKU の共通オプションの表示部
0019//
0020if( usces_is_options()>0 ){// オプションがあるか？
0021<div style="margin-left:20px;">
0022while(usces_have_options()){// オプションのループ
0023<div style="margin-left:20px;">
0024// オプションの入力フィールドを取得
0025$block = usces_the_itemOption( usces_getItemOptName(),′′,′return′ );
0026</div>
0027}
0028//
0029// 商品フィールド
0030//
0031//
0032// 数量入力フィールド取得
0033//
0034 $block=usces_the_itemQuant(′return′);
0035
0036//
0037// かごへ入れるボタン
0038//
0039 usces_the_itemSkuButton(′購入′,0,′return′);
0040//
0041// エラーメッセージが返ってきたか？
0042//
0043$block = usces_singleitem_error_message($post->ID, usces_the_itemSku(′return′), ′return′) ;
0044if($block!=′′){
0045<div style="margin-left:20px;">
0046// javascript でエラーアラートを出す
0047<script type=′text/javascript′<alert(′".$block."′+′\\n′+′スクロールして商品購入欄で修正してください。′);</script>
0048$block // エラー内容
0049</div>
0050}
0051</div>
0052 }
0053 </div>
0054}
0055}
0056</div>
これをベースに全商品のリストを出すWelCart で投稿ページに全商品の購入欄を作る
書式は、毎回手作りになるタイプ（プラグイン化すればもっと楽になるけど）
前述の構造を以下のようにサブルーチン化してしまう。
0001function welcartinline($postid,$css,$itemQuant=′′,$style=′′) {
0002// postid:ターゲットのポストID
0003// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) １ページに複数インラインを使う場合
0004// 1つめの welcartinline の css は ０、それ以降は１を設定する。
0005// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
0006// style: 選択式の時のstyle を指定
0007$postid_stk = explode(",",$postid);// カンマ区切りで複数ID指定を想定
0008$args = array(
0009′post_type′=> ′post′,
0010′posts_per_page′=> -1,
0011′no_found_rows′=> true,//ページャーを使う時はfalseに。
0012′p′=> $postid_stk,// 特定カテゴリの商品をループさせたい場合 ′cat′ => $postid_stk
0013 );
0014$query1 = new WP_Query( $args );
0015if($query1->have_posts()) {// post(商品ページ) loop / といっても p= で設定しているので1
0016while($query1->have_posts()) {// post(商品ページ) loop / といっても p= で設定しているので1
0017$query1->the_post();
0018global $post;// 商品ページの post id をとる
0019usces_the_item();// 商品ページを指定する
0020$cnt = usces_sku_num();// 商品ページの SKU の数を見る
0021if($cnt>0){// 商品ページの SKU が1以上なら
0022while (usces_have_skus()){// 商品ページのSKUループ
0023//
0024// 表示用テーブル ヘッド部
0025//
0026$opt_line = ′′;
0027$opt_line.=′<table style="font-size:12px;">′;
0028$opt_line.=′<tr style="font-size:10px;">′;
0029$opt_line.=′<th style="text-align: center !important;">品名</th>′;
0030$opt_line.=′<th style="text-align: center !important;">ご注文エリア</th>′;
0031$opt_line.=′<th style="text-align: center !important;">ご注文数量</th>′;
0032$opt_line.=′<th style="text-align: center !important;">数量</th>′;
0033$opt_line.=′<th style="text-align: center !important;"> </th>′;
0034$opt_line.=′</tr>′;
0035//
0036// 商品ページ SKU の共通オプションの表示部
0037//
0038$opt_line.=′<tr>′;
0039$opt_line.=′<td style="text-align: center !important;">′.usces_the_itemSkuDisp(′return′).′</td>′;
0040if( usces_is_options()>0 ){// オプションがあるか？
0041$col = 0;
0042while(usces_have_options()){// オプションのループ
0043if($col==0){// オプション１つめ
0044$opt_line.=′<td style="text-align: center !important;">′;
0045$s = ′ style="width:60px;"′;
0046}elseif($col==1){// オプション２つめ
0047$opt_line.=′<td style="text-align: center !important;">′;
0048$s = ′ style="width:60px;"′;
0049}else{// オプション3つ目以降
0050$opt_line.=′<td style="text-align: center !important;">′;
0051$s = ′′;
0052}
0053// オプションの入力フィールドを取得
0054$block = usces_the_itemOption( usces_getItemOptName(),′′,′return′ );
0055// オプションの class を変更(見た目カスタマイズ）
0056$block = str_replace(′class=\′iopt_select\′′,′class=\′iopt_select\′′.$s,$block);
0057$opt_line.=$block;
0058$opt_line.=′</td>′;
0059$col++;
0060}
0061}
0062$opt_line.=′<td style="text-align: center !important;">′;
0063//
0064// 数量入力フィールド取得
0065//
0066$block=usces_the_itemQuant(′return′);
0067//
0068// 数量
0069//
0070if($itemQuant!=′′){
0071//
0072// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
0073//
0074$value= get_formfield($block,"name");
0075//
0076$itemQuant_stk = array();
0077$tags = "";
0078$tags.= "<select name=′".$value."′ id=′".$value."′ style=′".$style."′>";
0079$itemQuant_stk = explode(",",$itemQuant);
0080foreach($itemQuant_stk as $val){
0081$tags.="<option value=′".$val."′>".$val."個</option>";
0082}
0083$tags.="</select>";
0084$opt_line.=$tags;
0085}else{
0086//
0087// 数値入力フィールドの style を書き換え（変更) で数値入力フィールドを設定
0088//
0089$opt_line.=str_replace(′input′,′input style="width:20px;font-size:12px;"′,$block);
0090}
0091$opt_line.=′</td>′;
0092//
0093// かごへ入れるボタン
0094//
0095$opt_line.=′<td style="text-align: center !important;">′;
0096$block = usces_the_itemSkuButton(′購入′,0,′return′);
0097$opt_line.= ′<!–pre–>′.$block.′<!–/pre–>′;
0098$opt_line.=′</td>′;
0099$opt_line.=′</tr>′;
0100//
0101// エラーメッセージが返ってきたか？
0102//
0103$block = usces_singleitem_error_message($post->ID, usces_the_itemSku(′return′), ′return′) ;
0104if($block!=′′){
0105$opt_line.= "<script type=′text/javascript′>alert(′".$block."′+′\\n′+′スクロールして商品購入欄で修正してください。′);</script>";
0106$opt_line.= ′<tr><td colspan="5"> <font color="#cc0000" size="5"><b>′.$block.′</b></font></td></tr>′;
0107}
0108//
0109// 1商品終わり
0110$opt_line.= ′</table>′;
0111}
0112}
0113}
0114wp_reset_postdata();
0115}
0116
0117//
0118// form にいれる
0119//
0120$USCES_CART_URL_str = USCES_CART_URL;
0121
0122$ret = <<<EOF
0123<form action="$USCES_CART_URL_str" method="post">
0124$opt_line
0125</form>
0126EOF;
0127
0128return($ret);
0129}
カテゴリー毎の商品リストを表示させる
リストを一括表示（商品ごとにかごに入れるボタンを押すタイプ）するモジュール0001function g_rep_yuzu_welcart_listMB($catid,$class)
0002{
0003// postid:ターゲットのポストID
0004// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) １ページに複数インラインを使う場合
0005// 1つめの welcartinline の css は ０、それ以降は１を設定する。
0006// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
0007// style: 選択式の時のstyle を指定
0008$USCES_CART_URL_str = USCES_CART_URL;
0009
0010if($class!=′′){
0011$class = ′ class="′.$class.′"′;
0012}
0013$opt_line=′′;
0014
0015$catid_stk = explode(",",$catid);
0016$args = array(
0017 ′post_type′ => ′post′,
0018 ′posts_per_page′ => -1,
0019 ′no_found_rows′ => true, //ページャーを使う時はfalseに。
0020 ′cat′ => $catid_stk,
0021 );
0022
0023$query1 = new WP_Query( $args );
0024if($query1->have_posts()){
0025$opt_line.=′<form action="′.$USCES_CART_URL_str.′" method="post">′;
0026$opt_line.=′<table style="font-size:12px;"′.$class.′>′;
0027//
0028// 表示用テーブル ヘッド部
0029//
0030while($query1->have_posts()) {// post 商品 loop
0031$query1->the_post();
0032global $post;// 商品ページの post id をとる
0033usces_the_item();// 商品ページを指定する
0034//—————————
0035// 商品ページ(商品名)
0036//
0037$opt_line.=′<tr>′;
0038$opt_line.=′<th style="text-align: center !important;" colspan="2">′.usces_the_itemName(′return′).′</th>′;
0039$opt_line.=′</tr>′;
0040//
0041$cnt = usces_sku_num();// 商品ページの SKU の数を見る
0042if($cnt>0){// 商品ページの SKU が1以上なら
0043while (usces_have_skus()){// 商品ページのSKUループ
0044//
0045// １商品
0046//
0047//—————————
0048$opt_line.=′<tr>′;
0049// グラム・形状 (SKU表示名)
0050$opt_line.=′<td style="text-align: left !important;">′.usces_the_itemSkuDisp(′return′).′</td>′;
0051//
0052// 在庫
0053//
0054$opt_line.=′<td style="text-align: center !important;">′.usces_the_itemZaiko(′return′).′</td>′;
0055$opt_line.=′</tr>′;
0056//—————————
0057//
0058// 単価
0059//
0060$opt_line.=′<tr>′;
0061$opt_line.=′<td style="text-align: right !important;">′.usces_the_itemCprice(′return′).′円</td>′;
0062//
0063// 数量入力フィールド取得
0064//
0065$opt_line.=′<td style="text-align: center !important;">′;
0066$block=usces_the_itemQuant(′return′);
0067//
0068// 数量
0069//
0070if($itemQuant!=′′){// プルダウンでえらばせる時
0071//
0072// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
0073//
0074$value= get_formfield($block,"name");
0075//
0076$itemQuant_stk = array();
0077$tags = "";
0078$tags.= "<select name=′".$value."′ id=′".$value."′ style=′".$style."′>";
0079$itemQuant_stk = explode(",",$itemQuant);
0080foreach($itemQuant_stk as $val){
0081$tags.="<option value=′".$val."′>".$val."個</option>";
0082}
0083$tags.="</select>";
0084$opt_line.=$tags;
0085}else{
0086//
0087// 数値入力フィールドの style を書き換え（変更) で数値入力フィールドを設定
0088//
0089$block =str_replace(′input′,′input style="width: 3rem;font-size: 16px;border: #ccc solid 1px;padding: 0 3px;"′,$block);
0090$block =str_replace(′value="1"′,′value=""′,$block);
0091$opt_line.=$block;
0092
0093}
0094$opt_line.=usces_the_itemSkuUnit(′return′);// 単位
0095$opt_line.=′</td>′;
0096$opt_line.=′</tr>′;
0097
0098//—————————
0099//
0100// かごへ入れるボタン
0101//
0102$opt_line.=′<tr>′;
0103$opt_line.=′<td style="text-align: right !important;" colspan="2">′;
0104$block = usces_the_itemSkuButton(′かごに入れる′,0,′return′);
0105$opt_line.= ′<!–pre–>′.$block.′<!–/pre–>′;
0106$opt_line.=′</td>′;
0107$opt_line.=′</tr>′;
0108//
0109// エラーメッセージが返ってきたか？
0110//
0111$block = usces_singleitem_error_message($post->ID, usces_the_itemSku(′return′), ′return′) ;
0112if($block!=′′){
0113$opt_line.= "<script type=′text/javascript′>alert(′".$block."′+′\\n′+′スクロールして商品購入欄で修正してください。′);</script>";
0114$opt_line.= ′<tr><td colspan="2"> <font color="#cc0000" size="5"><b>′.$block.′</b></font></td></tr>′;
0115}
0116//
0117// 1商品終わり
0118}
0119}
0120}
0121$opt_line.= ′</table>′;
0122$opt_line.= ′</form>′;
0123wp_reset_postdata();
0124}
0125
0126return($opt_line);
0127}
カテゴリー毎の商品リストを表示させるショートコード
前述のカテゴリー毎の商品リストを表示させるモジュールを使って投稿ページにリストを出す場合にショートコードになっていると便利なので書いてみた。ショートコードは [welcart-list cat={catid} {class={class_name}}]
0001/********************************************************/
0002//// ショートコード処理関数とショートコードを設定
0003add_shortcode(′welcart′, ′g_rep_yuzu_welcart′);
0004/********************************************************/
0005function g_rep_yuzu_welcart($attr)
0006{
0007extract(shortcode_atts(array(
0008′cat′ => 1,// リストを出したい カテゴリーIDを指定
0009′med′ => ′′,// デバッグ用 mb を設定すると強制的にモバイルタイプの書式を出す
0010′class′ => ′′,// 出力にクラス指定できるようにしておくと便利
0011), $attr));
0012$g_rep_yuzu_env = get_option(′g_rep_yuzu_env′);
0013if($g_rep_yuzu_env!=′′){
0014$med = ′mb′;
0015}
0016
0017if(wp_is_mobile() || $med==′mb′){
0018return( g_rep_yuzu_welcart_listMB($cat,$class) ); // モバイルタイプの書式を出す
0019}else{
0020return( g_rep_yuzu_welcart_listPC($cat,$class) ); // ブラウザタイプの書式を出す
0021}
0022return ′′;
0023}
WelCart の商品のカテゴリーを追加する
WelCart の商品のカテゴリーを追加するのは、WelCartの商品マスターからではできないのでワードプレスのダッシュボードメニューの「投稿」と同じ並びにある「カテゴリー」で「親カテゴリー」を「商品」にしてかたごりーを追加します。以上、あなたの一助になれば幸いです。