タグ: php

「商品」カテゴリー専用レイアウト

「商品」カテゴリーや、その子カテゴリー（「新商品」等）だけ独自のレイアウトを使いたい、そんな時にはwordpress条件分岐を指定します。

<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?>
<!–　ここに商品カテゴリー・その子カテゴリーに表示させる内容　–>
<?php else : //商品カテゴリーで無い時 ?>
<!–　商品カテゴリー・その子カテゴリーに表示させない内容　–>
<?php endif; //商品カテゴリーでない場合：終了 ?>

上記の「is_category()」「cat_is_ancestor_of()」というのが条件分岐タグです。
「if():」の括弧内に条件分岐タグを入れると、「もし【item】というスラッグ名のカテゴリーページだったら」という意味になります。

これを、既存のテーマに適用します。

1. 使用テーマの「category.php」又は「index.php」を開き、以下の部分を探します。

<?php while ( have_posts() ) : the_post(); ?>
～～　中略　～～
<?php endwhile; ?>

while ( have_posts() ) : ～～ endwhile;　の部分はループと言って、記事を繰り返す部分になります。
この間に記事のタイトルや内容、投稿日等の情報が入っています。

2. (1)のループの間を囲うようにソースを追加します。

<?php while ( have_posts() ) : the_post(); ?>
<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?><!– ←この行を追加 –>
<?php else : //商品カテゴリーで無い時 ?><!– ←この行を追加 –>
～～　中略　～～
<?php endif; //商品カテゴリーでない場合：終了 ?><!– ←この行を追加 –>
<?php endwhile; ?>

これで、商品カテゴリーの時に「元々の記事レイアウト」が表示されないようになります。

3. 「//以下、商品カテゴリーの時」の直後の行に、商品記事専用レイアウトのテンプレートを作っていきます。
以下を、<?php if (is_category(‘item’) || cat_is_ancestor_of(get_category_by_slug(‘item’)->term_id, $cat)) : //以下、商品カテゴリーの時 ?>と<?php else : //商品カテゴリーで無い時 ?>の間に入れてください。

<?php if ( usces_is_item() ) : //以下、商品がある場合 ?>
<?php usces_remove_filter(); ?>
<?php usces_the_item(); ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘usces_item_article’); ?>>
<div class=”usces_item_content”>
<div class=”usces_item_photo”><a href=”<?php the_permalink(); ?>”><?php usces_the_itemImage(0, 150, 150); ?></a></div>
<h3 class=”usces_item_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<?php while (usces_have_skus()): ?>
<div class=”usces_item_price”><?php usces_the_itemPrice() ; ?>円<?php usces_guid_tax(); ?></div>
<div class=”usces_item_cart”>

<?php if(usces_sku_num()==1)://SKUが１つの場合 ?>
<?php if( usces_have_zaiko() ) :  //在庫がある場合 ?>
<form action=”<?php echo USCES_CART_URL; ?>” method=”post”>
<?php if (usces_is_options()) ://オプションを表示 ?>
<?php while (usces_have_options()) : ?>
<?php usces_the_itemOptName(); ?>：<?php usces_the_itemOption(usces_getItemOptName(),’ ‘); ?><br>
<?php endwhile; ?>
<?php endif;//オプションここまで ?>
<div class=”usces_item_skubtn_wrap”><?php usces_the_itemQuant(); ?><span class=”usces_item_quant”><?php usces_the_itemSkuUnit(); ?></span><?php usces_the_itemSkuButton(__(‘Add to Shopping Cart’, ‘usces’), 0); ?></div>
<?php echo apply_filters(‘single_item_multi_sku_after_field’, NULL); ?>
<?php do_action(‘usces_action_single_item_inform’); ?>
</form>
<div class=”usces_item_zaiko”><?php usces_the_itemZaiko(); ?></div>
<?php else : //在庫が無い場合 ?>
<div class=”usces_item_zaiko”><strong><?php usces_the_itemZaiko(); ?></strong></div>
<?php endif; //在庫有無の条件分岐：終了 ?>
<?php else://SKUが２つ以上ある場合 ?>
<a href=”<?php the_permalink(); ?>#itempage” class=”usces_item_cart_btn”>購入はこちら</a>
<?php endif; ?>
</div><!– end.usces_item_cart –>
<?php break; endwhile;?>
</div>
<p class=”usces_item_code”><?php usces_the_itemCode(); ?></p>
</div>

