HOME  /Welcart
 /Welcart_basicのcategory.phpのカスタマイズ
2020年08月01日

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

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

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

またこれに合わせて「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の制限解除と必要な関数の作成

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここではWelcart商品を価格順に並び替える方法を解説しています

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

ここではWelcartで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品」としてリストする関数を作成する方法を解説しています。

ここではWelcart_basicのメニュのCSS制御の解説をしています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する方法を解説しています。

ここではWelCart_Basicのカートの仕様がどうなっているか?を解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

welcart_basicは製品だけしか検索対象としていませんが、ここではページの情報を読み込んで、何を検索させるのかを自動で判断させる方法を解説しています。

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。スライド方法は下記の2つを解説しています。①.slickオプションだけでスライドさせる。②slickイベントやメソッドを使ってスライドさせる。

ここではカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。スライドサンプルとしては画像サイズと画像サイズ+αで表示させるサンプルを解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と「無償テンプレート」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。