215 lines
11 KiB
PHP
215 lines
11 KiB
PHP
<?php
|
||
/**
|
||
* Front page template — MING 明命品牌首頁.
|
||
*
|
||
* @package MING
|
||
*/
|
||
|
||
get_header();
|
||
|
||
$ming_brand_url = ming_page_url_by_template( 'template-brand.php', '#philosophy' );
|
||
$ming_shop = ming_shop_url();
|
||
$ming_email = get_theme_mod( 'ming_email', '' );
|
||
$ming_mailto = $ming_email ? $ming_email : 'hello@ming.example';
|
||
|
||
/* 首頁產品卡：即時從 WooCommerce 商品讀取（名稱/圖片/價格/連結均來自後台商品） */
|
||
$ming_curated = array(
|
||
array( 'key' => '冰霸', 'series' => 'Ming Fate', 'desc' => '大容量陶瓷內膽，寬口好加冰，一提就走的全天候補水夥伴。' ),
|
||
array( 'key' => '雙用', 'series' => 'Brew Series', 'desc' => '重力鎖水設計，直飲、泡茶兩種用法自由切換，六色可選。' ),
|
||
array( 'key' => '小清新', 'series' => 'Fresh Series', 'desc' => '輕盈小巧的陶瓷內膽杯，日常通勤的溫柔陪伴。' ),
|
||
array( 'key' => '漸層', 'series' => 'Gradient Series', 'desc' => '如晨霧般的漸層色彩，裝下一天的光線變化。' ),
|
||
array( 'key' => '迷你', 'series' => 'Mini Series', 'desc' => '一手掌握的小尺寸，放進小包也不佔空間。' ),
|
||
array( 'key' => '隨行', 'series' => 'Handle Series', 'desc' => '一體成型提手設計，戶外運動、郊遊都好攜帶。' ),
|
||
);
|
||
$ming_cards = array();
|
||
if ( class_exists( 'WooCommerce' ) ) {
|
||
$ming_pq = new WP_Query( array(
|
||
'post_type' => 'product',
|
||
'posts_per_page' => -1,
|
||
'post_status' => 'publish',
|
||
'orderby' => array( 'menu_order' => 'ASC', 'date' => 'ASC' ),
|
||
) );
|
||
foreach ( $ming_pq->posts as $ming_pp ) {
|
||
$ming_prod = wc_get_product( $ming_pp->ID );
|
||
if ( ! $ming_prod ) { continue; }
|
||
$ming_series = 'MING';
|
||
$ming_desc = '';
|
||
foreach ( $ming_curated as $ming_cu ) {
|
||
if ( false !== mb_strpos( $ming_pp->post_title, $ming_cu['key'] ) ) {
|
||
$ming_series = $ming_cu['series'];
|
||
$ming_desc = $ming_cu['desc'];
|
||
break;
|
||
}
|
||
}
|
||
$ming_excerpt = trim( wp_strip_all_tags( $ming_prod->get_short_description() ) );
|
||
if ( $ming_excerpt ) { $ming_desc = $ming_excerpt; }
|
||
$ming_colors = ming_product_color_options( $ming_prod );
|
||
$ming_cards[] = array(
|
||
'name' => $ming_prod->get_name(),
|
||
'link' => get_permalink( $ming_pp->ID ),
|
||
'img' => get_the_post_thumbnail_url( $ming_pp->ID, 'large' ),
|
||
'series' => $ming_series,
|
||
'desc' => $ming_desc,
|
||
'price' => $ming_prod->get_price_html(),
|
||
'colors' => $ming_colors,
|
||
);
|
||
}
|
||
wp_reset_postdata();
|
||
}
|
||
?>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero" id="top">
|
||
<div class="logo-show">
|
||
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>logo.png" alt="MING 明命品牌標誌" width="847" height="811">
|
||
</div>
|
||
<h1 class="reveal"><span class="hl">以時間為序<span class="d-sp"> </span><span class="m-br"></span>以土地為根</span><span class="hl">以<em>光明</em>為引</span></h1>
|
||
<p class="sub reveal">連結人與自然 · 連結生活與生命</p>
|
||
<div class="hero-cta reveal">
|
||
<a class="btn" href="<?php echo esc_attr( $ming_shop ); ?>">立即選購</a>
|
||
<a class="btn ghost" href="<?php echo esc_attr( $ming_brand_url ); ?>">關於我們</a>
|
||
</div>
|
||
<div class="rule"></div>
|
||
<figure class="hero-figure reveal">
|
||
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>hero.jpg" alt="MING 陶瓷內膽杯全色系" width="1294" height="1216">
|
||
<span class="frame-tag">陶瓷內膽系列</span>
|
||
<span class="frame-note">MING FATE · 提手冰霸杯</span>
|
||
</figure>
|
||
</section>
|
||
|
||
<!-- 品牌理念（摘要） -->
|
||
<section class="section" id="philosophy">
|
||
<div class="wrap philo-grid">
|
||
<div class="philo-logo reveal">
|
||
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>logo.png" alt="MING 品牌標誌" width="847" height="811">
|
||
<p class="caption">MING — 取「明」與「命」之意</p>
|
||
</div>
|
||
<div class="philo-copy reveal">
|
||
<p class="eyebrow">BRAND PHILOSOPHY</p>
|
||
<h2 class="h2">MING，不止是名字，<br class="d-br">而是對「明」與「命」的詮釋</h2>
|
||
<div class="divider"></div>
|
||
<p>外圓以時鐘與田地為意象，象徵時間的流轉與土地的循環，表達人與天地、時間與萬物之間持續而深刻的連結。</p>
|
||
<p>「明」，是光明，是看見，是對美好生活的嚮往；「命」，是生命，是人與自然之間的連結，也是萬物生生不息的延續。</p>
|
||
<div class="keywords">
|
||
<div class="kw"><b>明</b><span>光明 · 看見</span></div>
|
||
<div class="kw"><b>命</b><span>生命 · 連結</span></div>
|
||
<div class="kw"><b>三</b><span>三生萬物</span></div>
|
||
</div>
|
||
<a class="textlink" href="<?php echo esc_attr( $ming_brand_url ); ?>">關於我們 →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 品牌宣傳片（外觀→自訂→MING 品牌宣傳片 設定；支援 YouTube / 本機 mp4，站內播放） -->
|
||
<?php if ( get_theme_mod( 'ming_video_enable' ) && get_theme_mod( 'ming_video_url' ) ) : ?>
|
||
<?php
|
||
$ming_vsrc = get_theme_mod( 'ming_video_source', 'youtube' );
|
||
$ming_vurl = trim( (string) get_theme_mod( 'ming_video_url' ) );
|
||
$ming_vtitle = get_theme_mod( 'ming_video_title', '品牌宣傳片' );
|
||
$ming_vdesc = get_theme_mod( 'ming_video_desc', '' );
|
||
/* 自動識別：只要網址能解析出 YouTube ID 就走 iframe，與來源選項無關（避免貼錯來源導致黑屏） */
|
||
$ming_ytid = ming_youtube_id( $ming_vurl );
|
||
?>
|
||
<section class="section video-sec" id="brand-video">
|
||
<div class="wrap video-grid">
|
||
<div class="video-copy reveal">
|
||
<p class="eyebrow">BRAND FILM</p>
|
||
<h2 class="h2"><?php echo esc_html( $ming_vtitle ); ?></h2>
|
||
<div class="divider"></div>
|
||
<?php if ( $ming_vdesc ) : ?><p class="video-desc"><?php echo nl2br( esc_html( $ming_vdesc ) ); ?></p><?php endif; ?>
|
||
</div>
|
||
<div class="video-frame reveal">
|
||
<?php if ( $ming_ytid ) : ?>
|
||
<iframe src="https://www.youtube-nocookie.com/embed/<?php echo esc_attr( $ming_ytid ); ?>?rel=0" title="<?php echo esc_attr( $ming_vtitle ); ?>" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||
<?php elseif ( preg_match( '/\.(mp4|webm|mov|m4v)(\?|#|$)/i', $ming_vurl ) || 'mp4' === $ming_vsrc ) : ?>
|
||
<video controls preload="metadata" playsinline poster="">
|
||
<source src="<?php echo esc_url( $ming_vurl ); ?>" type="video/mp4">
|
||
您的瀏覽器不支援影片播放。
|
||
</video>
|
||
<?php else : ?>
|
||
<div class="video-invalid">影片連結無法識別<?php echo current_user_can( 'manage_options' ) ? '（請至 外觀 → 自訂 → 品牌宣傳片 檢查網址）' : ''; ?></div>
|
||
<?php endif; ?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<?php endif; ?>
|
||
|
||
<!-- 產品系列 -->
|
||
<section class="section" id="products">
|
||
<div class="wrap">
|
||
<div class="prod-head reveal">
|
||
<div>
|
||
<p class="eyebrow">COLLECTION</p>
|
||
<h2 class="h2">陶瓷內膽杯系列</h2>
|
||
</div>
|
||
<p class="note">純陶瓷內膽 · 抗酸鹼 · 耐腐蝕 · 無異味</p>
|
||
</div>
|
||
<div class="prod-grid" id="prodGrid">
|
||
<?php foreach ( $ming_cards as $ming_c ) : ?>
|
||
<article class="pcard reveal">
|
||
<a class="ph" href="<?php echo esc_url( $ming_c['link'] ); ?>"><?php if ( $ming_c['img'] ) : ?><img src="<?php echo esc_url( $ming_c['img'] ); ?>" alt="<?php echo esc_attr( $ming_c['name'] ); ?>" loading="lazy"><?php endif; ?></a>
|
||
<div class="pb">
|
||
<div class="series"><?php echo esc_html( $ming_c['series'] ); ?></div>
|
||
<h3><?php echo esc_html( $ming_c['name'] ); ?></h3>
|
||
<?php if ( $ming_c['price'] ) : ?><span class="price"><?php echo wp_kses_post( $ming_c['price'] ); ?></span><?php endif; ?>
|
||
<?php if ( $ming_c['desc'] ) : ?><p><?php echo esc_html( $ming_c['desc'] ); ?></p><?php endif; ?>
|
||
<div class="foot">
|
||
<span class="colors"><?php foreach ( $ming_c['colors'] as $ming_col ) : ?>
|
||
<button type="button" class="cdot" style="background:<?php echo esc_attr( $ming_col['hex'] ); ?>" title="<?php echo esc_attr( $ming_col['name'] ); ?>" aria-label="<?php echo esc_attr( $ming_col['name'] ); ?>"<?php if ( ! empty( $ming_col['img'] ) ) : ?> data-img="<?php echo esc_url( $ming_col['img'] ); ?>"<?php endif; ?> data-link="<?php echo esc_url( $ming_col['link'] ); ?>"></button>
|
||
<?php endforeach; ?></span>
|
||
<a class="more" href="<?php echo esc_url( $ming_c['link'] ); ?>">了解詳情</a>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<div class="prod-cta reveal">
|
||
<a class="btn" href="<?php echo esc_attr( $ming_shop ); ?>">進入商店，看全部商品</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 四大核心 -->
|
||
<section class="section core" id="core">
|
||
<div class="wrap">
|
||
<p class="eyebrow reveal">CORE PRODUCT</p>
|
||
<h2 class="h2 reveal">純陶瓷內膽，<br>解決你的後顧之憂</h2>
|
||
<div class="core-grid">
|
||
<div class="core-list reveal">
|
||
<div class="core-item">
|
||
<span class="no">01</span>
|
||
<div><h3>純陶瓷內膽</h3><p>內壁採用純陶瓷材質，不易殘留、減少細菌滋生，裝咖啡、茶飲、果汁都不串味。</p></div>
|
||
</div>
|
||
<div class="core-item">
|
||
<span class="no">02</span>
|
||
<div><h3>保冷保熱</h3><p>雙層真空結構搭配陶瓷內膽，長效鎖溫，冰飲熱飲都維持剛剛好的口感。</p></div>
|
||
</div>
|
||
<div class="core-item">
|
||
<span class="no">03</span>
|
||
<div><h3>全身可拆洗</h3><p>杯蓋、吸管、內膽皆可拆開清洗，每個角落都乾淨，日常使用更安心。</p></div>
|
||
</div>
|
||
<div class="core-item">
|
||
<span class="no">04</span>
|
||
<div><h3>舒適手提</h3><p>加粗手柄設計，握感舒適、一提就走，通勤、運動、旅行都自在隨行。</p></div>
|
||
</div>
|
||
</div>
|
||
<figure class="core-figure reveal">
|
||
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/' ); ?>detail-liner.jpg" alt="陶瓷內膽結構分解" width="790" height="993">
|
||
<figcaption class="cap">CERAMIC LINER · 抗酸鹼 耐腐蝕 無異味</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 結語 -->
|
||
<section class="closing" id="contact">
|
||
<div class="reveal">
|
||
<p class="q">讓每一件事物<br>都擁有屬於<em>自己的光</em></p>
|
||
<p class="sub">ENJOY YOUR DRINKING — MING</p>
|
||
<a class="cta" href="mailto:<?php echo esc_attr( $ming_mailto ); ?>">聯絡我們</a>
|
||
</div>
|
||
</section>
|
||
|
||
<?php
|
||
get_footer();
|