<?php do_action(‘usces_action_single_item_outform’); ?>

<?php else: //以下、商品が無い場合 ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘usces_item_article’); ?>>
<h3 class=”usces_item_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
<div class=”usces_item_photo”><?php usces_the_itemImage(0, 150, 150); ?></div>
<div><?php echo $post->post_excerpt; ?></div>
<a href=”<?php the_permalink(); ?>” class=”usces_item_cart_btn”>詳細はこちら</a>
</div>

<?php endif; //商品がある場合：終了 ?>

4. 最後に、スタイルシート（style.css）に以下を追加すると、商品の横並びレイアウトが出来ます。

.usces_item_article{
display: inline-block;
vertical-align: top;
*display: inline;
*zoom: 1;
width: 150px;
padding: 10px;
margin: 10px;
box-sizing: initial;
}
.usces_item_title{
font-size: 16px;
margin: 0;
padding: 0 0 0.5rem;
line-height: 1.5;
}
.usces_item_price{
color: red;
font-weight: bold;
}
.usces_item_cart{
border: #888 dotted 1px;
padding: 9px;
margin: 5px 0;
font-size: 90%;
}
.usces_item_zaiko{
font-size: 85%;
text-align: right;
}
.usces_item_skubtn_wrap input{
width: 17%;
text-align: center;
font-size: 14px;
}
.usces_item_skubtn_wrap input.skubutton{
display: inline;
display: inline-block;
width: 72%;
margin: 5px 0;
font-size: 13px;
}
.usces_item_quant{
font-size: 11px;
display: inline-block;
width: 8%;
line-height: 1.2;
}
.usces_item_code{
font-size: 11px;
opacity: 0.6;
}
.usces_item_cart_btn{
display: block;
text-align: center;
font-weight: bold;
}
.usces_item_cart .iopt_radio_label{
padding-left:0.5em;
}

通常のアーカイブページに、価格等の情報を加える

商品一覧は、「商品」のカテゴリー専用アーカイブページを開くと表示されます。
（例：httpss://sample.com/category/item/ 等）
しかし、Welcart向けでない既存のテーマを使っている場合、ここに価格などの情報は表示されません。

なので、価格を表示させるためのカスタマイズを行います。

【今回利用するファイル】
wp-contnt/themes/＜現在使用中のテーマ名＞/category.php
または
wp-contnt/themes/＜現在使用中のテーマ名＞/index.php

1. 使用テーマの「category.php」又は「index.php」をダウンロードするか、【左サイドバー＞外観＞テーマの編集】の右エリアから選択します。

2. (1)のファイルを開き、「the_content();」と記述されている場所を探します。
※ テーマによって「the_content(‘more’);」等、括弧内に記述がある場合もあるので、検索するときは「the_content」と記号抜きで探して下さい。
※「the_content();」の記述が無いときは、「get_template_part」という記述を探して下さい。（詳細はこちら）

3. 以下の内容と(2)の部分を差し替えます。

<?php if ( usces_is_item() ) : //以下、商品がある場合 ?>

商品名　　：<?php usces_the_itemName(); ?><br>
商品コード：<?php usces_the_itemCode(); ?><br>
<br>

<?php while (usces_have_skus()): //SKUの数だけその情報を呼び出します ?>

SKU名 ：<?php usces_the_itemSkuDisp(); ?><br>
SKUコード：<?php usces_the_itemSku(); ?><br>
価格　：<?php usces_the_itemCprice(); ?>円<?php usces_guid_tax(); ?><br>
売値　：<?php usces_the_itemPrice() ; ?>円<?php usces_guid_tax(); ?><br>

<?php
break; //SKUを１回呼び出したら終了します。
endwhile; //SKU情報呼び出しを終了します。
?>

