先日公開しました Welcart 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】
この記事は役に立ちましたか？
2
PAGE TOP