Welcart Carina 1.1 をリリースしました。
[更新内容]
WCEX Favorites 対応
Welcart Carina を独自にカスタマイズしている方で「WCEX Favorites」を導入される場合には、下記の修正が必要となります。
「お気に入りリスト」ページへのリンク設置
ヘッダーのメンバーメニューに「お気に入りリスト」ページへのリンクを設置します。
フック追加: welcart_basic-carina/header.php 79行目あたり
<?php if( usces_is_login() ): ?> <li><?php printf(__('Hello %s', 'usces'), usces_the_member_name('return')); ?></li> <li><?php usces_loginout(); ?></li> <li><a href="<?php echo USCES_MEMBER_URL; ?>"><?php _e('My page', 'welcart_basic') ?></a></li> <?php do_action( 'usces_theme_login_menu' ); ?> <?php else: ?> <li><?php _e('guest', 'usces'); ?></li> <li><?php usces_loginout(); ?></li> <li><a href="<?php echo USCES_NEWMEMBER_URL; ?>"><?php _e('New Membership Registration','usces') ?></a></li> <?php endif; ?>
※ do_action( ‘usces_theme_login_menu’ ) を追加
商品一覧にお気に入りアイコン設置
商品カテゴリーページや検索結果ページなどの商品一覧の各商品にお気に入りアイコンを設置します。
フック追加
: welcart_basic-carina/front-page.php 88行目あたり
: welcart_basic-carina/category.php 46行目あたり
: welcart_basic-carina/search.php 26行目あたり
: welcart_basic-carina/wc_search_page.php 58行目あたり
<a href="<?php the_permalink(); ?>"> <div class="itemimg"> <?php usces_the_itemImage( 0, 300, 300 ); ?> <?php do_action( 'usces_theme_favorite_icon' ); ?> <?php if( wcct_get_options( 'display_soldout' ) && !usces_have_zaiko_anyone() ): ?> <div class="itemsoldout"> <div class="inner">
※ do_action( ‘usces_theme_favorite_icon’ ) を追加
商品詳細ページにお気に入りアイコン設置
商品詳細ページにお気に入りアイコンを設置します。
お気に入りアイコンの設置に伴いHTMLの構造の変更もおこなっております。
フック追加
: welcart_basic-carina/wc_templates/wc_item_single.php 41行目あたり
: welcart_basic-carina/wc_templates/wc_item_single_service.php 30行目あたり
: welcart_basic-carina/wc_templates/wc_item_single_data.php 31行目あたり
: welcart_basic-carina/wc_templates/wc_sku_select.php 31行目あたり
: welcart_basic-carina/wc_templates/wc_sku_select_service.php 30行目あたり
<div id="img-box"> <?php $imageid = usces_get_itemSubImageNums(); ?> <div class="slider slider-for itemimg"> <div><a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( 0, 335, 335, $post ); ?></a></div> <?php foreach( $imageid as $id ) : ?> <div><a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( $id, 335, 335, $post ); ?></a></div> <?php endforeach; ?> <?php if( !empty( $imageid ) ): ?> <div class="slider slider-nav itemsubimg">【変更後】
<div id="img-box"> <?php $imageid = usces_get_itemSubImageNums(); ?> <div class="itemimg"> <div class="slider slider-for"> <div><a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( 0, 335, 335, $post ); ?></a></div> <?php foreach( $imageid as $id ) : ?> <div><a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( $id, 335, 335, $post ); ?></a></div> <?php endforeach; ?> </div> <?php do_action( 'usces_theme_favorite_icon' ); ?> </div> <?php if( !empty( $imageid ) ): ?> <div class="slider slider-nav itemsubimg">
※ do_action( ‘usces_theme_favorite_icon’ ) を追加
※ HTML構造の変更は、下記を参考にしてください。
HTML構造の変更
変更前 | 変更後 |
---|---|
<div class="slider slider-for itemimg"> ・・・ </div> |
<div class="itemimg"> <div class="slider slider-for"> ・・・ </div> </div> |
お気に入りリストページのテンプレート設置
Welcart Carina 用のお気に入りリストページのテンプレートを設置します。
<設置手順>
- マイページの購入履歴より最新版のZipファイル(welcart_basic-carina.1.1.zip)をダウンロードして解凍します。
- 解凍したファイル内の「wc_templates」の「member」フォルダ内に「wc_favorite_page.php」というテンプレートがございますので、お使いのテーマ内に同じ階層になるよう設置してください。
welcart_basic-carina/wc_templates/member/wc_favorite_page.php
WCEX Favorties 専用の CSS追加
お気に入りリストページのテンプレートと同様に お気に入り専用のCSSを設置します。
<設置手順>
- マイページの購入履歴より最新版のZipファイル(welcart_basic-carina.1.1.zip)をダウンロードして解凍します。
- 解凍したファイル内の「asses」の「css」フォルダ内に「favorite.css」というCSSファイルがございますので、お使いのテーマ内に同じ階層になるよう設置してください。
※「asses」「css」の各フォルダがお使いのテーマに存在しない場合は、フォルダも作成してCSSファイルを設置してください。welcart_basic-carina/assets/css/favorite.css
Welcart 商品一覧ウィジェットを「WCEX Favorites」に対応
Welcart 商品一覧ウィジェットを「WCEX Favorites」に対応しました。
フック追加: welcart_basic-carina/inc/front-customized.php 461行目あたり
add_filter( 'welcart_basic_filter_item_post', 'wcct_filter_item_post', 10 ); function wcct_filter_item_post( $list ){ $list = ''; $list .= '<article id="post-' . get_the_ID() . '">' . "\n"; $list .= '<a href="' . get_permalink( get_the_ID() ) .'">' . "\n"; $list .= '<div class="itemimg">' . "\n"; $list .= usces_the_itemImage( 0, 300, 300, '', 'return' ) . "\n"; $list .= apply_filters( 'usces_filter_theme_favorite_icon', '', 0 ); if( wcct_get_options( 'display_soldout' ) && !usces_have_zaiko_anyone() ) { $list .= '<div class="itemsoldout">' . "\n";
※ apply_filters( ‘usces_filter_theme_favorite_icon’, ”, 0 ) を追加
お気に入りボタンの色調整
変数追加: welcart_basic-square/inc/theme-customizer.php 1003行目あたり
$contact_btn_color = get_theme_mod( 'contact_btn_color', '#333' ); $contact_btn_color_hov = 'rgba( ' . implode(", ", wcct_rgb( $contact_btn_color ) ) . ', .6 )'; $contact_btn_text_color = get_theme_mod( 'contact_btn_text_color', '#fff' ); $btn_bg_color = 'rgba( ' . implode(", ", wcct_rgb( $cart_btn_color ) ) . ', .1 )';
※ 「$btn_bg_color」 を追加
スタイル追加: welcart_basic-square/inc/theme-customizer.php 1308行目あたり
#wdgctToCart a, #mobile-menu .membership a, .menu-on #mobile-menu .membership a, #mobile-menu .membership .logout a.usces_logout_a, .menu-on .widget_welcart_login a, #tofavorite-content #tofavorite-close { background-color: <?php echo $sub_btn_color; ?>; color: <?php echo $sub_btn_text_color; ?>; }
※ 「#tofavorite-content #tofavorite-close」 を追加
スタイル追加: welcart_basic-square/inc/theme-customizer.php 1343行目あたり
#wdgctToCart a:hover, #mobile-menu .membership a:hover, .menu-on #mobile-menu .membership a:hover, .menu-on .widget_welcart_login a:hover, #tofavorite-content #tofavorite-close:hover { background-color: <?php echo $sub_btn_color_hov; ?>; color: <?php echo $sub_btn_text_color; ?>; }
※ 「#tofavorite-content #tofavorite-close:hover」 を追加
スタイル追加: welcart_basic-square/inc/theme-customizer.php 1365行目あたり
.contact-item a { background-color: <?php echo $contact_btn_color; ?>; color: <?php echo $contact_btn_text_color; ?>; } .contact-item a:hover { background-color: <?php echo $contact_btn_color_hov; ?>; color: <?php echo $contact_btn_text_color; ?>; } .favorite-button .add-favorite { border-color: <?php echo $cart_btn_color; ?>; color: <?php echo $cart_btn_color; ?>; } .favorite-button .add-favorite:hover { background-color: <?php echo $cart_btn_color; ?>; color: <?php echo $cart_btn_text_color; ?>; } .favorite-button .add-favorite { background-color: <?php echo $btn_bg_color; ?>; } #tofavorite-content .tofavorite-page-link a, #tofavorite-content .tologin-page-link a, #tofavorite-content .tologin-newmember-page-link a { background-color: <?php echo $cart_btn_color; ?>; color: <?php echo $cart_btn_text_color; ?>; } #tofavorite-content .tofavorite-page-link a:hover, #tofavorite-content .tologin-page-link a:hover, #tofavorite-content .tologin-newmember-page-link a:hover { background-color: <?php echo $cart_btn_color_hov; ?>; color: <?php echo $cart_btn_text_color; ?>; }
※ ハイライト部分を追加
お気に入りウィジェットのボーダー等の色調整
セレクタ追加: welcart_basic-square/inc/theme-customizer.php 1479行目あたり
.menu-on #mobile-menu .search-box, .menu-on #mobile-menu .snav .membership, .menu-on #mobile-menu .sns, .widget_wcex_favorites_widget li { border-color: <?php echo $sub_border; ?>; }
※ 「.widget_wcex_favorites_widget li」を追加
セレクタ追加・削除: welcart_basic-square/inc/theme-customizer.php 1236行目あたり
変更前 |
---|
.menu-on #mobile-menu .membership a.usces_login_a, #mobile-menu .membership a.usces_logout_a, .menu-on #mobile-menu .membership a.usces_logout_a, #memberinfo table.retail .redownload_link a { background-color: <?php echo $main_btn_color; ?>; color: <?php echo $main_btn_text_color; ?>; } ※ 「.menu-on #mobile-menu .membership a.usces_logout_a」を削除 |
変更後 |
#mobile-menu .membership a.usces_login_a, .menu-on #mobile-menu .membership a.usces_login_a, #mobile-menu .membership a.usces_logout_a, #mobile-menu .membership .mypage a, #mobile-menu .membership .mypage + li a, #memberinfo table.retail .redownload_link a { background-color: <?php echo $main_btn_color; ?>; color: <?php echo $main_btn_text_color; ?>; } ※ ハイライト部分を追加 |
セレクタ追加・削除: welcart_basic-square/inc/theme-customizer.php 1275行目あたり
変更前 |
---|
#mobile-menu .membership a.usces_login_a:hover, .menu-on #mobile-menu .membership a.usces_login_a:hover, #mobile-menu .membership a.usces_logout_a:hover, .menu-on #mobile-menu .membership a.usces_logout_a:hover, #memberinfo table.retail .redownload_link a:hover { background-color: <?php echo $main_btn_color_hov; ?>; color: <?php echo $main_btn_text_color; ?>; } ※ 「.menu-on #mobile-menu .membership a.usces_logout_a:hover」を削除 |
変更後 |
#mobile-menu .membership a.usces_login_a:hover, .menu-on #mobile-menu .membership a.usces_login_a:hover, #mobile-menu .membership a.usces_logout_a:hover, #mobile-menu .membership .mypage a:hover, #mobile-menu .membership .mypage + li a:hover, #memberinfo table.retail .redownload_link a:hover { background-color: <?php echo $main_btn_color_hov; ?>; color: <?php echo $main_btn_text_color; ?>; } ※ ハイライト部分を追加 |
セレクタ追加: welcart_basic-square/inc/theme-customizer.php 1310行目あたり
.menu-on #mobile-menu .membership a, #mobile-menu .membership .logout a.usces_logout_a, .menu-on .widget_welcart_login a, #tofavorite-content #tofavorite-close { background-color: <?php echo $sub_btn_color; ?>; color: <?php echo $sub_btn_text_color; ?>; }
※ 「#mobile-menu .membership .logout a.usces_logout_a」を追加
Welcart Basic 1.4 アップデートによるヘッダーのレイアウト崩れ修正
親テーマの Welcart Basic 1.4 では、ヘッダーのレイアウト調整をおこなっております。
それに伴い、Welcart Carina が最新バージョンでない場合にはレイアウト崩れが発生します。Welcart Carina を独自にカスタマイズしている方は、下記を参考にCSS の修正をおこなってください。
スタイル追加: welcart_basic-carina/style.css 302行目あたり
変更前 | 変更後 |
---|---|
.menu-on #mobile-menu { left: 0; opacity: 1; } .snav { float: none; margin: 0; padding: 0; } .search-box { |
.menu-on #mobile-menu { left: 0; opacity: 1; } .snav { float: none; margin: 0; padding: 0; width: auto; } .search-box { |
スタイル追加: welcart_basic-carina/style.css 330行目あたり
変更前 | 変更後 |
---|---|
.snav .membership { float: none; padding: 20px 0; border-bottom-style: solid; border-bottom-width: 1px; } .snav .membership i { display: none; } .snav .membership ul { |
.snav .membership { float: none; padding: 20px 0; width: auto; border-bottom-style: solid; border-bottom-width: 1px; } .snav .membership i { display: none; } .snav .membership ul { |
スタイル追加: welcart_basic-carina/style.css 360行目あたり
変更前 | 変更後 |
---|---|
.snav .membership li:last-child { margin-bottom: 0; } .snav .membership li a { text-align: center; line-height: 35px; } .snav .membership li a:active { |
.snav .membership li:last-child { margin-bottom: 0; } .snav .membership li a { text-align: center; line-height: 35px; border-right: none; } .snav .membership li a:active { |
ヘッダーメンバーメニューのスタイル・レイアウト調整
会員ログイン時のメンバーメニューの表示順を変更しました。
テンプレート修正: welcart_basic-carina/header.php 76行目あたり
【変更前】<?php if( usces_is_login() ): ?> <li><?php printf(__('Hello %s', 'usces'), usces_the_member_name('return')); ?></li> <li><?php usces_loginout(); ?></li> <li><a href="<?php echo USCES_MEMBER_URL; ?>"><?php _e('My page', 'welcart_basic') ?></a></li> <?php do_action( 'usces_theme_login_menu' ); ?> <?php else: ?> <li><?php _e('guest', 'usces'); ?></li> <li><?php usces_loginout(); ?></li> <li><a href="<?php echo USCES_NEWMEMBER_URL; ?>"><?php _e('New Membership Registration','usces') ?></a></li> <?php endif; ?>【変更後】
<?php if( usces_is_login() ): ?> <li><?php printf(__('Hello %s', 'usces'), usces_the_member_name('return')); ?></li> <li><a href="<?php echo USCES_MEMBER_URL; ?>"><?php _e('My page', 'welcart_basic') ?></a></li> <?php do_action( 'usces_theme_login_menu' ); ?> <li><?php usces_loginout(); ?></li> <?php else: ?> <li><?php _e('guest', 'usces'); ?></li> <li><?php usces_loginout(); ?></li> <li><a href="<?php echo USCES_NEWMEMBER_URL; ?>"><?php _e('New Membership Registration','usces') ?></a></li> <?php endif; ?>
※ usces_loginout() ログアウトの表示位置を変更
Welcart 商品一覧ウィジェットのレイアウト調整
Welcart 商品一覧ウィジェットのレイアウト調整をおこないました。
テンプレート修正: welcart_basic-carina/style.css 609行目あたり
#secondary .widget_basic_item_list .itemimg, #tertiary .widget_basic_item_list .itemimg { position: relative; } #secondary .widget_basic_item_list .item-info-wrap .inner { padding: 10px; }
テンプレート修正: welcart_basic-carina/style.css 1575行目あたり
【変更前】@media screen and (min-width: 62.5em) { #secondary .widget_basic_item_list .opt-tag li, #tertiary .widget_basic_item_list .opt-tag li { line-height: 23px; width: 23px; height: 23px; font-size: 8px; } #secondary .widget_basic_item_list .inner { padding: 0; } #secondary .widget_basic_item_list .text { display: none; } }【変更後】
@media screen and (min-width: 62.5em) { #secondary .widget_basic_item_list .opt-tag li, #tertiary .widget_basic_item_list .opt-tag li { line-height: 23px; width: 23px; height: 23px; font-size: 8px; } #secondary .widget_basic_item_list .item-info-wrap .inner { padding: 0; } #secondary .widget_basic_item_list .text { display: none; } }
※ 「#secondary .widget_basic_item_list .inner」を「#secondary .widget_basic_item_list .item-info-wrap .inner」に変更。