このカスタマイズを行う前にカートシステムの仕組みとは?を理解してから行ってください。
Welcartのカートボタンは下図に様に「色」と「文字」が固定になっています。
<PC画面>
<スマホ、iPAD画面>
これを任意の「色」と「文字」に変更できる様にカスタマイズします。
1.関数の作成方針
1.関数名と引数
関数名:my_basic_cart($color,$text)
引数 | デフォルト値 | 備考 |
$color | ‘#ff8c00’ | ボタンの色 デフォルト値はWelcart_basicが使っている色 |
$text | ‘カートの中’ | ボタンの中に表示する文字 |
2.プログラム
1.プログラム
func¥welcart¥headerの下に「my_basic_cart.php」というファイルを作成し、下記を追加します。
<?php /***************************************************************************** カートシステムの出力 引数: $color:PCのカートボタンのカラー(デフォルトは「オレンジ」) $text:PCのカートボタンの文字(デフォルトは「カートの中」) *******************************************************************************/ function my_basic_cart($color='#ff8c00',$text='カートの中') { ?> <a href="<?php echo USCES_CART_URL; ?>"> <i class="fa fa-shopping-cart"> <span><?php echo $text;?></span> </i> <span class="total-quant"> <?php usces_totalquantity_in_cart(); ?> </span> </a> <style> /*** 表示制御(スマホ) ****/ .incart-btn .total-quant{background-color:<?php echo $color;?>;} .incart-btn a{border-radius:5px;} /*** 表示制御(PC) ****/ @media screen and (min-width: 62.5em) { .incart-btn {min-width:140px;} .incart-btn a { background-color:<?php echo $color;?>;} .incart-btn .total-quant{ background-color:#fff; color:<?php echo $color;?>; } } </style> <?php } ?>
■上記は Welcart_basicのカートシステムの仕様のプログラムをベースにカスタマイズすると共に、CSS設定もこの中に含めました。
■上記で使っている関数は下記になります。
項目 | 関数 | 説明 |
カートページURL | USCES_CART_URL | カートページのURIを返す |
カート内の合計数量 | usces_totalquantity_in_cart() | カート内の合計数量を返す |
2.プログラムのロード
functions.phpに上記関数の読み込みを記述します。
/* カート関数の追加 */
get_template_part('func/welcart/header/my_cart');
3.header.phpの修正
最後に子テーマの「header.php」を変更します。
上記ファイルが無い場合は、親テーマからコピーして下さい。
<変更前>
<div class="incart-btn"> <a href="<?php echo USCES_CART_URL; ?>"><i class="fa fa-shopping-cart"><span><?php _e('In the cart', 'usces') ?></span></i><?php if(! defined( 'WCEX_WIDGET_CART' ) ): ?><span class="total-quant"><?php usces_totalquantity_in_cart(); ?></span><?php endif; ?></a> </div>
<変更後>
<div class="incart-btn"> <?php my_basic_cart();?> </div>
4.関数の使い方
1.デフォルトの表示
<?php my_basic_cart();?>
2.色をブルーにして、文字はカートにする
<?php my_basic_cart('blue','カート');?>
以上で完了です。