<br>
抜粋　　　：<?php echo $post->post_excerpt; ?><br>
画像　　　：<?php usces_the_itemImage(0, 150, 150); //’0’の数値を増やすことで、サブ画像を表示できます ?><br>
画像URL　 ：<?php usces_the_itemImageURL(0); //’0’の数値を増やすことで、サブ画像のURLを取得します ?><br>
本文　　　：<?php echo do_shortcode($post->post_content); ?><br>
<br>
<a href=”<?php the_permalink(); ?>#itempage”>購入はこちら</a>

<?php else : //以下、商品が無い場合 ?>

<?php the_content(); //(2)で探し出した「the_content();」の記述をそのままコピーするのが好ましいです ?>

<?php endif; //商品が無い場合：終了 ?>

価格以外にも、一通りの独自タグを掲載しました。
取捨選択してご利用下さい。

※SKU名・SKUコード・価格・売値は、 ～ の間でのみ取得することが出来ます。
正しくは、以下のコードの【この部分にSKU用　情報取得タグ】部分にのみ入れて下さい。

<?php while (usces_have_skus()): //SKUの数だけその情報を呼び出します ?>
【この部分にSKU用　情報取得タグ】
<?php
break; //SKUを１回呼び出したら終了します。
endwhile; //SKU情報呼び出しを終了します。
?>

通常のアーカイブページに、カートボタンも付ける

今度は、商品一覧ページに表示された個々の商品に、カートボタンを設置してみます。

前回の(3)においてコピペするコードに、以下のものを追加します。

<!– 購入ボタン・ここから –>
<?php if( usces_have_zaiko() ) ://在庫がある場合　?>
<?php if(usces_sku_num()==1)://SKUが１つの場合 ?>
<form action=”<?php echo USCES_CART_URL; ?>” method=”post”>
<?php if (usces_is_options()) ://オプションを表示 ?>
オプション名：セレクト値<br>
<?php while (usces_have_options()) : ?>
<?php usces_the_itemOptName(); ?>：<?php usces_the_itemOption(usces_getItemOptName(),’ ‘); ?><br>
<?php endwhile; ?>
<?php endif;//オプションここまで ?>
購入ボタン：<?php _e(‘Quantity’, ‘usces’); ?><?php usces_the_itemQuant(); ?><?php usces_the_itemSkuUnit(); ?><?php usces_the_itemSkuButton(__(‘Add to Shopping Cart’, ‘usces’), 0); ?>
<?php echo apply_filters(‘single_item_multi_sku_after_field’, NULL); ?>
<?php do_action(‘usces_action_single_item_inform’); ?>
<?php usces_the_itemGpExp(); ?>
</form>
<?php else://SKUが２つ以上ある場合 ?>
<a href=”<?php the_permalink(); ?>#itempage”>購入はこちら</a><br>
<?php endif; //在庫があるかの分岐：終了 ?>
<?php endif; //SKUが１つか２つかの分岐：終了 ?>
<!– 購入ボタン・ここまで –>

上記のコードを、前回SKU名・SKUコード等のSKU情報を入れた場所に入れて下さい。

※商品ボタンは、商品登録の際にSKUを１つのみ登録している場合のみ表示しています。
これは、商品一件に対し【カートボタン】をひとつのみ表示するという体裁をとるためです。

※全てのSKUのカートボタンを表示させたい時は、【break; //SKUを１回呼び出したら終了します。】という行を削除してください。

※ここでは「商品詳細ページのカスタマイズ（基本編）」において「wc_item_single.php」を作成したことを前提にお話します。

商品説明文の幅を広くしたい

Welcartの専用テーマ「welcart_default」では、商品説明部分が写真の右側にあり、幅が狭くなっています。
また、カートボタンが説明より下に来るため、説明部分が長くなると下までスクロールするまで購入できなくなり、ユーザビリティにもよろしくありません。

有名ショッピングサイトのように、商品写真や説明のための画像などを大きく載せる等、この部分を幅広く使いたい時に、この記事をお役立て下さい。

1. 「wc_item_single.php」を開きます。

2. 「<?php the_content(); ?>」を探します。２つあるのですが、これのどちらも削除します。

3. 「<?php usces_assistance_item( $post->ID, __(‘An article concerned’, ‘usces’) ); ?>」を探します。

4. （3）は関連商品一覧を表示するための記述です。
これよりも上に商品説明が欲しいので、この行の上に「<?php the_content(); ?>」を記述します。

