表示とカスタマイズ

ボタンの表示制御

デフォルトでは Welcart 標準の売切ラベルの隣に、Welcart「カートに入れる」ボタンと同サイズ・同ホバー挙動でありながらアウトライン意匠にした「再入荷お知らせ通知」ボタンを自動注入します。

自動挿入を止めたい場合

「報助 → 設定」→ 「基本設定」→ 「ボタンの自動挿入」を OFF に。任意の位置に手動でボタンを配置できます。

ラベル文字列を変更

設定画面の「ボタンラベル」から変更、またはフィルタで動的に:

add_filter( 'hosuke_button_label', function ( $label, $post_id, $sku_code ) {
    return '入荷したら教えてください';
}, 10, 3 );

特定条件でボタンを非表示

hosuke_should_show_button フィルタで判定を上書き:

// セールカテゴリの商品では表示しない
add_filter( 'hosuke_should_show_button', function ( $should, $post_id, $sku_code ) {
    if ( has_term( 'sale', 'product_category', $post_id ) ) {
        return false;
    }
    return $should;
}, 10, 3 );

ボタン HTML を完全に差し替え

add_filter( 'hosuke_button_html', function ( $html, $post_id, $sku_code ) {
    return sprintf(
        '<a href="#hosuke-modal" class="my-custom-btn" data-post-id="%d" data-sku="%s">入荷通知を受け取る</a>',
        (int) $post_id,
        esc_attr( $sku_code )
    );
}, 10, 3 );

再入荷商品一覧ページ

ショートコード [hosuke_restock_list] で、直近に再入荷した商品の一覧を表示できます。「新着」「再入荷情報」などのページ作成に。

設置手順

1. WordPress 管理画面 → 「固定ページ」→ 「新規追加」
2. タイトル: 例「再入荷情報」
3. 本文にショートコードを配置:

[hosuke_restock_list]

属性でカスタマイズ

[hosuke_restock_list days="14" per_page="30"]

属性の詳細は 開発者向けリファレンス > ショートコード を参照。

サイドバーウィジェット

再入荷商品一覧をサイドバーに常時表示したい場合、専用ウィジェットが利用できます。

クラシックウィジェット

1. 「外観」→ 「ウィジェット」
2. 利用可能なウィジェット一覧から「報助 - 再入荷商品」を選択
3. 表示したいサイドバー / フッター等のエリアにドラッグ
4. タイトル、表示日数、表示件数を設定して保存

ブロックエディタ (Block Widgets)

ブロックエディタ環境では「ショートコード」ブロックで [hosuke_restock_list per_page="5"] を挿入するのが最も柔軟です。

メールテンプレの編集

「報助 → 通知メール」で 3 種類のテンプレを個別に編集できます:

差込変数

変数はエディタ上部のボタン一覧からカーソル位置に挿入できます:

件名の動的差し替え

特定条件でだけ件名を変えたい場合はフィルタで:

add_filter( 'hosuke_email_subject', function ( $subject, $type, $notification ) {
    if ( $type === 'restock' && (int) $notification['retry_count'] > 0 ) {
        return '[再送] ' . $subject;
    }
    return $subject;
}, 10, 3 );

HTML メールにしたい場合

hosuke_email_template_path でテーマ側のテンプレートパスを指し、hosuke_email_headers で Content-Type を上書き:

add_filter( 'hosuke_email_template_path', function ( $path, $type ) {
    return get_stylesheet_directory() . '/hosuke-email-' . $type . '.php';
}, 10, 2 );

add_filter( 'hosuke_email_headers', function ( $headers ) {
    $headers[] = 'Content-Type: text/html; charset=UTF-8';
    return $headers;
} );

解除ページ

プラグイン有効化時に、固定ページ「通知の解除」(スラッグ hosuke-unsubscribe) が自動作成されます。ショートコード [hosuke_unsubscribe] で解除フォームがレンダリングされます。

メール本文の {unsubscribe_url} は、この固定ページに解除トークンをクエリで付けた URL に展開されます。お客様がクリックするだけで即座に解除される 1-click 解除に対応 (RFC 8058 List-Unsubscribe-Post ヘッダも自動送信)。

デザインをテーマに合わせて調整

固定ページなのでテーマの標準スタイルが自動適用されます。追加でカスタマイズしたい場合は、固定ページ編集画面から本文にコンテンツを追加してください。ショートコード [hosuke_unsubscribe] の前後にテキストや画像を挿入できます:

<p>通知の解除は以下のフォームから行えます。</p>

[hosuke_unsubscribe]

<p>また新しい商品情報を受け取りたい時は、商品ページからいつでも登録できます。</p>

スラッグを変更したい

hosuke_unsubscribe_page_slug フィルタで:

add_filter( 'hosuke_unsubscribe_page_slug', function ( $slug ) {
    return 'restock-notify-off';
} );

変更後はプラグインを一度無効化 → 再有効化することで、新スラッグの固定ページが自動作成されます。

会員マイページ統合

Welcart ログイン中の会員は、自分が登録した通知の一覧を確認・解除できます。

自動注入 (推奨)

「報助 → 設定」→ 「Welcart マイページ自動注入」を ON にすると、Welcart マイページの「購入履歴」タブの下に通知一覧が自動で追加されます。

手動配置

Welcart マイページテーマファイル (通常 wc_templates/member.php 等) の任意の位置に:

<?php echo do_shortcode( '[hosuke_my_notifications]' ); ?>

会員ログイン中のみ表示され、ゲスト訪問時は何も出力しません。

CSS で見た目を調整

報助は CSS 変数ベースで実装されており、テーマ側から一括で色調を差し替えられます。

ブランド色の変更

デフォルトは Welcart Basic テーマに合わせた #ff8300 オレンジ。テーマ側で以下を追記:

:root {
    --hosuke-brand-color: #2b6cb0;      /* ボタン枠線 / ホバー色 */
    --hosuke-brand-color-hover: #234e7a;
    --hosuke-modal-radius: 8px;         /* モーダル角丸 */
}

主要クラス名