Welcart 公式テーマ以外での対応について

Welcart 公式テーマ以外でお気に入りプラグインを利用する場合は、下記いずれかの修正が必要となります。

  1. お気に入りプラグイン専用の CSS ファイルを設置する
  2. 商品詳細ページに「お気に入りボタン」を追加する
  3. 商品詳細ページに「アイコン」を追加する
  4. 商品一覧ページに「アイコン」を追加する
  5. お気に入りリストページを設置する
  6. お気に入り一覧ページへのリンクを設置する

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 に合わせたマークアップとなっています。
ご利用になられているテーマにマークアップを合わせる場合には、下記の手順に沿って設置・調整作業をおこなってください。

  1. プラグイン内に同梱されている「wc_favorite_page.php」をコピーしてください。

    ※ wc_favorite_page.php は、プラグインの「templates」フォルダ内に同梱されております。
  2. コピーしたテンプレートをご利用になられているテーマ内に設置してください。
  3. 「設定方法 – お気に入りリストのテンプレートパス」を参考にテーマ内に設置したテンプレートの読み込み指定をおこなってください。

    ※ ご利用になられているテーマ配下に  ’/wc_templates/member/wc_favorite_page.php’  が存在する場合は、「設定方法 – お気に入りリストのテンプレートパス」で指定したテンプレートは読み込まれませんのでご注意ください。
  4. 「お気に入りリストのテンプレートパス」の設定完了後に、「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>

※ 「会員がログインしている時」の条件の中にフックを追加してください。