文章目录[隐藏]
实操指南:优化WordPress跨境电商站点的7个高效方法
引言:为什么跨境电商站点需要专业优化?
在当今全球电商竞争激烈的环境中,一个普通的WordPress网站已无法满足跨境电商的需求。据统计,网站加载时间每延迟1秒,转化率就会下降7%;而移动端用户体验不佳的网站,其跳出率高达58%。对于跨境电商而言,这些问题会被进一步放大——不同地区的网络环境、支付习惯和文化差异都会影响用户体验和最终转化。
WordPress作为全球最流行的内容管理系统,为跨境电商提供了强大的基础框架。然而,默认设置往往无法满足高性能电商站点的需求。本文将从代码开发角度,为行业新人和程序员提供7个高效优化方法,帮助您打造一个快速、安全、高转化的跨境电商平台。
方法一:深度优化数据库结构与查询效率
1.1 清理和优化WooCommerce数据库
WooCommerce是WordPress最流行的电商插件,但随着时间推移,其数据库会积累大量冗余数据。执行以下SQL查询可以清理过期会话数据:
-- 清理WooCommerce过期会话
DELETE FROM wp_woocommerce_sessions WHERE session_expiry < UNIX_TIMESTAMP();
-- 优化订单元数据表
DELETE FROM wp_woocommerce_order_itemmeta WHERE meta_key LIKE '%_tmp%';
1.2 创建自定义数据库索引
为频繁查询的字段添加索引可以显著提升查询速度:
// 在主题的functions.php中添加数据库优化功能
function optimize_ecommerce_tables() {
global $wpdb;
// 为订单查询添加复合索引
$index_queries = array(
"ALTER TABLE {$wpdb->prefix}wc_orders ADD INDEX idx_status_date (status, date_created_gmt)",
"ALTER TABLE {$wpdb->prefix}wc_order_product_lookup ADD INDEX idx_product_date (product_id, date_created)",
"ALTER TABLE {$wpdb->prefix}wc_order_stats ADD INDEX idx_customer_status (customer_id, status)"
);
foreach ($index_queries as $query) {
$wpdb->query($query);
}
}
add_action('after_switch_theme', 'optimize_ecommerce_tables');
1.3 实现高效的产品查询缓存
对于产品目录页面,实现对象缓存可以大幅减少数据库查询:
class Product_Query_Cache {
private $cache_group = 'ecommerce_products';
private $cache_expiration = 3600; // 1小时
public function get_products_by_category($category_id, $page = 1, $per_page = 12) {
$cache_key = 'products_cat_' . $category_id . '_page_' . $page;
$products = wp_cache_get($cache_key, $this->cache_group);
if (false === $products) {
$args = array(
'post_type' => 'product',
'posts_per_page' => $per_page,
'paged' => $page,
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => $category_id
)
),
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock',
'compare' => '='
)
)
);
$products = new WP_Query($args);
wp_cache_set($cache_key, $products, $this->cache_group, $this->cache_expiration);
}
return $products;
}
}
方法二:实现智能延迟加载与图像优化
2.1 自定义延迟加载实现
虽然WordPress 5.5+已内置延迟加载,但针对电商产品图可以进一步优化:
// 自定义电商图像延迟加载
class Ecommerce_Lazy_Load {
public function __construct() {
add_filter('wp_get_attachment_image_attributes', array($this, 'add_lazy_loading'), 10, 3);
add_action('wp_footer', array($this, 'add_intersection_observer'));
}
public function add_lazy_loading($attr, $attachment, $size) {
// 只在产品图和应用适的尺寸时启用延迟加载
if (is_product() || is_shop() || is_product_category()) {
$attr['loading'] = 'lazy';
$attr['data-src'] = $attr['src'];
$attr['src'] = $this->get_placeholder_image();
$attr['class'] .= ' ecommerce-lazy-image';
}
return $attr;
}
private function get_placeholder_image() {
// 返回一个极小的base64占位图
return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2YyZjJmMiIvPjwvc3ZnPg==';
}
public function add_intersection_observer() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
if ('IntersectionObserver' in window) {
const lazyImages = document.querySelectorAll('.ecommerce-lazy-image');
const imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('ecommerce-lazy-image');
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach(function(img) {
imageObserver.observe(img);
});
}
});
</script>
<?php
}
}
new Ecommerce_Lazy_Load();
2.2 WebP格式自动转换与响应式图像
// 自动生成WebP格式并创建响应式图像标记
class WebP_Image_Optimizer {
public function generate_webp_and_responsive($image_id, $size = 'full') {
$image_url = wp_get_attachment_image_url($image_id, $size);
$image_meta = wp_get_attachment_metadata($image_id);
// 生成WebP版本
$webp_url = $this->convert_to_webp($image_url);
// 生成不同尺寸版本
$sizes = array('large', 'medium', 'thumbnail');
$srcset = array();
foreach ($sizes as $size_name) {
$size_url = wp_get_attachment_image_url($image_id, $size_name);
if ($size_url) {
$size_webp = $this->convert_to_webp($size_url);
$width = $image_meta['sizes'][$size_name]['width'] ?? '';
if ($width) {
$srcset[] = $size_webp . ' ' . $width . 'w';
}
}
}
return array(
'original' => $image_url,
'webp' => $webp_url,
'srcset' => implode(', ', $srcset),
'sizes' => '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
);
}
private function convert_to_webp($image_path) {
// 使用GD或Imagick库转换图像为WebP格式
// 这里简化实现,实际应包含完整的转换逻辑
$webp_path = preg_replace('/.(jpg|jpeg|png)$/i', '.webp', $image_path);
// 如果WebP文件不存在,则创建
if (!file_exists($webp_path)) {
// 图像转换逻辑
// imagewebp($image, $webp_path, 80);
}
return $webp_path;
}
}
方法三:构建高效的产品筛选与搜索系统
3.1 实现AJAX实时搜索
// AJAX产品搜索功能
class Ajax_Product_Search {
public function __construct() {
add_action('wp_ajax_product_search', array($this, 'handle_search'));
add_action('wp_ajax_nopriv_product_search', array($this, 'handle_search'));
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
}
public function enqueue_scripts() {
wp_enqueue_script('ecommerce-search', get_template_directory_uri() . '/js/search.js', array('jquery'), '1.0', true);
wp_localize_script('ecommerce-search', 'ecommerce_ajax', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('product_search_nonce')
));
}
public function handle_search() {
check_ajax_referer('product_search_nonce', 'nonce');
$search_term = sanitize_text_field($_POST['search_term']);
$category = isset($_POST['category']) ? intval($_POST['category']) : 0;
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
's' => $search_term,
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => '_stock_status',
'value' => 'instock',
'compare' => '='
)
)
);
if ($category > 0) {
$args['tax_query'] = array(
array(
'taxonomy' => 'product_cat',
'field' => 'term_id',
'terms' => $category
)
);
}
$query = new WP_Query($args);
$results = array();
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$product = wc_get_product(get_the_ID());
$results[] = array(
'id' => get_the_ID(),
'title' => get_the_title(),
'price' => $product->get_price_html(),
'image' => get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'),
'url' => get_permalink(),
'sku' => $product->get_sku()
);
}
wp_reset_postdata();
}
wp_send_json_success($results);
}
}
new Ajax_Product_Search();
3.2 高级产品筛选器实现
// 多属性产品筛选器
class Advanced_Product_Filter {
private $filterable_attributes = array('pa_color', 'pa_size', 'pa_material');
public function __construct() {
add_shortcode('advanced_product_filter', array($this, 'render_filter'));
add_action('wp_ajax_filter_products', array($this, 'filter_products'));
add_action('wp_ajax_nopriv_filter_products', array($this, 'filter_products'));
}
public function render_filter() {
ob_start();
?>
<div class="advanced-product-filter">
<form id="product-filter-form">
<?php foreach ($this->filterable_attributes as $attribute) : ?>
<div class="filter-group">
<h4><?php echo $this->get_attribute_label($attribute); ?></h4>
<?php echo $this->render_attribute_options($attribute); ?>
</div>
<?php endforeach; ?>
<div class="price-filter">
<h4><?php _e('Price Range', 'textdomain'); ?></h4>
<input type="range" id="price-min" min="0" max="1000" value="0">
<input type="range" id="price-max" min="0" max="1000" value="1000">
<div class="price-display">
<span id="min-price-display">$0</span> -
<span id="max-price-display">$1000</span>
</div>
</div>
<button type="submit" class="filter-button"><?php _e('Apply Filters', 'textdomain'); ?></button>
</form>
<div id="filter-results" class="product-grid"></div>
<div id="filter-loading" style="display: none;"><?php _e('Loading...', 'textdomain'); ?></div>
</div>
<?php
return ob_get_clean();
}
private function render_attribute_options($attribute) {
$terms = get_terms(array(
'taxonomy' => $attribute,
'hide_empty' => true
));
$output = '<div class="attribute-options">';
foreach ($terms as $term) {
$output .= sprintf(
'<label><input type="checkbox" name="%s[]" value="%s"> %s</label>',
$attribute,
$term->slug,
$term->name
);
}
$output .= '</div>';
return $output;
}
public function filter_products() {
// 处理筛选逻辑并返回产品
$args = $this->build_filter_query($_POST);
$query = new WP_Query($args);
// 返回产品HTML
ob_start();
if ($query->have_posts()) {
while ($query->have_posts()) {
wc_get_template_part('content', 'product');
}
} else {
echo '<p>' . __('No products found', 'textdomain') . '</p>';
}
wp_reset_postdata();
wp_send_json_success(ob_get_clean());
}
}
new Advanced_Product_Filter();
方法四:优化结账流程与支付体验
4.1 简化的一页结账实现
// 自定义一页结账系统
class One_Page_Checkout {
public function __construct() {
add_action('template_redirect', array($this, 'redirect_to_checkout'));
add_filter('woocommerce_checkout_fields', array($this, 'simplify_checkout_fields'));
add_action('wp_enqueue_scripts', array($this, 'enqueue_checkout_scripts'));
}
public function redirect_to_checkout() {
if (is_cart() && !WC()->cart->is_empty()) {
wp_redirect(wc_get_checkout_url());
exit;
}
}
public function simplify_checkout_fields($fields) {
// 移除不必要的字段
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_2']);
unset($fields['shipping']['shipping_company']);
unset($fields['shipping']['shipping_address_2']);
// 简化字段标签和占位符
$fields['billing']['billing_first_name']['placeholder'] = __('First Name', 'textdomain');
$fields['billing']['billing_last_name']['placeholder'] = __('Last Name', 'textdomain');
return $fields;
}
public function enqueue_checkout_scripts() {
if (is_checkout()) {
wp_enqueue_script('one-page-checkout', get_template_directory_uri() . '/js/checkout.js', array('jquery', 'wc-checkout'), '1.0', true);
wp_localize_script('one-page-checkout', 'checkout_params', array(
'ajax_url' => admin_url('admin-ajax.php'),
'update_order_review_nonce' => wp_create_nonce('update-order-review'),
'apply_coupon_nonce' => wp_create_nonce('apply-coupon')
));
}
}
// AJAX更新购物车
public function ajax_update_cart() {
check_ajax_referer('update-cart', 'security');
$cart_item_key = sanitize_text_field($_POST['cart_item_key']);
$quantity = intval($_POST['quantity']);
if ($quantity > 0) {
WC()->cart->set_quantity($cart_item_key, $quantity);
} elseif ($quantity === 0) {
WC()->cart->remove_cart_item($cart_item_key);
}
wp_send_json_success(array(
'subtotal' => WC()->cart->get_cart_subtotal(),
'total' => WC()->cart->get_total(),
'item_count' => WC()->cart->get_cart_contents_count()
));
}
}
new One_Page_Checkout();
4.2 多货币与国际化支付集成
// 多货币支持与动态汇率
class Multi_Currency_Support {
private $currencies = array(
'USD' => array('symbol' => '$', 'rate' => 1.0),
'EUR' => array('symbol' => '€', 'rate' => 0.85),
'GBP' => array('symbol' => '£', 'rate' => 0.73),
'JPY' => array('symbol' => '¥', 'rate' => 110.0)
);
public function __construct() {
add_filter('woocommerce_currency', array($this, 'set_currency'));
add_filter('woocommerce_price_format', array($this, 'currency_format'));
add_action('wp_ajax_update_currency', array($this, 'update_currency'));
add_action('wp_ajax_nopriv_update_currency', array($this, 'update_currency'));
add_action('wp_enqueue_scripts', array($this, 'enqueue_currency_scripts'));
}
public function set_currency($currency) {
$selected_currency = $this->get_user_currency();
return $selected_currency ?: $currency;
}
public function currency_format($format) {
$currency = $this->get_user_currency();
$symbol = $this->currencies[$currency]['symbol'] ?? '$';
switch ($currency) {
case 'USD':
case 'CAD':
case 'AUD':
$format = '%1$s%2$s'; // 符号在前
break;
case 'EUR':
$format = '%2$s %1$s'; // 符号在后,有空格
break;
case 'JPY':
case 'CNY':
$format = '%1$s%2$s'; // 符号在前,无小数
break;
}
return $format;
}
public function update_currency() {
check_ajax_referer('update_currency_nonce', 'nonce');
$currency = sanitize_text_field($_POST['currency']);
if (array_key_exists($currency, $this->currencies)) {
// 设置cookie或session存储用户选择的货币
setcookie('user_currency', $currency, time() + (30 * DAY_IN_SECONDS), COOKIEPATH, COOKIE_DOMAIN);
// 更新汇率(这里可以调用外部API获取实时汇率)
$this->update_exchange_rates();
wp_send_json_success(array(
'message' => __('Currency updated successfully', 'textdomain'),
'currency' => $currency
));
}
wp_send_json_error(__('Invalid currency', 'textdomain'));
}
private function update_exchange_rates() {
// 调用外部API获取实时汇率
$api_url = 'https://api.exchangerate-api.com/v4/latest/USD';
$response = wp_remote_get($api_url);
if (!is_wp_error($response)) {
$rates = json_decode(wp_remote_retrieve_body($response), true);
if (isset($rates['rates'])) {
update_option('ecommerce_exchange_rates', $rates['rates'], 'no');
}
}
}
public function enqueue_currency_scripts() {
wp_enqueue_script('multi-currency', get_template_directory_uri() . '/js/currency.js', array('jquery'), '1.0', true);
wp_localize_script('multi-currency', 'currency_params', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('update_currency_nonce'),
'current_currency' => $this->get_user_currency()
));
}
private function get_user_currency() {
// 从cookie、session或用户meta获取用户选择的货币
if (isset($_COOKIE['user_currency'])) {
return $_COOKIE['user_currency'];
}
// 根据用户IP地址猜测货币
$country = $this->get_user_country_by_ip();
return $this->get_currency_by_country($country);
}
}
new Multi_Currency_Support();
方法五:实现智能缓存与CDN集成
5.1 高级对象缓存实现
// 基于Redis的高级缓存系统
class Advanced_Object_Cache {
private $redis;
private $cache_prefix = 'wp_ecommerce_';
private $default_expire = 3600; // 1小时
public function __construct() {
if (class_exists('Redis')) {
$this->redis = new Redis();
$this->connect_redis();
}
add_action('save_post_product', array($this, 'clear_product_cache'), 10, 3);
add_action('woocommerce_update_product', array($this, 'clear_product_cache'));
}
private function connect_redis() {
try {
$this->redis->connect('127.0.0.1', 6379, 2.5);
$this->redis->setOption(Redis::OPT_SERIALIZER, Redis::SERIALIZER_PHP);
} catch (Exception $e) {
error_log('Redis连接失败: ' . $e->getMessage());
}
}
public function get_product_data($product_id) {
$cache_key = $this->cache_prefix . 'product_' . $product_id;
if ($this->redis && $this->redis->exists($cache_key)) {
return $this->redis->get($cache_key);
}
// 缓存未命中,从数据库获取
$product = wc_get_product($product_id);
$product_data = array(
'id' => $product_id,
'title' => $product->get_name(),
'price' => $product->get_price(),
'sale_price' => $product->get_sale_price(),
'stock' => $product->get_stock_quantity(),
'rating' => $product->get_average_rating(),
'attributes' => $product->get_attributes()
);
if ($this->redis) {
$this->redis->setex($cache_key, $this->default_expire, $product_data);
}
return $product_data;
}
public function clear_product_cache($product_id, $post = null, $update = true) {
if ($this->redis) {
// 清除单个产品缓存
$this->redis->del($this->cache_prefix . 'product_' . $product_id);
// 清除相关分类缓存
$categories = wp_get_post_terms($product_id, 'product_cat');
foreach ($categories as $category) {
$this->redis->del($this->cache_prefix . 'category_' . $category->term_id);
}
// 清除产品列表页缓存
$this->clear_pagination_cache();
}
}
private function clear_pagination_cache() {
// 清除所有分页缓存
$keys = $this->redis->keys($this->cache_prefix . 'page_*');
foreach ($keys as $key) {
$this->redis->del($key);
}
}
// 批量获取产品数据,减少Redis请求次数
public function get_multiple_products($product_ids) {
if (!$this->redis) {
return $this->get_products_from_db($product_ids);
}
$cache_keys = array_map(function($id) {
return $this->cache_prefix . 'product_' . $id;
}, $product_ids);
$cached_data = $this->redis->mget($cache_keys);
$result = array();
$missing_ids = array();
foreach ($product_ids as $index => $product_id) {
if ($cached_data[$index] !== false) {
$result[$product_id] = $cached_data[$index];
} else {
$missing_ids[] = $product_id;
}
}
if (!empty($missing_ids)) {
$db_data = $this->get_products_from_db($missing_ids);
$result = array_merge($result, $db_data);
// 将新获取的数据存入缓存
$pipeline = $this->redis->pipeline();
foreach ($db_data as $product_id => $data) {
$pipeline->setex(
$this->cache_prefix . 'product_' . $product_id,
$this->default_expire,
$data
);
}
$pipeline->exec();
}
return $result;
}
}
new Advanced_Object_Cache();
5.2 CDN动态资源处理
// CDN集成与动态资源管理
class CDN_Integration {
private $cdn_domain = 'https://cdn.yourdomain.com';
private $local_domain;
public function __construct() {
$this->local_domain = site_url();
add_filter('wp_get_attachment_url', array($this, 'replace_with_cdn'), 10, 2);
add_filter('style_loader_src', array($this, 'replace_css_with_cdn'), 10, 2);
add_filter('script_loader_src', array($this, 'replace_js_with_cdn'), 10, 2);
add_action('wp_head', array($this, 'add_preconnect_tags'), 1);
}
public function replace_with_cdn($url, $post_id) {
// 只处理媒体库中的图片
if (false === strpos($url, 'wp-content/uploads')) {
return $url;
}
// 替换域名
$cdn_url = str_replace($this->local_domain, $this->cdn_domain, $url);
// 添加WebP支持
if ($this->should_serve_webp()) {
$cdn_url = $this->convert_to_webp_url($cdn_url);
}
return $cdn_url;
}
private function should_serve_webp() {
// 检查浏览器是否支持WebP
if (isset($_SERVER['HTTP_ACCEPT']) &&
strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
return true;
}
return false;
}
private function convert_to_webp_url($url) {
// 将图片URL转换为WebP格式
$pathinfo = pathinfo($url);
if (in_array(strtolower($pathinfo['extension']), array('jpg', 'jpeg', 'png'))) {
return $pathinfo['dirname'] . '/' . $pathinfo['filename'] . '.webp';
}
return $url;
}
public function add_preconnect_tags() {
echo '<link rel="preconnect" href="' . esc_url($this->cdn_domain) . '" crossorigin>';
echo '<link rel="dns-prefetch" href="' . esc_url($this->cdn_domain) . '">';
// 预加载关键资源
if (is_product()) {
echo '<link rel="preload" href="' . esc_url(get_template_directory_uri() . '/js/product-gallery.js') . '" as="script">';
echo '<link rel="preload" href="' . esc_url(get_template_directory_uri() . '/css/product.css') . '" as="style">';
}
}
// 生成CDN友好的资源版本号
public function add_resource_version($src) {
if (strpos($src, $this->cdn_domain) !== false) {
$file_path = str_replace($this->cdn_domain, ABSPATH, $src);
if (file_exists($file_path)) {
$version = filemtime($file_path);
$src = add_query_arg('ver', $version, $src);
}
}
return $src;
}
// 异步加载非关键CSS
public function async_css($html, $handle) {
$async_styles = array('woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general');
if (in_array($handle, $async_styles)) {
return str_replace("media='all'", "media='print' onload="this.media='all'"", $html);
}
return $html;
}
}
new CDN_Integration();
方法六:移动端优先的响应式优化
6.1 触摸友好的交互组件
// 移动端优化的触摸交互
class Mobile_Touch_Optimization {
public function __construct() {
add_action('wp_enqueue_scripts', array($this, 'enqueue_touch_scripts'));
add_filter('body_class', array($this, 'add_touch_body_class'));
add_action('wp_footer', array($this, 'add_touch_detection'));
}
public function enqueue_touch_scripts() {
// 检测移动设备
if (wp_is_mobile()) {
wp_enqueue_script('hammer-js', 'https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js', array(), '2.0.8', true);
wp_enqueue_script('mobile-touch', get_template_directory_uri() . '/js/mobile-touch.js', array('jquery', 'hammer-js'), '1.0', true);
// 移动端特定样式
wp_enqueue_style('mobile-commerce', get_template_directory_uri() . '/css/mobile-commerce.css', array(), '1.0');
}
}
public function add_touch_body_class($classes) {
if (wp_is_mobile()) {
$classes[] = 'is-touch-device';
$classes[] = 'mobile-commerce';
}
return $classes;
}
public function add_touch_detection() {
?>
<script>
// 检测触摸设备
document.addEventListener('DOMContentLoaded', function() {
const isTouchDevice = 'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
if (isTouchDevice) {
document.body.classList.add('touch-enabled');
// 优化产品图库的触摸交互
const productGallery = document.querySelector('.product-gallery');
if (productGallery) {
const hammer = new Hammer(productGallery);
// 左右滑动切换图片
hammer.on('swipeleft', function() {
const nextButton = productGallery.querySelector('.flex-next');
if (nextButton) nextButton.click();
});
hammer.on('swiperight', function() {
const prevButton = productGallery.querySelector('.flex-prev');
if (prevButton) prevButton.click();
});
// 双击放大图片
hammer.on('doubletap', function() {
const zoomImage = productGallery.querySelector('.zoomImg');
if (zoomImage) {
zoomImage.classList.toggle('zoomed');
}
});
}
// 优化产品筛选器的触摸体验
const filterButtons = document.querySelectorAll('.filter-button, .filter-option');
filterButtons.forEach(button => {
button.style.minHeight = '44px'; // Apple推荐的最小触摸目标尺寸
button.style.minWidth = '44px';
});
}
});
</script>
<?php
}
// 移动端特定的产品查询优化
public function optimize_mobile_queries($query_args) {
if (wp_is_mobile()) {
// 减少移动端加载的产品数量
$query_args['posts_per_page'] = 8;
// 优先显示有库存的产品
$query_args['meta_query'] = array(
array(
'key' => '_stock_status',
'value' => 'instock',
'compare' => '='
)
);
// 优化排序:移动端用户更关注热门和评价高的产品
$query_args['orderby'] = 'meta_value_num';
$query_args['meta_key'] = '_wc_average_rating';
$query_args['order'] = 'DESC';
}
return $query_args;
}
}
new Mobile_Touch_Optimization();
6.2 渐进式Web应用(PWA)功能
// WordPress电商PWA实现
class Ecommerce_PWA {
private $manifest_path = '/manifest.json';
private $service_worker_path = '/sw.js';
public function __construct() {
add_action('wp_head', array($this, 'add_manifest_link'));
add_action('wp_footer', array($this, 'register_service_worker'));
add_action('init', array($this, 'generate_manifest'));
add_action('save_post_product', array($this, 'update_offline_cache'));
}
public function add_manifest_link() {
echo '<link rel="manifest" href="' . esc_url(home_url($this->manifest_path)) . '">';
echo '<meta name="theme-color" content="#3367D6">';
echo '<meta name="apple-mobile-web-app-capable" content="yes">';
echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}
public function generate_manifest() {
if ($_SERVER['REQUEST_URI'] === $this->manifest_path) {
header('Content-Type: application/json');
$manifest = array(
'name' => get_bloginfo('name'),
'short_name' => substr(get_bloginfo('name'), 0, 12),
'description' => get_bloginfo('description'),
'start_url' => home_url('/'),
'display' => 'standalone',
'background_color' => '#ffffff',
'theme_color' => '#3367D6',
'orientation' => 'portrait',
'icons' => array(
array(
'src' => get_template_directory_uri() . '/images/icon-72x72.png',
'sizes' => '72x72',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-96x96.png',
'sizes' => '96x96',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-128x128.png',
'sizes' => '128x128',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-144x144.png',
'sizes' => '144x144',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-152x152.png',
'sizes' => '152x152',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-192x192.png',
'sizes' => '192x192',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-384x384.png',
'sizes' => '384x384',
'type' => 'image/png'
),
array(
'src' => get_template_directory_uri() . '/images/icon-512x512.png',
