{"id":2187,"date":"2025-06-10T22:41:47","date_gmt":"2025-06-10T14:41:47","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/wpcms\/wpdt\/2187.html"},"modified":"2025-06-10T22:41:47","modified_gmt":"2025-06-10T14:41:47","slug":"%e5%a6%82%e4%bd%95%e5%9c%a8-wordpress-%e4%b8%ad%e6%98%be%e7%a4%ba%e8%90%a5%e5%85%bb%e6%88%90%e5%88%86%e6%a0%87%e7%ad%be","status":"publish","type":"post","link":"https:\/\/www.zhaozhao123.cn\/wpcms\/post\/2187.html","title":{"rendered":"\u5982\u4f55\u5728 WordPress \u4e2d\u663e\u793a\u8425\u517b\u6210\u5206\u6807\u7b7e"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n

\r\n
\r\n

在 WordPress 中显示营养成分标签（Nutrition Facts）通常涉及以下几个步骤：首先，你需要确定你希望展示的食品或产品的营养信息；其次，你需要找到一个能够提供这些信息的API；然后，你需要编写适当的代码来从这个API获取数据并将其嵌入到你的网站上；最后，确保你的网站兼容各种浏览器和设备。<\/p>\n

步骤 1: 确定营养信息来源<\/h3>\n

首先，你需要确定一个能够提供食品或产品营养信息的API。例如，你可以选择使用Google Nutrition API、Nutritionix API或其他类似的API。为了简化过程，这里我们将使用Google Nutrition API作为示例。<\/p>\n

步骤 2: 创建项目文件夹<\/h3>\n

在你的 WordPress 主目录下创建一个新的子文件夹，用于存放所有与营养信息相关的代码和文件。<\/p>\n

mkdir \/wp-content\/plugins\/nutrition-facts\/<\/code><\/pre>\n
步骤 3: 安装 Google Nutrition API 插件<\/h3>\n
    \n
  1. 登录到您的 WordPress 后台。<\/li>\n
  2. 找到“插件”部分，点击“添加新插件”。<\/li>\n
  3. 在搜索框中输入“Google Nutrition API”，然后按回车键搜索。<\/li>\n
  4. 选择合适的插件安装并激活它。<\/li>\n<\/ol>\n
    步骤 4: 编写 PHP 脚本以调用 API<\/h3>\n
    接下来，我们需要编写一个简单的 PHP 脚本来调用 Google Nutrition API 并返回所需的营养信息。<\/p>\n
    <?php\n\/\/ 设置 API URL 和查询参数\n$url = 'https:\/\/api.nutritionix.com\/v1_0\/foods\/search\/' . urlencode($query) . '?appId=YOUR_APP_ID&appKey=YOUR_APP_KEY';\n$response = file_get_contents($url);\n\n\/\/ 解析 JSON 响应\n$data = json_decode($response, true);\n?><\/code><\/pre>\n
    请注意，你需要替换 YOUR_APP_ID<\/code> 和 YOUR_APP_KEY<\/code> 为你的实际应用ID和应用密钥。<\/p>\n
    步骤 5: 将营养信息插入到页面或帖子<\/h3>\n
    一旦你有了营养信息的数据，你可以通过以下方式将其插入到你的 WordPress 页面或帖子中：<\/p>\n
    示例代码：<\/h4>\n
    <?php\n$nutrition_data = array(\n    \"foodName\" => \"Example Food\",\n    \"calories\" => \"200\",\n    \"carbs\" => \"30g\",\n    \"protein\" => \"8g\",\n    \"fat\" => \"10g\"\n);\n\necho '<div class=\"nutrition-info\">';\nforeach ($nutrition_data as $key => $value) {\n    echo \"<h3>$key:<\/h3>\";\n    echo \"<span>$value<\/span><br>\";\n}\necho '<\/div>';\n?><\/code><\/pre>\n
    在这个例子中，我们假设有一个数组 $nutrition_data<\/code> 包含了食品名称、卡路里、碳水化合物、蛋白质和脂肪等信息。<\/p>\n
    步骤 6: 测试和优化<\/h3>\n