Welcart 公式テーマ以外でお気に入りプラグインを利用する場合は、下記いずれかの修正が必要となります。
- お気に入りプラグイン専用の CSS ファイルを設置する
- 商品詳細ページに「お気に入りボタン」を追加する
- 商品詳細ページに「アイコン」を追加する
- 商品一覧ページに「アイコン」を追加する
- お気に入りリストページを設置する
- お気に入り一覧ページへのリンクを設置する
1. CSS ファイルを設置する
利用されているテーマによってマークアップが異なるため、CSS での調整は必ず必要となります。
お気に入りプラグイン専用の CSS ファイルを読み込む場合には、テーマ内に専用の CSS ファイルを設置して「設定方法 – CSS ファイルパス」より設定してください。
※ ご利用になられているテーマ配下に ’/assets/css/favorite.css’ が存在する場合は、「設定方法 – CSS ファイルパス」で設定した CSS ファイルは読み込まれませんのでご注意ください。
2. 商品詳細ページに「お気に入りボタン」を追加する
商品詳細ページのお気に入り追加設定を「ボタンで追加」で指定している場合、商品詳細ページテンプレートに以下のフックがないと「お気に入りボタン」が表示されません。
「お気に入りボタン」が表示されない場合には、商品詳細ページテンプレートに以下のフックを追加してください。
<?php do_action( 'usces_action_single_item_outform' ); ?>
実際に、wc_item_single.php にフックを書き足したコードの例です。
このコードは、最新版の Welcart Basic テーマ内の wc_item_single.php です。
wc_item_single.php 127行目あたり
<div class="item-info">
・
・
<form action="<?php echo USCES_CART_URL(); ?>" method="post">
・
・
<div class="item-info">
・
・
<div class="error_message"><?php usces_singleitem_error_message( $post->ID, usces_the_itemSku( 'return' ) ); ?></div>
</div><!-- .skuform -->
<?php } while ( usces_have_skus() ); ?>
<?php do_action( 'usces_action_single_item_inform' ); ?>
</form>
<?php do_action( 'usces_action_single_item_outform' ); ?>
</div><!-- .item-info -->
<?php usces_assistance_item( $post->ID, __('An article concerned', 'usces') ); ?>
3. 商品詳細ページに「アイコン」を追加する
商品詳細ページのお気に入り追加設定を「アイコンで追加」で指定している場合、商品詳細ページテンプレートに以下のフックがないと「アイコン」が表示されません。
商品詳細ページテンプレートに以下のフックを追加してください。
<?php do_action( 'usces_theme_favorite_icon' ); ?>
実際に、wc_item_single.php にフックを書き足したコードの例です。
このコードは、最新版の Welcart Basic テーマ内の wc_item_single.php です。
wc_item_single.php 36行目あたり
<div class="itemimg">
<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>
<?php do_action( 'usces_theme_favorite_icon' ); ?>
</div>
<?php
$imageid = usces_get_itemSubImageNums();
if ( ! empty( $imageid ) ) :
※ フックの設置場所に指定はありませんが、SKU 単位でお気に入り登録をすることはできませんので、商品 SKU がループされているような場所では使用しないでください。
※ Welcart Basic では、CSS で商品画像の上にアイコンを設置するよう調整しております。うまく表示されない場合には CSS で調整をおこなってください。
4. 商品一覧ページに「アイコン」を追加する
商品一覧ページにアイコンを表示させる場合は、以下のフックを追加してください。
<?php do_action( 'usces_theme_favorite_icon' ); ?>
実際に、category.php にフックを書き足したコードの例です。
このコードは、最新版の Welcart Basic テーマ内の category.php です。
category.php 19行目あたり
<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 ); ?>
<?php do_action( 'usces_theme_favorite_icon' ); ?>
</a>
※ while( have_posts() ) のループ内で使用してください。ループ内であれば設置場所に指定はありません。商品名の下や価格の下などに設置してください。
※ Welcart Basic では、CSS で商品画像の上にアイコンを設置するよう調整しています。うまく表示されない場合は CSS で調整を行ってください。
5. お気に入りリストページを設置する
デフォルトで表示される「お気に入り一覧ページ」用のテンプレートは、Welcart Basic に合わせたマークアップとなっています。
ご利用になられているテーマにマークアップを合わせる場合には、下記の手順に沿って設置・調整作業をおこなってください。
- プラグイン内に同梱されている「wc_favorite_page.php」をコピーしてください。
※ wc_favorite_page.php は、プラグインの「templates」フォルダ内に同梱されております。 - コピーしたテンプレートをご利用になられているテーマ内に設置してください。
- 「設定方法 – お気に入りリストのテンプレートパス」を参考にテーマ内に設置したテンプレートの読み込み指定をおこなってください。
※ ご利用になられているテーマ配下に ’/wc_templates/member/wc_favorite_page.php’ が存在する場合は、「設定方法 – お気に入りリストのテンプレートパス」で指定したテンプレートは読み込まれませんのでご注意ください。 - 「お気に入りリストのテンプレートパス」の設定完了後に、「wc_favorite_page.php」のマークアップ変更や CSS でのスタイル調整をおこなってください。
6. お気に入り一覧ページへのリンクを設置する
Welcart Basic では、会員がログインしている場合にヘッダーメニューにお気に入り一覧ページへのリンクを表示させています。
| メンバーメニューの表示 |
 |
以下のフックを追加することでお気に入り一覧ページへのリンクを表示することができます。
<?php do_action( 'usces_theme_login_menu' ); ?>
実際に、Welcart Basic にフックを書き足したコードの例です。
header.php 44行目あたり
<?php do_action( 'usces_theme_action_membersystem_before' ); ?>
<?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>
※ 「会員がログインしている時」の条件の中にフックを追加してください。
PAGE TOP