HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

WelCart で投稿ページに商品購入欄を作る

スポンサーリンク

WelCart の商品ページは、ご存知んごとくウルトラダサい。

これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。


WelCart で投稿ページに商品購入欄を作るときのモジュール構造


モジュールを書くとき構造のテンプレートがあると便利なので概念図を書いておく。

WelCart で投稿ページに商品購入欄を作るときの1商品の購入欄のモジュール構造


$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => -1,
‘no_found_rows’ => true, //ページャーを使う時はfalseに。
‘p’ => $postid,
);
$query1 = new WP_Query( $args );
while($query1->have_posts()) { // post(商品ページ) loop / といっても p= で設定しているので1つしかない

$query1->the_post();
global $post; // 商品ページの post id をとる
usces_the_item(); // 商品ページを指定する
$cnt = usces_sku_num(); // 商品ページの SKU の数を見る
if($cnt>0){ // 商品ページの SKU が1以上なら
while (usces_have_skus()){ // 商品ページのSKUループ

//
// 商品ページ SKU の共通オプションの表示部
//
if( usces_is_options()>0 ){ // オプションがあるか?

while(usces_have_options()){ // オプションのループ

// オプションの入力フィールドを取得
$block = usces_the_itemOption( usces_getItemOptName(),”,’return’ );
}
//
// 商品フィールド
//
//
// 数量入力フィールド取得
//
$block=usces_the_itemQuant(‘return’);

//
// かごへ入れるボタン
//
usces_the_itemSkuButton(‘購入’,0,’return’);
//
// エラーメッセージが返ってきたか?
//
$block = usces_singleitem_error_message($post->ID, usces_the_itemSku(‘return’), ‘return’) ;
if($block!=”){

// javascript でエラーアラートを出す
<script type=’text/javascript'<alert(‘”.$block.”‘+’\\n’+’スクロールして商品購入欄で修正してください。’);</script>

$block // エラー内容
}
]
]
}


これをベースに全商品のリストを出す


WelCart で投稿ページに全商品の購入欄を作る



書式は、毎回手作りになるタイプ(プラグイン化すればもっと楽になるけど)

前述の構造を以下のようにサブルーチン化してしまう。

function welcartinline($postid,$css,$itemQuant='',$style='') {
	// postid:ターゲットのポストID
	// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) 1ページに複数インラインを使う場合
	//  1つめの welcartinline の css は 0、それ以降は1を設定する。
	// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
	// style: 選択式の時のstyle を指定
	$postid_stk = explode(",",$postid);			// カンマ区切りで複数ID指定を想定
	$args = array(
		'post_type'			=> 'post', 
		'posts_per_page'	=> -1,
		'no_found_rows'		=> true,			//ページャーを使う時はfalseに。
		'p'					=> $postid_stk,		// 特定カテゴリの商品をループさせたい場合 'cat' => $postid_stk
	 );
	$query1 = new WP_Query( $args );
	if($query1->have_posts()) {		// post(商品ページ) loop / といっても p= で設定しているので1
		while($query1->have_posts()) {		// post(商品ページ) loop / といっても p= で設定しているので1
			$query1->the_post();
			global $post;								// 商品ページの post id をとる	
			usces_the_item();							// 商品ページを指定する
			$cnt = usces_sku_num();						// 商品ページの SKU の数を見る
			if($cnt>0){									// 商品ページの SKU が1以上なら
				while (usces_have_skus()){				// 商品ページのSKUループ
					//
					// 表示用テーブル ヘッド部
					//
					$opt_line = '';
					$opt_line.='<table style="font-size:12px;">';
					$opt_line.='<tr style="font-size:10px;">';
					$opt_line.='<th style="text-align: center !important;">品名</th>';
					$opt_line.='<th style="text-align: center !important;">ご注文エリア</th>';
					$opt_line.='<th style="text-align: center !important;">ご注文数量</th>';
					$opt_line.='<th style="text-align: center !important;">数量</th>';
					$opt_line.='<th style="text-align: center !important;"> </th>';
					$opt_line.='</tr>';
					//
					// 商品ページ SKU の共通オプションの表示部
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: center !important;">'.usces_the_itemSkuDisp('return').'</td>';
					if( usces_is_options()>0 ){			// オプションがあるか?
						$col = 0;
						while(usces_have_options()){	// オプションのループ
							if($col==0){				// オプション1つめ
								$opt_line.='<td style="text-align: center !important;">';
								$s = ' style="width:60px;"';
							}elseif($col==1){			// オプション2つめ
								$opt_line.='<td style="text-align: center !important;">';
								$s = ' style="width:60px;"';
							}else{						// オプション3つ目以降
								$opt_line.='<td style="text-align: center !important;">';
								$s = '';
							}
							// オプションの入力フィールドを取得
							$block = usces_the_itemOption( usces_getItemOptName(),'','return' );
							// オプションの class を変更(見た目カスタマイズ)
							$block = str_replace('class=\'iopt_select\'','class=\'iopt_select\''.$s,$block);
							$opt_line.=$block;
							$opt_line.='</td>';
							$col++;
						}
					}
					$opt_line.='<td style="text-align: center !important;">';
					//
					// 数量入力フィールド取得
					//
					$block=usces_the_itemQuant('return');
					//
					// 数量
					//
					if($itemQuant!=''){
						//
						// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
						//
						$value= get_formfield($block,"name");
						//
						$itemQuant_stk = array();
						$tags = "";
						$tags.= "<select name='".$value."' id='".$value."' style='".$style."'>";
						$itemQuant_stk = explode(",",$itemQuant);
						foreach($itemQuant_stk as $val){
							$tags.="<option value='".$val."'>".$val."個</option>";
						}
						$tags.="</select>";
						$opt_line.=$tags;
					}else{
						//
						// 数値入力フィールドの style を書き換え(変更) で数値入力フィールドを設定
						//
						$opt_line.=str_replace('input','input style="width:20px;font-size:12px;"',$block);
					}
					$opt_line.='</td>';
					//
					// かごへ入れるボタン
					//
					$opt_line.='<td style="text-align: center !important;">';
					$block = usces_the_itemSkuButton('購入',0,'return');
					$opt_line.= '<!--pre-->'.$block.'<!--/pre-->';
					$opt_line.='</td>';
					$opt_line.='</tr>';
					// 
					// エラーメッセージが返ってきたか?
					//
					$block = usces_singleitem_error_message($post->ID, usces_the_itemSku('return'), 'return') ;
					if($block!=''){
						$opt_line.= "<script type='text/javascript'>alert('".$block."'+'\\n'+'スクロールして商品購入欄で修正してください。');</script>";
						$opt_line.= '<tr><td colspan="5">   <font color="#cc0000" size="5"><b>'.$block.'</b></font></td></tr>';
					}
					//
					// 1商品終わり
					$opt_line.= '</table>';
				}
			}
		}
		wp_reset_postdata();
	}

	//
	// form にいれる
	//
	$USCES_CART_URL_str = USCES_CART_URL;
	
	$ret = <<<EOF
<form action="$USCES_CART_URL_str" method="post">
$opt_line
</form>
EOF;

	return($ret);
}


カテゴリー毎の商品リストを表示させる


リストを一括表示(商品ごとにかごに入れるボタンを押すタイプ)するモジュール

function g_rep_yuzu_welcart_listMB($catid,$class)
{
	// postid:ターゲットのポストID
	// css:css: スタイルを付けるかどうか(テーブルのデフォルトクラス tbl8) 1ページに複数インラインを使う場合
	//  1つめの welcartinline の css は 0、それ以降は1を設定する。
	// itemQuant: 選択数量を , で区切って指定 省略すると普通の input
	// style: 選択式の時のstyle を指定
	$USCES_CART_URL_str = USCES_CART_URL;
	
	if($class!=''){
		$class = ' class="'.$class.'"';
	}
	$opt_line='';
	
	$catid_stk = explode(",",$catid);
	$args = array(
	    'post_type' => 'post', 
	    'posts_per_page' => -1,
	    'no_found_rows' => true,  //ページャーを使う時はfalseに。
	    'cat' => $catid_stk,
	 );

	$query1 = new WP_Query( $args );
	if($query1->have_posts()){
		$opt_line.='<form action="'.$USCES_CART_URL_str.'" method="post">';
		$opt_line.='<table style="font-size:12px;"'.$class.'>';
		//
		// 表示用テーブル ヘッド部
		//
		while($query1->have_posts()) {				// post 商品 loop
			$query1->the_post();
			global $post;								// 商品ページの post id をとる
			usces_the_item();							// 商品ページを指定する
			//---------------------------
			// 商品ページ(商品名)
			//
			$opt_line.='<tr>';
			$opt_line.='<th style="text-align: center !important;" colspan="2">'.usces_the_itemName('return').'</th>';
			$opt_line.='</tr>';
			//
			$cnt = usces_sku_num();						// 商品ページの SKU の数を見る
			if($cnt>0){									// 商品ページの SKU が1以上なら
				while (usces_have_skus()){				// 商品ページのSKUループ
//echo $post->ID.' sku_cnt='.$cnt.'<br>';
					//
					// 1商品
					//
					//---------------------------
					$opt_line.='<tr>';
					// グラム・形状 (SKU表示名)
					$opt_line.='<td style="text-align: left !important;">'.usces_the_itemSkuDisp('return').'</td>';
					//
					// 在庫
					//
					$opt_line.='<td style="text-align: center !important;">'.usces_the_itemZaiko('return').'</td>';
					$opt_line.='</tr>';
					//---------------------------
					//
					// 単価
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: right !important;">'.usces_the_itemCprice('return').'円</td>';
					//
					// 数量入力フィールド取得
					//
					$opt_line.='<td style="text-align: center !important;">';
					$block=usces_the_itemQuant('return');
					//
					// 数量
					//
					if($itemQuant!=''){	// プルダウンでえらばせる時
						//
						// 数値を 選択型にする場合 (受け取り引数 $itemQuant = "1,2,3,5,10" とかの時
						//
						$value= get_formfield($block,"name");
						//
						$itemQuant_stk = array();
						$tags = "";
						$tags.= "<select name='".$value."' id='".$value."' style='".$style."'>";
						$itemQuant_stk = explode(",",$itemQuant);
						foreach($itemQuant_stk as $val){
							$tags.="<option value='".$val."'>".$val."個</option>";
						}
						$tags.="</select>";
						$opt_line.=$tags;
					}else{
						//
						// 数値入力フィールドの style を書き換え(変更) で数値入力フィールドを設定
						//
						$block    =str_replace('input','input style="width: 3rem;font-size: 16px;border: #ccc solid 1px;padding: 0 3px;"',$block);
						$block    =str_replace('value="1"','value=""',$block);
						$opt_line.=$block;

					}
					$opt_line.=usces_the_itemSkuUnit('return');	// 単位
					$opt_line.='</td>';
					$opt_line.='</tr>';

					//---------------------------
					//
					// かごへ入れるボタン
					//
					$opt_line.='<tr>';
					$opt_line.='<td style="text-align: right !important;" colspan="2">';
					$block = usces_the_itemSkuButton('かごに入れる',0,'return');
					$opt_line.= '<!--pre-->'.$block.'<!--/pre-->';
					$opt_line.='</td>';
					$opt_line.='</tr>';
					// 
					// エラーメッセージが返ってきたか?
					//
					$block = usces_singleitem_error_message($post->ID, usces_the_itemSku('return'), 'return') ;
					if($block!=''){
						$opt_line.= "<script type='text/javascript'>alert('".$block."'+'\\n'+'スクロールして商品購入欄で修正してください。');</script>";
						$opt_line.= '<tr><td colspan="2">   <font color="#cc0000" size="5"><b>'.$block.'</b></font></td></tr>';
					}
					//
					// 1商品終わり
				}
			}
		}
		$opt_line.= '</table>';
		$opt_line.= '</form>';
		wp_reset_postdata();
	}

	return($opt_line);
}

カテゴリー毎の商品リストを表示させるショートコード


前述のカテゴリー毎の商品リストを表示させるモジュールを使って投稿ページにリストを出す場合にショートコードになっていると便利なので書いてみた。

ショートコードは [welcart-list cat={catid} {class={class_name}}]
/********************************************************/
//// ショートコード処理関数とショートコードを設定
add_shortcode('welcart', 'g_rep_yuzu_welcart');
/********************************************************/
function g_rep_yuzu_welcart($attr)
{
	extract(shortcode_atts(array(
		'cat' => 1,	// リストを出したい カテゴリーIDを指定
		'med' => '',	// デバッグ用 mb を設定すると強制的にモバイルタイプの書式を出す
		'class' => '',	// 出力にクラス指定できるようにしておくと便利
	), $attr));
	$g_rep_yuzu_env = get_option('g_rep_yuzu_env');
	if($g_rep_yuzu_env!=''){
		$med = 'mb';
	}
	
	if(wp_is_mobile() || $med=='mb'){
		return( g_rep_yuzu_welcart_listMB($cat,$class) ); // モバイルタイプの書式を出す
	}else{
		return( g_rep_yuzu_welcart_listPC($cat,$class) ); // ブラウザタイプの書式を出す
	}
	return '';
}

WelCart の商品のカテゴリーを追加する


WelCart の商品のカテゴリーを追加するのは、WelCartの商品マスターからではできないのでワードプレスのダッシュボードメニューの「投稿」と同じ並びにある「カテゴリー」で「親カテゴリー」を「商品」にしてかたごりーを追加します。


以上、あなたの一助になれば幸いです。

スポンサーリンク

スポンサーリンク

よく使うタグ

・float クリア
<br clear="all"><div style="clear:both;" class="clearfix"></div>
・角丸め
round-radius
border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;
・div box
overflow:scroll;min-width:300px;max-width:300px;min-height:300px;max-height:300px;
・TEXTAREAリサイズ
resize: vertical;
・サイトURL
home_url() // http://…
if(site_url()==home_url){
$shorturl_yuzu_path = substr(ABSPATH,0,strpos( ABSPATH, substr(site_url(),strlen(home_url()) ) ) ).’/’;
}else{
$shorturl_yuzu_path = ABSPATH.’/’;
}
// /var/…
・WP HOME URL
site_url() // http://…/wp
ABSPATH // /var/…/wp
・プラグイン(自分のDIR追加必要)
plugins_url() // http://…/plugins
WP_PLUGIN_URL // http://…/plugins
WP_PLUGIN_DIR // /var/…/plugins
・使用中のテーマ
get_template_directory_uri() // http://…/theme/xx
get_template_directory() // /var/…/theme/xx
・wp-content
content_url() // http://…/wp-content
WP_CONTENT_DIR // /var/…/wp-content
・画像URLからDIR変換
$pctdir=str_replace(content_url(), WP_CONTENT_DIR,$pcturl);
・パス名分解
$pathData = pathinfo($file);
echo $pathData["dirname"]; // /var/~
echo $pathData["filename"]; // xxx
echo $pathData["extension"]; // txt
echo $pathData["basename"]; // xxx.txt
・画像サイズ
list($width,$height) = getimagesize($url);
if(has_post_thumbnail()){
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘full’ );
$src = $image[0]; //url
$width = $image[1]; //横幅
$height = $image[2]; //高さ
・画像サイズ比率
list($src_w,$src_h) = getimagesize($file);
$dst_w = 600;$dst_h = 0;
$dst_h = ($dst_w!=0)?(intval(($src_h*$dst_w)/$src_w )):(($dst_h!=0)?(intval(($src_w*$dst_h)/$src_h)):0);
・疑似要素順
link visited hover active


特殊文字
シングルクォート : &#39;
ダブルクォート : &quot;
WP設定内表示前処理(htmlタグ許可項目)
$str = str_replace(‘<','&lt;' ,$str);
$str = str_replace(‘>’,’&gt;’ ,$str);
$str = str_replace(‘\”‘,’&quot;’,$str);
$str = str_replace(“\'”,’&#39;’ ,$str);
WO設定項目表示前処理(htmlタグ許可項目)
$str = str_replace(‘\”‘,'”‘,$str);
$str = str_replace(“\'”,”‘”,$str);
・テーマ
get_theme_root_uri()
get_theme_root()
・WP 情報
get_bloginfo( $show )
・Wp config FTP 情報 設置
define( ‘FTP_HOST’, ‘host’ );
define( ‘FTP_USER’, ‘id’ );
define( ‘FTP_PASS’, ‘pw’ );
define( ‘FTP_SSL’, false );
弾に使う
placeholder:ユーザー入力補助

カテゴリー

MW WP FORM のフックが効かない。

MW WP FORM のフックが効かない。 MW WP FORM のフックが効かない。MW WP FORM は、各種フックがあってカスタマイズが便利~とか言われているプラグインですが。。。マニュアルにはあるのにフックが効かないフックがかなりある

MW WP FORM のショートコードで出力される内容をカスタマイズする。

MW WP FORM のショートコードで出力される内容をカスタマイズする。 MW WP FORM のショートコードで出力される内容をカスタマイズしたくなりました。非表示フィールド type=”hidden” にデータをためておいて、それをメール送信する

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所

WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所 WelCart 買い物かごのカスタマイズするとき、毎回テンプレートファイルを探すのでメモしておきます。WelCart 買い物かごのカスタマイズ、テンプレートファイルの場所WelCart 買い物かごのカ

WelCart で投稿ページに商品購入欄を作る

WelCart で投稿ページに商品購入欄を作る WelCart の商品ページは、ご存知んごとくウルトラダサい。これをカスタマイズしないとなんとも素人っぽさの抜けないサイトになってしまう。WelCart で投稿ページに商品購入欄を作るときのモジュール

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスとサーチコンソールの連動のさせかた(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクスとサーチコンソール。別にグーグルのアナリティクス、サーチコンソールでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ)

FB 広告 最適化~グーグルアナリティクスの使い方(必要な分だけ) FB 広告 最適化にあたって必要になってくるツールがグーグルアナリティクス。別にグーグルのアナリティクスでなくてもアクセス解析はできるんだけど、グーグルはユーザー囲い込みの為他のアクセス解析では見せな