MODE「食材販売」デモサイトのカスタマイズ方法

子テーマの設置・有効化

「食材販売」デモページでは、Welcart Mode の子テーマを利用しております。「スタイル変更」や「テンプレート修正」など、Welcart Mode をカスタマイズする場合には子テーマをご利用ください。

Welcart Mode の商品ページより子テーマのダウンロードが可能です。

アップロード方法

外観 > テーマ > 新規追加　の「テーマのアップロード」からダウンロードした Zipファイルをアップロードして有効化ください。

「コーディネート」変更

初搭載の「コーディネート」機能を、料理の調理法を記事にして「料理レシピ」で利用しております。「レシピ」（記事）に対し食材・食品（商品）を紐づけて商品ページに誘導させております。
デモページでは見出し変更等のカスタマイズをおこなっております。

1. タイトルの変更

トップ・コーディネート一覧のデフォルトのタイトル表記は「コーディネート」となっております。デモページでは、下記設定ページで「コーディネート」から「レシピ」に変更しております。

タイトル： コーディネート → レシピに変更。
タイトル（英語表記）： COORDINATE → RECIPEに変更。

2. 商品ページの関連コーディネートのタイトル変更

商品ページに（商品に）紐づている「レシピ（コーディネート）」一覧を表示することができます。
デモページでは子テーマの functions.php に（フックを使って）コードを記述してタイトル変更、モデルの一部項目を削除しております。

※下記のコードをコピーして functions.php に貼り付けてください。

add_filter( 'welcart_mode_filter_coordinate_models_list_html', 'mode_child_filter_coordinate_models_list_html', 10, 4 );
function mode_child_filter_coordinate_models_list_html( $html, $post_id, $associations, $out = '' ) {
   if (empty($post_id)) {
        $post_id = get_the_ID();
        if ($post_id === false) {
            return '';
        }
    }

    $postIds = $associations->getPostIds();
    if (empty($postIds)) {
        return '';
    }

    $processedTermIds = [];
    ob_start();
    ?>
    <div class="arrange_item">
        <h3 class="arrange_title">この食材を使ったレシピ</h3>
        <div class="coordinate-column column-grid column-grid5 single_arrange_item">
            <?php foreach ($postIds as $coordinatesPostId) : ?>
                <?php
                $permalink = get_the_permalink($coordinatesPostId);
                $articleClass = get_post_class('list', $coordinatesPostId);
                $terms = get_the_terms($coordinatesPostId, 'model');
                $eyecatch = '';
                if (has_post_thumbnail($coordinatesPostId)) {
                    $eyecatch = get_the_post_thumbnail($coordinatesPostId, [235, 300]);
                } else {
                    $eyecatch = Master::getNoImageHtml();
                }
                ?>
                <?php if ($terms && !is_wp_error($terms)) : ?>
                    <?php foreach ($terms as $term) : ?>
                        <?php
                        $termId = (int)$term->term_id;
                        if (in_array($termId, $processedTermIds, true)) {
                            continue;
                        }
                        $processedTermIds[] = $termId;
                        $type = get_term_meta($termId, 'model_type', true);
                        $height = get_term_meta($termId, 'model_height', true);
                        $model_img_url  = get_term_meta($termId, 'model-img-url', true);
                        $model_img_id = get_term_meta($termId, 'model-img-id', true);
                        $modelimg = '';
                        if (!empty($model_img_id)) {
                            $modelimg = wp_get_attachment_image($model_img_id, [150, 150]);
                        } elseif (!empty($model_img_url)) {
                            $modelimg = '<img src="' . esc_url($model_img_url) . '" height="150" width="150" class="attachment-150x150 size-150x150" />';
                        }
                        ob_start();
                        ?>
                        <article class="<?php echo join(' ', $articleClass); ?>">
                            <a href="<?php echo esc_url($permalink); ?>">
                                <div class="img square">
                                    <?php echo $eyecatch; ?>
                                </div>
                                <div class="model-info">
                                    <div class="thumbnail">
                                        <?php echo $modelimg; ?>
                                    </div>
                                    <div class="in">
                                        <div class="name">
                                            <?php echo esc_html($term->name); ?>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                        <?php
                        $article = (string)ob_get_clean();
                        echo $article
                        ?>
                    <?php endforeach; ?>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>
    </div>
    <?php
    $html = (string)ob_get_clean();
    if ($out === 'return') {
        return $html;
    }

    echo $html;

}

<h3 class="arrange_title"><?php _e('Models sporting this item', 'welcart_mode'); ?></h3>

を下記のように変更しております。

<h3 class="arrange_title">この食材を使ったレシピ</h3>

「モデル」変更

デモページでは、「モデル」を「フードコーディネーター」に変更して利用しております。料理レシピ（記事）に「モデル」に登録した「フードコーディネーター」情報を表示した場合、「モデル情報」といったタイトル表示となってしまいます。親テーマから該当のテンプレートを子テーマに設置してタイトルの変更をおこなっております。

※「content-coordinate.php」を親テーマからコピーし同階層（template-parts/）になるように子テーマに設置してください。

– 59行目あたり

<section class="is-coordniates coordinate-column">
<?php
    $terms = get_the_terms($post->ID, 'model');
    if ( $post_model_info == 'show' && !empty($terms)  ) : ?>
    <div class="model-block">
    <?php
        $terms = get_the_terms($post->ID, 'model');
    ?>
        <a href="<?php echo esc_url(get_term_link( $terms[0]->term_id )); ?>">
            <div class="read">フードコーディネーター</div>
            <?php echo welcart_mode_model_info(); ?>
        </a>
    </div>
<?php endif; ?>

<?php _e( 'The Model Information', 'welcart_mode' ); ?>

を下記のように変更しております。

<div class="read">フードコーディネーター</div>

「ブランド」変更

デモページでは、「ブランド」を「生産地」に変更して利用しております。トップページに一覧を表示させた場合、デフォルトのタイトル表示は「ブランド」となりますので、親テーマから該当のテンプレートを子テーマに設置しタイトルの変更をおこなっております。

※「brand.php」を親テーマからコピーし同階層（template-parts/home/）になるように子テーマに設置してください。

– 20行目あたり

<section class="section-home brand">

    <div class="column1120">

        <div class="entryhead">
            <div class="en">COUNTRY</div>
            <h1 class="small"><?php _e( '生産地' ); ?></h1>
        </div>

<div class="en">BRAND</div>
<h1 class="small"><?php _e( 'Brand', 'welcart_mode' ); ?></h1>

を下記のように変更しております。

<div class="en">COUNTRY</div>
<h1 class="small">生産地</h1>

「キービジュアル画像」間の間隔調整

デモページでは、「キービジュアル画像」間の間隔（隙間）の調整をおこなっております。下記スタイルを子テーマ側のスタイルシート（style.css）に追記することでデモサイトと同じ表示にすることが可能です。

.home-slide-container .list {
    margin: 0 10px;
}

【Before】

【After】