5. 保存した「wc_item_single.php」を更新、またはアップロードして下さい。

２枚目以降の写真を、１枚目の写真の下に表示する

Welcartの専用テーマ「welcart_default」では、２枚め以降の写真をページの下部分に表示させています。

ただ、商品説明が長くなると１枚目の写真と間隔が空いてしまいます。

写真は写真、でまとめて見せるために、２枚め以降の写真を１枚目の写真の下に表示させるようカスタマイズします。

1. 「wc_item_single.php」を開きます。

2. 以下の部分を切り取ります。

<div class=”itemsubimg”>
＜　中略　＞
</div><!– end of itemsubimg –>

3. （2）を、以下の部分の</div>の直前に貼り付けます。

<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
</div>

4. （3）の部分は、以下のようになります。

<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
<div class=”itemsubimg”>
＜　中略　＞
</div><!– end of itemsubimg –>
</div>

※この記事で解説する方法では、FTPソフト等でファイルをアップロードする環境が必要です。

Welcartの商品詳細ページは、プラグインが自動的に書き出します。
記事の個別ページにおいて、通常の記事の内容が書き出される代わりに、商品情報が書き出される仕様になっている訳です。

そのため、プラグインの編集を行う必要があると思いがちですが、そうではありません。

この商品詳細ページのためのテーマファイルが存在します。

Welcartの専用テーマ「welcart_default」を利用する

「Welcart」を有効化すると、「welcart_default」というテーマも同時にインストールされています。
このテーマのファイルを一部利用してカスタマイズを行います。

【利用するのは以下のファイルです】
wp-contnt/themes/welcart_default/wc_templates/wc_item_single.php

※上記が無い場合は以下を探して下さい。
wp-contnt/plugins/usc-e-shop/theme/welcart_default/wc_templates/wc_item_single.php

1. FTPソフトを使い、この「wc_item_single.php」をローカルへダウンロード。

2. 「wc_templates」というフォルダを作り、(1)のファイルを入れます。

3. 再びFTPソフトを使い、「wc_templates」フォルダごと、以下のディレクトリにアップロードします。

wp-contnt/themes/＜現在仕様中のテーマ名＞

使用テーマに沿ったカスタマイズを行う。

このままでは、「wc_item_single.php」は「welcart_default」というテーマに合わせてある状態なので、これを「使用テーマ」に沿った物に変更します。

商品情報は記事の個別ページに書き出されますので、この個別ページのテンプレートファイルを利用します。

1. まずは、現在使用しているテーマの個別ページ用テンプレートファイルをダウンロード

wp-contnt/themes/＜現在使用しているテーマ名＞/single.php

2. Welcart専用のテーマファイル「wc_item_single.php」をテキストエディタで開き、以下の部分をコピーします。

<div class=”storycontent”> <?php usces_remove_filter(); ?> ～　中略　～ </div><!– end of itemspage –> </div><!– end of storycontent –>

3. 今度は（1）でダウンロードした「single.php」を開き、「the_content();」と記述されている場所を探します。
※ テーマによって「the_content(‘more’);」等、括弧内に記述がある場合もあるので、検索するときは「the_content」と記号抜きで探して下さい。

4. （3）に記述されている「the_content();」を削除し、（2）でコピーした内容を貼り付けます。

5. （4）で貼り付けた内容の直前に「 ?>」直後に「<?php 」を記述します。
※念のため、半角スペースも込でコピーペーストして下さい。

※テーマによっては「single.php」の中に「the_content();」が無いものも存在します。

その場合は「get_template_part」という記述を探して下さい。
この記述は、他のテーマファイルの内容を読み込むために使われており、ここで指定してあるテーマファイルに「the_content();」が記述してある可能性が高いです。

例えば、以下のような記述がある場合

get_template_part( ‘template-parts/content’, ‘single’ );

「template-parts」フォルダの中の「content.php」を読み込んでいます。

この「content.php」の内容を全てコピーし、「get_template_part( ～中略～ );」と差し替えて下さい。
上の（5）の様に、差し替えた部分の前に「 ?>」後に「<?php 」を入れるのを忘れずに。