如何通过自动更新的JSON文件生成WordPress餐厅菜单页面？

实现思路 #

通过WordPress短代码功能读取指定JSON菜单文件（本地/远程均可），解析数据后动态生成HTML菜单内容，同时加入缓存机制平衡实时性与性能。

具体步骤 #

1. 添加短代码函数到主题functions.php #

在当前激活主题的functions.php文件末尾插入以下代码：

function restaurant_menu_shortcode($atts) {
    // 提取短代码参数，默认指向主题根目录下的menu.json
    $atts = shortcode_atts(array(
        'json_url' => get_stylesheet_directory_uri() . '/menu.json',
    ), $atts);

    // 尝试从缓存读取已生成的菜单HTML
    $menu_cache_key = 'restaurant_menu_' . md5($atts['json_url']);
    $menu_html = wp_cache_get($menu_cache_key);

    if (!$menu_html) {
        // 读取JSON数据
        if (filter_var($atts['json_url'], FILTER_VALIDATE_URL)) {
            // 远程URL请求
            $response = wp_remote_get($atts['json_url']);
            if (is_wp_error($response)) {
                return '<p>菜单加载失败：无法连接数据源</p>';
            }
            $json_data = wp_remote_retrieve_body($response);
        } else {
            // 本地文件读取
            $local_path = ABSPATH . str_replace(get_site_url() . '/', '', $atts['json_url']);
            if (!file_exists($local_path)) {
                return '<p>菜单加载失败：本地文件不存在</p>';
            }
            $json_data = file_get_contents($local_path);
        }

        // 解析JSON格式
        $menu_data = json_decode($json_data, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            return '<p>菜单加载失败：JSON格式错误</p>';
        }

        // 生成菜单HTML结构
        $menu_html = '<div class="restaurant-menu">';
        // 餐厅名称
        $menu_html .= '<h1 class="restaurant-name">' . esc_html($menu_data['name']) . '</h1>';

        // 遍历菜单分类
        foreach ($menu_data['categories'] as $category) {
            $menu_html .= '<section class="menu-category" style="border-left: 4px solid ' . esc_attr($category['color']) . '">';
            $menu_html .= '<h2 class="category-title">' . esc_html($category['name']) . '</h2>';
            $menu_html .= '<div class="category-products">';

            // 遍历分类下的菜品
            foreach ($category['products'] as $product) {
                $menu_html .= '<div class="menu-product">';
                // 菜品图片（存在则显示）
                if (!empty($product['image']['medium'])) {
                    $menu_html .= '<img src="' . esc_url($product['image']['medium']) . '" alt="' . esc_attr($product['name']) . '" class="product-image">';
                }
                $menu_html .= '<div class="product-info">';
                $menu_html .= '<h3 class="product-name">' . esc_html($product['name']) . '</h3>';
                // 菜品描述（存在则显示）
                if (!empty($product['description'])) {
                    $menu_html .= '<p class="product-description">' . esc_html($product['description']) . '</p>';
                }
                // 价格格式化（默认转换为欧元，可自行修改）
                $menu_html .= '<span class="product-price">' . number_format($product['price'] / 100, 2) . ' €</span>';

                // 菜品可选配料/酱料
                if (!empty($product['options'])) {
                    $menu_html .= '<div class="product-options">';
                    foreach ($product['options'] as $option_group) {
                        $menu_html .= '<div class="option-group">';
                        $menu_html .= '<h4 class="group-title">' . esc_html($option_group['category']) . '</h4>';
                        $menu_html .= '<ul class="option-list">';
                        foreach ($option_group['products'] as $option) {
                            $menu_html .= '<li>' . esc_html($option['name']) . ' <span class="option-price">+' . number_format($option['price'] / 100, 2) . ' €</span></li>';
                        }
                        $menu_html .= '</ul>';
                        $menu_html .= '</div>';
                    }
                    $menu_html .= '</div>';
                }
                $menu_html .= '</div></div>';
            }

            $menu_html .= '</div></section>';
        }

        $menu_html .= '</div>';

        // 缓存菜单HTML，有效期5分钟（可自行调整秒数）
        wp_cache_set($menu_cache_key, $menu_html, '', 300);
    }

    return $menu_html;
}
add_shortcode('restaurant_menu', 'restaurant_menu_shortcode');

2. 部署JSON文件 #

• 本地文件：将你的菜单JSON文件命名为menu.json，上传到当前主题的根目录（与functions.php同级）。
• 远程文件：直接保留JSON文件的远程访问地址即可。

3. 在Menu页面调用短代码 #

编辑WordPress后台的「menu」页面，在内容区域插入短代码：

• 本地文件：[restaurant_menu]
• 远程文件：[restaurant_menu json_url="你的JSON文件远程地址"]

4. 添加自定义样式（可选） #

在主题的style.css文件中插入以下CSS，优化菜单视觉效果：

.restaurant-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
.restaurant-name {
    text-align: center;
    margin-bottom: 3rem;
    color: #333;
}
.menu-category {
    margin-bottom: 3rem;
    padding-left: 1rem;
}
.category-title {
    color: #222;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.category-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.menu-product {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}
.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.product-info {
    padding: 1.5rem;
}
.product-name {
    margin: 0 0 0.5rem;
    color: #333;
}
.product-description {
    color: #666;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}
.product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #e74c3c;
}
.product-options {
    margin-top: 1rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}
.group-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: #444;
}
.option-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.option-list li {
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: #555;
}
.option-price {
    color: #e74c3c;
    font-weight: normal;
}

注意事项 #

• 缓存调整：若需要更实时的菜单更新，可修改代码中wp_cache_set的最后一个参数（缓存有效期，单位秒）。
• 权限问题：本地JSON文件需确保WordPress有读取权限；远程URL需确保服务器允许对外请求。
• 货币格式：代码中默认将价格除以100并显示为欧元，可根据实际需求修改符号或小数位数。

内容的提问来源于stack exchange，提问作者tuffo19