Welcart_basicのcategory.phpのカスタマイズ

カテゴリ表示は「商品」と「ブログ」等を表示するプログラムになっていますが、ウィジェットは「ブログ」でも「サイドバー１(商品用)」が表示されるスペックになっています。

これを「ブログ」の時は「サイドバー２(ブログ用)」を使う様にカスタマイズします。

またこれに合わせて「welcart_basic」がどの様な作りになっているのか？を解説します。

1.親テーマからcategory.phpをコピーする

親テーマの「category.php」を子テーマフォルダにコピーします。

■上記が子テーマに「category.php」をコピーした後の図です。

2.category.phpの構造と表示プログラム

category.phpは下記の様な構造になっています。

<?php get_header(); ?>　*** ヘッダの表示 ***
	<section id="primary" class="site-content">
		<div id="content" role="main">
			①カテゴリの表示
		   <?php if( usces_is_cat_of_item( get_query_var( 'cat') ) ): ?>　*** 商品か？の判断 ***
			    <?php if (have_posts()) : ?> 
				    ②商品の表示
			   <?php endif; ?>
		  <?php else : ?>
			   <?php if (have_posts()) : ?>
　			　     ③ブログの表示
			<?php endif; ?>
		<?php endif; ?>
			④ページネーションの表示
		</div>    ***  #content の終了 *****
	</section>  ***  #primary の終了 *****
<?php get_sidebar(); ?>　*** サイドバーの表示（ここに判断関数がない） ***
<?php get_footer(); ?>　  *** フッタの表示 ******

下記は「商品」と「ブログ」を表示させたサンプルです。

何個表示させるか？は、「設定→表示設定」で決まります。下記は「3投稿」にした場合です。

1.商品を表示した場合

2.ブログを表示した場合

3.商品部分のプログラム

商品部分のプログラム部分は下記になります。

<?php if (have_posts()) : ?> 
	<div class="cat-il type-grid">
		<?php while (have_posts()) : the_post(); ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="itemimg">
					<a href="<?php the_permalink() ?>"><?php usces_the_itemImage(0, 300, 300); ?></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><!-- .cat-il -->
<?php endif; ?>

上記で利用しているWelcart関数は下記です

項目	関数	説明
商品名	usces_the_itemName()	商品名を表示します
売価	usces_the_firstPriceCr	先頭のSKUの通貨記号付きの売価を取得・表示します
税金種別	usces_guid_tax()	「税込」か「税別」かを表示します
在庫チェック	usces_have_zaiko_anyone()	総てのSKUの在庫をチェックして無ければtrueを返す
商品画像	usces_the_itemImage(n,w,h)	n：画像のID。0がメイン画像、w:width、h :height
キャンペーン	welcart_basic_campaign_message()	キャンペーンメッセージを表示します。

4.ブログ部分のプログラム

<?php if (have_posts()) : ?>
    <div class="post-li">
        <?php while (have_posts()) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <p><time datetime="<?php the_time('c'); ?>"><?php the_time(__('Y/m/d')) ?></time></p>
                <div class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', 'welcart_basic' ), the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a></div>
                <?php the_excerpt() ?>
            </article>
        <?php endwhile; ?>
    </div>
<?php endif; ?>

■通常の記事抜粋一覧を表示させるプログラムです。

5.ページネーション表示部分のプログラム

<div class="pagination_wrapper">
	<?php
		$args = array (
					'type' => 'list',
					'prev_text' => __( ' &laquo; ', 'welcart_basic' ),
					'next_text' => __( ' &raquo; ', 'welcart_basic' ),
		);
	echo paginate_links( $args );
	?>
</div><!-- .pagenation-wrapper -->

■「paginate_links」はWordPressがデフォルトで持っているページネーション関数です。

3.このプログラムの問題部分の修正

カスタマイズする場所は「<?php get_sidebar(); ?>」の所を下記に変更するだけです。

＜変更前＞

<?php get_sidebar(); ?>

＜変更後＞

<?php 
	if(is_my_item()){get_sidebar();}
	else{get_sidebar('other');}
?>

■「is_my_item()」は下記ドキュメントでインストールして下さい。

Welcartの制限解除と必要な関数の作成