根据《外贸多语言展示站・极简技术方案》，生成相应的代码
我会基于这份极简方案，生成核心可复用的代码文件，覆盖多语言、产品展示、询盘表单、动态效果等核心功能，你可直接复制到 Underscores 主题中使用。
所有代码遵循「轻量、适配 Bootstrap 5、兼容 Polylang、无冗余」原则，按文件分类整理，标注关键注释，方便你直接复用。
一、先准备：Underscores 主题基础配置
1. functions.php 核心配置（替换原文件关键部分）
<?php
/**
* Underscores 主题核心配置（适配外贸多语言站）
*/
// 1. 加载 Bootstrap 5 资源（按需定制版，仅核心组件）
function my_theme_assets() {
// 加载自定义 Bootstrap 5 CSS（建议官网定制后本地加载，或用CDN）
wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', array(), '5.3.0');
// 加载主题自定义样式（覆盖 Bootstrap，放最后）
wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array('bootstrap-css'), wp_get_theme()->get('Version'));
// 加载 Bootstrap JS（仅核心bundle，含Popper）
wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array(), '5.3.0', true);
// 加载自定义JS（动态效果、多语言适配）
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/custom.js', array('bootstrap-js'), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_theme_assets');
// 2. 注册自定义文章类型（产品）
function create_product_post_type() {
$labels = array(
'name' => pll__('Products'), // 多语言适配
'singular_name' => pll__('Product'),
'add_new' => pll__('Add New Product'),
'add_new_item' => pll__('Add New Product'),
'edit_item' => pll__('Edit Product'),
'all_items' => pll__('All Products'),
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => pll__('products')), // 多语言URL
'supports' => array('title', 'editor', 'thumbnail', 'custom-fields'),
'menu_icon' => 'dashicons-products',
'show_in_rest' => true, // 适配Gutenberg编辑器
);
register_post_type('product', $args);
}
add_action('init', 'create_product_post_type');
// 3. 注册产品分类法
function create_product_taxonomy() {
$labels = array(
'name' => pll__('Product Categories'),
'singular_name' => pll__('Product Category'),
'add_new_item' => pll__('Add New Product Category'),
'edit_item' => pll__('Edit Product Category'),
'all_items' => pll__('All Product Categories'),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'show_ui' => true,
'show_admin_column' => true,
'rewrite' => array('slug' => pll__('product-category')),
);
register_taxonomy('product_category', array('product'), $args);
}
add_action('init', 'create_product_taxonomy');
// 4. 添加产品自定义字段（SKU/价格/MOQ/规格）
function add_product_meta_boxes() {
add_meta_box(
'product_details_meta_box',
pll__('Product Details'),
'render_product_meta_box',
'product',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'add_product_meta_boxes');
// 渲染自定义字段表单（适配Bootstrap样式）
function render_product_meta_box($post) {
wp_nonce_field('save_product_meta', 'product_meta_nonce');
// 获取已保存的字段值
$product_sku = get_post_meta($post->ID, '_product_sku', true);
$product_price = get_post_meta($post->ID, '_product_price', true);
$product_moq = get_post_meta($post->ID, '_product_moq', true);
$product_specs = get_post_meta($post->ID, '_product_specs', true);
?>
<div class="row mb-3">
<div class="col-md-6">
<label for="product_sku" class="form-label"><?php pll_e('Product SKU'); ?></label>
<input type="text" class="form-control" id="product_sku" name="product_sku" value="<?php echo esc_attr($product_sku); ?>">
</div>
<div class="col-md-6">
<label for="product_price" class="form-label"><?php pll_e('Price (USD)'); ?></label>
<input type="number" step="0.01" class="form-control" id="product_price" name="product_price" value="<?php echo esc_attr($product_price); ?>">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="product_moq" class="form-label"><?php pll_e('MOQ'); ?></label>
<input type="number" class="form-control" id="product_moq" name="product_moq" value="<?php echo esc_attr($product_moq); ?>">
</div>
</div>
<div class="row mb-3">
<div class="col-md-12">
<label for="product_specs" class="form-label"><?php pll_e('Specifications (CN/EN separate by line)'); ?></label>
<textarea class="form-control" id="product_specs" name="product_specs" rows="4"><?php echo esc_textarea($product_specs); ?></textarea>
</div>
</div>
<?php
}
// 保存产品自定义字段
function save_product_meta($post_id) {
if (!isset($_POST['product_meta_nonce']) || !wp_verify_nonce($_POST['product_meta_nonce'], 'save_product_meta')) return;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if (!current_user_can('edit_post', $post_id)) return;
// 保存字段（转义防XSS）
if (isset($_POST['product_sku'])) update_post_meta($post_id, '_product_sku', sanitize_text_field($_POST['product_sku']));
if (isset($_POST['product_price'])) update_post_meta($post_id, '_product_price', sanitize_text_field($_POST['product_price']));
if (isset($_POST['product_moq'])) update_post_meta($post_id, '_product_moq', sanitize_text_field($_POST['product_moq']));
if (isset($_POST['product_specs'])) update_post_meta($post_id, '_product_specs', sanitize_textarea_field($_POST['product_specs']));
}
add_action('save_post', 'save_product_meta');
// 5. 支持特色图片、多语言等核心功能
function my_theme_support() {
add_theme_support('post-thumbnails'); // 产品主图
add_theme_support('title-tag'); // 自动标题
add_theme_support('html5', array('form', 'button', 'navigation')); // HTML5兼容
}
add_action('after_setup_theme', 'my_theme_support');
// 6. 封装产品查询函数（简化模板调用）
function get_products($args = array()) {
$default_args = array(
'post_type' => 'product',
'posts_per_page' => 12,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
);
$query_args = wp_parse_args($args, $default_args);
$products = new WP_Query($query_args);
$result = array();
if ($products->have_posts()) {
while ($products->have_posts()) {
$products->the_post();
// 组装产品数据（类似Django对象，方便调用）
$result[] = (object) array(
'id' => get_the_ID(),
'title' => get_the_title(),
'permalink' => get_the_permalink(),
'thumbnail' => get_the_post_thumbnail_url(get_the_ID(), 'medium'),
'sku' => get_post_meta(get_the_ID(), '_product_sku', true),
'price' => get_post_meta(get_the_ID(), '_product_price', true),
'moq' => get_post_meta(get_the_ID(), '_product_moq', true),
'specs' => get_post_meta(get_the_ID(), '_product_specs', true),
'category' => wp_get_post_terms(get_the_ID(), 'product_category', array('fields' => 'names')),
);
}
wp_reset_postdata();
}
return $result;
}2. header.php（头部模板，含多语言切换+Bootstrap导航）
<!DOCTYPE html>
<html lang="<?php echo pll_current_language(); ?>">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<!-- 多语言适配：动态设置og标签 -->
<?php if (pll_current_language() == 'en') : ?>
<meta property="og:locale" content="en_US">
<?php else : ?>
<meta property="og:locale" content="zh_CN">
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!-- 导航栏（Bootstrap 5 响应式+多语言） -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?>
</a>
<!-- 移动端汉堡菜单 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="<?php pll_e('Toggle navigation'); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航菜单 -->
<div class="collapse navbar-collapse" id="navbarNav">
<?php
// 加载多语言导航菜单
wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav ms-auto',
'walker' => new Bootstrap_Navwalker(), // 适配Bootstrap样式（需新建该类）
));
?>
<!-- 多语言切换按钮 -->
<div class="nav-item ms-3">
<div class="btn-group">
<button type="button" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<?php echo pll_current_language('name'); ?>
</button>
<ul class="dropdown-menu">
<?php foreach (pll_the_languages(array('raw' => 1)) as $lang) : ?>
<li>
<a class="dropdown-item" href="<?php echo $lang['url']; ?>">
<?php echo $lang['name']; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- Bootstrap导航适配Walker类（添加到functions.php或单独文件） -->
<?php
class Bootstrap_Navwalker extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
$classes = empty($item->classes) ? array() : (array) $item->classes;
$classes[] = 'nav-item';
if ($args->walker->has_children) {
$classes[] = 'dropdown';
$output .= '<li class="' . esc_attr(implode(' ', $classes)) . '">';
$output .= '<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">' . apply_filters('the_title', $item->title, $item->ID) . '</a>';
} else {
$output .= '<li class="' . esc_attr(implode(' ', $classes)) . '">';
$output .= '<a class="nav-link" href="' . esc_url($item->url) . '">' . apply_filters('the_title', $item->title, $item->ID) . '</a>';
}
}
function start_lvl(&$output, $depth = 0, $args = null) {
$output .= '<ul class="dropdown-menu">';
}
function end_el(&$output, $item, $depth = 0, $args = null) {
$output .= '</li>';
}
function end_lvl(&$output, $depth = 0, $args = null) {
$output .= '</ul>';
}
}
?>3. footer.php（底部模板）
<!-- 页脚 -->
<footer class="bg-dark text-white py-5 mt-5">
<div class="container">
<div class="row">
<!-- 公司信息 -->
<div class="col-md-4 mb-4">
<h5 class="text-uppercase mb-3"><?php pll_e('About Us'); ?></h5>
<p><?php bloginfo('description'); ?></p>
<p><?php pll_e('Address'); ?>: 123 Main St, City, Country</p>
<p><?php pll_e('Phone'); ?>: +123 456 7890</p>
<p><?php pll_e('Email'); ?>: info@yourcompany.com</p>
</div>
<!-- 快速链接 -->
<div class="col-md-4 mb-4">
<h5 class="text-uppercase mb-3"><?php pll_e('Quick Links'); ?></h5>
<?php
wp_nav_menu(array(
'theme_location' => 'footer',
'container' => false,
'menu_class' => 'list-unstyled',
'walker' => new Walker_Nav_Menu_Footer(),
));
?>
</div>
<!-- 询盘入口 -->
<div class="col-md-4 mb-4">
<h5 class="text-uppercase mb-3"><?php pll_e('Send Inquiry'); ?></h5>
<a href="<?php echo get_permalink(get_page_by_path(pll__('contact'))); ?>" class="btn btn-primary w-100">
<?php pll_e('Contact Us'); ?>
</a>
<!-- 版权信息 -->
<div class="mt-4 text-muted">
© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. <?php pll_e('All rights reserved.'); ?>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer导航Walker -->
<?php
class Walker_Nav_Menu_Footer extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
$output .= '<li class="mb-2">';
$output .= '<a class="text-white text-decoration-none" href="' . esc_url($item->url) . '">' . apply_filters('the_title', $item->title, $item->ID) . '</a>';
}
function end_el(&$output, $item, $depth = 0, $args = null) {
$output .= '</li>';
}
}
?>
<?php wp_footer(); ?>
</body>
</html>二、核心页面模板
1. index.php（首页，含轮播+产品展示+动态效果）
<?php get_header(); ?>
<!-- 首页Banner轮播（Bootstrap 5） -->
<section class="carousel-section">
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<!-- 轮播图1 -->
<div class="carousel-item active">
<img src="<?php echo get_template_directory_uri(); ?>/images/banner1.jpg" class="d-block w-100" alt="<?php pll_e('Banner 1'); ?>">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4"><?php pll_e('High Quality Products'); ?></h5>
<p><?php pll_e('Export to global markets with competitive price'); ?></p>
<a href="<?php echo get_post_type_archive_link('product'); ?>" class="btn btn-primary btn-lg"><?php pll_e('View Products'); ?></a>
</div>
</div>
<!-- 轮播图2 -->
<div class="carousel-item">
<img src="<?php echo get_template_directory_uri(); ?>/images/banner2.jpg" class="d-block w-100" alt="<?php pll_e('Banner 2'); ?>">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4"><?php pll_e('Customized Solutions'); ?></h5>
<p><?php pll_e('Tailored to your business needs'); ?></p>
<a href="<?php echo get_permalink(get_page_by_path(pll__('contact'))); ?>" class="btn btn-primary btn-lg"><?php pll_e('Contact Us'); ?></a>
</div>
</div>
<!-- 轮播图3 -->
<div class="carousel-item">
<img src="<?php echo get_template_directory_uri(); ?>/images/banner3.jpg" class="d-block w-100" alt="<?php pll_e('Banner 3'); ?>">
<div class="carousel-caption d-none d-md-block">
<h5 class="display-4"><?php pll_e('Fast Delivery'); ?></h5>
<p><?php pll_e('On time, every time'); ?></p>
<a href="<?php echo get_permalink(get_page_by_path(pll__('about'))); ?>" class="btn btn-primary btn-lg"><?php pll_e('About Us'); ?></a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden"><?php pll_e('Previous'); ?></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden"><?php pll_e('Next'); ?></span>
</button>
</div>
</section>
<!-- 核心优势（带滚动动画） -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-5 section-title"><?php pll_e('Our Advantages'); ?></h2>
<div class="row g-4">
<div class="col-md-4 advantage-item">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center">
<i class="bi bi-award fs-1 text-primary mb-3"></i> <!-- 需引入Bootstrap Icons -->
<h5 class="card-title"><?php pll_e('High Quality'); ?></h5>
<p class="card-text"><?php pll_e('Strict quality control, ISO certified products'); ?></p>
</div>
</div>
</div>
<div class="col-md-4 advantage-item">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center">
<i class="bi bi-currency-dollar fs-1 text-primary mb-3"></i>
<h5 class="card-title"><?php pll_e('Competitive Price'); ?></h5>
<p class="card-text"><?php pll_e('Factory direct sales, no middleman markup'); ?></p>
</div>
</div>
</div>
<div class="col-md-4 advantage-item">
<div class="card h-100 shadow-sm border-0">
<div class="card-body text-center">
<i class="bi bi-truck fs-1 text-primary mb-3"></i>
<h5 class="card-title"><?php pll_e('Fast Delivery'); ?></h5>
<p class="card-text"><?php pll_e('7-15 days delivery for regular orders'); ?></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 热门产品展示 -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-5 section-title"><?php pll_e('Hot Products'); ?></h2>
<div class="row g-4">
<?php
// 查询热门产品（前8个）
$hot_products = get_products(array('posts_per_page' => 8));
foreach ($hot_products as $product) :
?>
<div class="col-md-3 product-item">
<div class="card h-100 shadow-sm overflow-hidden">
<?php if ($product->thumbnail) : ?>
<img src="<?php echo esc_url($product->thumbnail); ?>" class="card-img-top" alt="<?php echo esc_attr($product->title); ?>">
<?php endif; ?>
<div class="card-body">
<h5 class="card-title"><?php echo esc_html($product->title); ?></h5>
<p class="card-text">
<strong><?php pll_e('Price'); ?>:</strong> $<?php echo esc_html($product->price); ?><br>
<strong><?php pll_e('MOQ'); ?>:</strong> <?php echo esc_html($product->moq); ?>
</p>
<a href="<?php echo esc_url($product->permalink); ?>" class="btn btn-outline-primary w-100"><?php pll_e('View Details'); ?></a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="text-center mt-5">
<a href="<?php echo get_post_type_archive_link('product'); ?>" class="btn btn-primary"><?php pll_e('View All Products'); ?></a>
</div>
</div>
</section>
<?php get_footer(); ?>2. archive-product.php（产品列表页）
<?php get_header(); ?>
<!-- 产品列表页 -->
<section class="py-5">
<div class="container">
<h1 class="mb-5"><?php pll_e('Our Products'); ?></h1>
<!-- 产品分类筛选 -->
<div class="mb-4">
<div class="btn-group flex-wrap" role="group">
<a href="<?php echo get_post_type_archive_link('product'); ?>" class="btn btn-primary"><?php pll_e('All Products'); ?></a>
<?php
// 获取所有产品分类
$categories = get_terms(array(
'taxonomy' => 'product_category',
'hide_empty' => true,
));
foreach ($categories as $category) :
?>
<a href="<?php echo get_term_link($category); ?>" class="btn btn-outline-primary">
<?php echo esc_html($category->name); ?>
</a>
<?php endforeach; ?>
</div>
</div>
<!-- 产品列表 -->
<div class="row g-4">
<?php
$products = get_products(array('posts_per_page' => -1)); // 显示所有产品，可分页
if (empty($products)) :
?>
<div class="col-12 text-center">
<p><?php pll_e('No products found'); ?></p>
</div>
<?php else : ?>
<?php foreach ($products as $product) : ?>
<div class="col-md-3 product-item">
<div class="card h-100 shadow-sm overflow-hidden">
<?php if ($product->thumbnail) : ?>
<img src="<?php echo esc_url($product->thumbnail); ?>" class="card-img-top" alt="<?php echo esc_attr($product->title); ?>">
<?php endif; ?>
<div class="card-body">
<h5 class="card-title"><?php echo esc_html($product->title); ?></h5>
<p class="card-text">
<strong><?php pll_e('SKU'); ?>:</strong> <?php echo esc_html($product->sku); ?><br>
<strong><?php pll_e('Price'); ?>:</strong> $<?php echo esc_html($product->price); ?><br>
<strong><?php pll_e('MOQ'); ?>:</strong> <?php echo esc_html($product->moq); ?>
</p>
<a href="<?php echo esc_url($product->permalink); ?>" class="btn btn-outline-primary w-100"><?php pll_e('View Details'); ?></a>
</div>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</section>
<?php get_footer(); ?>3. single-product.php（产品详情页）
<?php get_header(); ?>
<!-- 产品详情页 -->
<section class="py-5">
<div class="container">
<?php
$product = get_products(array(
'p' => get_the_ID(),
'posts_per_page' => 1,
))[0]; // 获取当前产品数据
?>
<div class="row">
<!-- 产品图片 -->
<div class="col-md-6">
<div class="product-gallery">
<img src="<?php echo esc_url($product->thumbnail); ?>" class="img-fluid rounded shadow-sm" alt="<?php echo esc_attr($product->title); ?>">
<!-- 产品图册（可扩展多图） -->
<div class="row mt-3 g-2">
<div class="col-3">
<img src="<?php echo esc_url($product->thumbnail); ?>" class="img-fluid rounded-2 thumbnail-item" alt="<?php echo esc_attr($product->title); ?>">
</div>
<!-- 可添加更多缩略图 -->
</div>
</div>
</div>
<!-- 产品信息 -->
<div class="col-md-6">
<h1 class="mb-3"><?php echo esc_html($product->title); ?></h1>
<p class="text-muted"><?php echo esc_html(implode(', ', $product->category)); ?></p>
<div class="product-info mb-4">
<div class="row mb-2">
<div class="col-md-4 fw-bold"><?php pll_e('SKU'); ?>:</div>
<div class="col-md-8"><?php echo esc_html($product->sku); ?></div>
</div>
<div class="row mb-2">
<div class="col-md-4 fw-bold"><?php pll_e('Price (USD)'); ?>:</div>
<div class="col-md-8">$<?php echo esc_html($product->price); ?></div>
</div>
<div class="row mb-2">
<div class="col-md-4 fw-bold"><?php pll_e('MOQ'); ?>:</div>
<div class="col-md-8"><?php echo esc_html($product->moq); ?></div>
</div>
<div class="row mb-2">
<div class="col-md-4 fw-bold"><?php pll_e('Specifications'); ?>:</div>
<div class="col-md-8">
<?php
// 拆分中英规格（按行分隔）
$specs = explode("\n", $product->specs);
if (pll_current_language() == 'en' && isset($specs[1])) {
echo nl2br(esc_html($specs[1]));
} else {
echo nl2br(esc_html($specs[0]));
}
?>
</div>
</div>
</div>
<!-- 询盘按钮（跳转至联系页，自动填充产品名称） -->
<a href="<?php echo add_query_arg('product', $product->title, get_permalink(get_page_by_path(pll__('contact')))); ?>" class="btn btn-primary btn-lg">
<?php pll_e('Send Inquiry for This Product'); ?>
</a>
</div>
</div>
<!-- 产品详情描述 -->
<div class="row mt-5">
<div class="col-12">
<h3 class="mb-3"><?php pll_e('Product Description'); ?></h3>
<div class="product-description bg-light p-4 rounded shadow-sm">
<?php the_content(); ?>
</div>
</div>
</div>
<!-- 相关产品 -->
<div class="row mt-5">
<div class="col-12">
<h3 class="mb-3"><?php pll_e('Related Products'); ?></h3>
<div class="row g-4">
<?php
// 查询同分类的相关产品（排除当前产品）
$related_products = get_products(array(
'post__not_in' => array(get_the_ID()),
'tax_query' => array(
array(
'taxonomy' => 'product_category',
'field' => 'term_id',
'terms' => wp_get_post_terms(get_the_ID(), 'product_category', array('fields' => 'ids')),
)
),
'posts_per_page' => 4,
));
foreach ($related_products as $related) :
?>
<div class="col-md-3">
<div class="card h-100 shadow-sm">
<img src="<?php echo esc_url($related->thumbnail); ?>" class="card-img-top" alt="<?php echo esc_attr($related->title); ?>">
<div class="card-body">
<h5 class="card-title"><?php echo esc_html($related->title); ?></h5>
<a href="<?php echo esc_url($related->permalink); ?>" class="btn btn-outline-primary w-100"><?php pll_e('View Details'); ?></a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>4. page-contact.php（联系页，含询盘表单）
<?php get_header(); ?>
<!-- 联系页+询盘表单 -->
<section class="py-5">
<div class="container">
<h1 class="mb-5"><?php pll_e('Contact Us'); ?></h1>
<div class="row">
<!-- 联系信息 -->
<div class="col-md-5 mb-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body">
<h5 class="card-title mb-4"><?php pll_e('Contact Information'); ?></h5>
<ul class="list-unstyled mb-4">
<li class="mb-3">
<i class="bi bi-geo-alt text-primary me-2"></i>
<strong><?php pll_e('Address'); ?>:</strong> 123 Main St, City, Country
</li>
<li class="mb-3">
<i class="bi bi-telephone text-primary me-2"></i>
<strong><?php pll_e('Phone'); ?>:</strong> +123 456 7890
</li>
<li class="mb-3">
<i class="bi bi-envelope text-primary me-2"></i>
<strong><?php pll_e('Email'); ?>:</strong> info@yourcompany.com
</li>
<li class="mb-3">
<i class="bi bi-clock text-primary me-2"></i>
<strong><?php pll_e('Working Hours'); ?>:</strong> 9:00 - 18:00 (Mon-Fri)
</li>
</ul>
<!-- 地图（可选） -->
<div class="map-container mb-3">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.0000000000005!2d-74.00601588428956!3d40.71277598033703!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a22a3bda30d%3A0xb89d1fe6bc499443!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1710000000000!5m2!1sen!2s" width="100%" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</div>
<!-- 询盘表单（Contact Form 7） -->
<div class="col-md-7">
<div class="card h-100 shadow-sm border-0">
<div class="card-body">
<h5 class="card-title mb-4"><?php pll_e('Send Us an Inquiry'); ?></h5>
<?php
// 获取CF7表单短代码（需先在后台创建表单）
$form_shortcode = '[contact-form-7 id="123" title="Inquiry Form"]'; // 替换为你的表单ID
echo do_shortcode($form_shortcode);
?>
</div>
</div>
</div>
</div>
</div>
</section>
<?php get_footer(); ?>三、自定义JS（动态效果，js/custom.js）
// 自定义JS：滚动动画+产品图片预览+数字统计
document.addEventListener('DOMContentLoaded', function() {
// 1. 滚动动画（元素进入视口时渐显）
const animateOnScroll = function() {
const elements = document.querySelectorAll('.advantage-item, .product-item, .section-title');
elements.forEach(el => {
const rect = el.getBoundingClientRect();
const isInViewport = rect.top < window.innerHeight - 100 && rect.bottom > 0;
if (isInViewport) {
el.style.opacity = '1';
el.style.transform = 'translateY(0)';
}
});
};
// 初始化样式
document.querySelectorAll('.advantage-item, .product-item').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
});
// 监听滚动
window.addEventListener('scroll', animateOnScroll);
animateOnScroll(); // 初始执行
// 2. 产品图片预览（点击缩略图切换大图）
const thumbnailItems = document.querySelectorAll('.thumbnail-item');
thumbnailItems.forEach(item => {
item.addEventListener('click', function() {
const productGallery = document.querySelector('.product-gallery img:first-child');
productGallery.src = this.src;
productGallery.alt = this.alt;
});
});
// 3. 数字统计动画（首页核心数据）
const countUp = function(el, target, duration = 2000) {
let start = 0;
const increment = target / (duration / 16);
const timer = setInterval(() => {
start += increment;
el.textContent = Math.floor(start);
if (start >= target) {
el.textContent = target;
clearInterval(timer);
}
}, 16);
};
// 触发数字统计（元素进入视口时）
const statsItems = document.querySelectorAll('.stat-number');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const target = parseInt(entry.target.dataset.target);
countUp(entry.target, target);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
statsItems.forEach(item => observer.observe(item));
});四、关键说明
1. 使用前准备
- 将代码按文件路径放入 Underscores 主题（
wp-content/themes/your-theme/）； 在 WordPress 后台：
- 激活 Polylang，添加中英双语，设置 URL 前缀（/cn/、/en/）；
- 创建 Contact Form 7 表单，替换
page-contact.php中的短代码 ID； - 注册导航菜单（primary、footer），配置双语菜单；
- 创建
images文件夹，放入轮播图等静态图片； 引入 Bootstrap Icons（在 header.php 中添加 CDN）：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
2. 核心适配点
- 所有文本均用
pll_e()/pll__()包裹，适配 Polylang 多语言； - 产品数据通过封装的
get_products()函数调用，简化模板逻辑； - 动态效果均用原生 JS 实现，无 jQuery 冗余；
- 所有样式基于 Bootstrap 5，无需额外美化插件。
3. 精简优化
- 可删除非必要动态效果（如数字统计），进一步提升速度；
- 产品列表页可添加分页（修改
get_products()函数的posts_per_page+ 分页代码）； - 图片建议用 WebP 格式，配合 LiteSpeed Cache 自动压缩。
需要我补充Contact Form 7 询盘表单的具体配置代码，或多语言静态文本的批量管理方案吗？
（豆包）