WoodMart主题快速入门安装部署设置图文教程

WoodMart是一个功能强大的WordPress主题，但是其设置选项很多，很多新手刚开始接触WoodMart主题都不知道怎么办。其实WoodMart自带一个新手入门按钮，可以从初始安装和主题设置到自定义布局和创建您的第一个页面。非常适合初学者和经验丰富的用户切换到WoodMart。这里主题铺就分享一下WoodMart主题快速入门安装部署设置图文教程。

需求与 WordPress 设置

在安装 WoodMart 之前，您的托管环境必须满足特定要求并正确配置 WordPress。该主题需要 PHP 7.4 或更高版本、最新版本的 WordPress 以及 HTTPS 支持。如下

安装过程

将主题上传到 WordPress 网站有两种方法：WordPress 仪表板和 FTP。最推荐的方法是通过 WordPress 仪表板上传。

1. 要安装主题，请导航到 外观 -> 主题 -> 添加新主题 ：

2. 选择 woodmart.zip 文件，然后点击“立即安装”按钮开始安装。

3. 安装完成后，点击“激活”以在您的网站上启用该主题。

4. 激活后，您将看到我们的设置向导。

点击“开始使用”按钮，并依次完成每一步：

第一步。 许可证激活

立即激活您的许可证以启用自动更新，或跳过稍后手动激活。

如果选中“开发域”复选框，许可证将为测试网站激活。如果没有选中，它将按线上网站的方式激活。

可以从本站下载已激活版本

WoodMart完美中文版(更新到8.6.4)-多用途外贸企业WooCommerce WordPress主题下载

13天前

02817

第 2 步。 子主题

安装子主题可以安全地进行定制，而不会在主题更新时丢失更改。这样，您可以安全地更新父主题而不会丢失您的定制。使用“安装子主题”按钮来创建和激活子主题。

第 3 步。 页面构建器

选择您喜欢的页面构建器：Elementor、Gutenberg 或 WPBakery。然后点击“继续”进行下一步。演示内容将基于所选构建器。

第 4 步。 插件激活

为您的网站安装并激活必要的插件。您可以通过点击每个插件旁边的“安装”来单独安装插件，或者使用“全部安装并激活”一次性设置所有插件。

第 5 步。 现成网站

从一系列设计的网站模板中进行选择。该主题涵盖了所有类别的许多模板。您可以随时切换到任何演示，或者直接跳过此步骤。

第 6 步。 所有准备工作已完成

在演示内容成功导入后，将出现欢迎消息。从这里，您可以选择“开始自定义”来编辑您的网站，或选择“关闭并查看网站”来预览它。

现在您已成功安装主题，了解如何有效配置和管理它非常重要。让我们逐步了解关键功能，如页眉构建器、菜单创建、HTML 模块、页脚、字体排印、产品管理、布局构建器、我们的滑块和其他实用功能，以便您充分利用新网站并根据您的特定需求进行定制。

标题构建器

WoodMart 包含一个页眉构建器，允许您通过拖放功能轻松自定义网站的顶部区域。

拖放界面让您可以通过加号图标轻松添加新元素，在列之间重新排列它们，并实时自定义您的页眉。您可以使用可视化页眉构建器，在构建时即可在前端实时查看更改。

添加公司标志

要添加您的公司标志，只需在头部构建器中使用“标志”元素。此外，您还可以在这里找到标志尺寸的工作原理 。

菜单创建

菜单可以通过 外观 -> 菜单 -> 创建新菜单 创建：

此外，您还可以通过更改标题、设计和其他设置来修改从导入中获得的现有菜单。

页脚配置

该主题提供灵活的页脚定制选项，具有预定义的列布局，可自动在您的 WordPress 仪表盘中创建相应的部件区域。

此外，您还可以使用页面构建器通过 HTML 模块创建页脚：

字体设置

我们通过组织的字体组提供全面的排版控制。您可以通过 主题设置 -> 排版 自定义您的排版：

产品管理

一旦您的 WoodMart 主题设置完成，您需要将产品添加到您的商店。要开始将简单产品、可变产品、分组产品和外部产品添加到您的商店 。

对于可变产品，WoodMart 提供了增强的色板功能，将标准下拉菜单转换为视觉颜色、图像或文本色板。

高级布局构建器

WoodMart 包括一个自定义 WooCommerce 布局构建器功能，允许您使用 WPBakery、Elementor 和 Gutenberg 页面构建器为您的商店页面、单个产品、博客、单个博客、项目存档、单个项目、购物车、结账和感谢页面创建完全自定义的布局。您可以通过 仪表盘 -> 布局 添加布局，当点击“添加新”按钮时，您有导入预构建页面的能力：

内置滑块功能

WoodMart 主题在 仪表盘 -> 幻灯片 -> 滑块 中内置了滑块功能，允许您创建类似于 Revolution Slider 的简单而有效的滑块，但性能更佳且配置更简单。

可以从本站下载已激活版本

WoodMart完美中文版(更新到8.6.4)-多用途外贸企业WooCommerce WordPress主题下载

13天前

02817

如何优化WoodMart主题LCP

最大内容绘制 (LCP) 是三大核心网页指标之一，这是一组衡量网站用户体验的性能指标。LCP 衡量的是网页上最大的图片、文本块或视频对用户可见所需的时间。快速的 LCP 分数对于良好的用户体验至关重要，因为它表明页面正在快速加载，并提供了良好的第一印象。缓慢的 LCP 可能会导致用户离开您的网站。

为什么预加载 LCP 图片很重要？

有时，浏览器不会立即优先加载 LCP 元素，特别是如果它是一个不在初始 HTML 代码中的图像（例如，通过 CSS 加载）。这可能会延迟 LCP 并损害您网站的性能得分。

通过 预加载  LCP 图像，您是在告诉浏览器优先下载这张特定图像。这确保了页面上的最重要图像尽可能快地加载，从而可以显著提高您的 LCP 得分和整体页面速度。

如何使用此功能

首先，您需要进入 主题设置  →  性能  → LCP 并启用 预加载 LCP 图像  选项。此选项允许您自动或手动指定页面的 LCP 图像：

• 自动模式（推荐）： 默认情况下，主题将尝试自动检测每页上的最大图像并应用预加载属性。这是在不进行任何手动操作的情况下改善 LCP 的最简单方法。要自动检测图像，请导航到您的网站页面并点击管理栏中的“查找 LCP 图像”按钮。找到图像后，请按照相应下拉菜单中出现的说明进行操作。

• 手动模式： 如果您的图像未被自动检测到，或者您想要更改它，您可以使用页面元框手动设置。您可以在页面编辑器中找到这些元框，位于屏幕底部，在名为 页面设置（主题自定义元框） →  预加载图像 的部分。此部分包括图像上传选项、其大小及其类型。

如果图像未自动找到，该怎么办？

有时，在使用自动检测时，LCP 图片可能无法找到。这通常发生在页面上的最大图片在网站加载的前几秒钟不可见时。这种情况可能由多种原因引起，例如：

• 该图像具有一个初始值为 opacity: 0 的动画。
• 它位于一个未打开的选项卡内的选项卡部分中。
• 它位于轮播图的第二张幻灯片中。
• 它隐藏在一个关闭的 off-canvas 侧边栏中。

如果出现这种情况，尝试使图像可见——例如，通过暂时禁用其动画——然后再次运行检测。如果不起作用，最可靠的方法是使用页面元框手动设置图像，如上所述。

为什么我的页面缺少“查找 LCP 图片”按钮？

默认情况下，您只能为 “页面” 设置 LCP 图片。在所有其他帖子类型中，将不会出现“查找 LCP 图片”按钮和相应的元框。这里的“页面”并非指您网站上的所有页面；它特指 WordPress 的独特帖子类型“页面”，该类型可以拥有自己独特的自定义布局和内容。

对于具有可预测布局的帖子类型，如单产品 、 单帖子 、 商店和其他页面，您无需手动设置 LCP 图片。WordPress 默认设计为正确识别正确的图片。例如：在一个单帖子页面中，LCP 图片始终是页面标题背景（如果存在）或帖子缩略图，在一个单产品页面中，它是产品图库的第一张和主要图片。在商店页面中，它将是页面标题背景（如果存在）或产品网格中的第一个产品，等等。

如何为移动设备设置 LCP 图片？

您可能需要为桌面和移动设备分别设置 LCP 图像，因为页面上的最大和最重要的元素可能会根据设备而变化。在桌面设备上，一个大型、全宽的英雄图像可能是您的 LCP 元素。然而，在移动设备上，此图像可能会被隐藏或缩小，而不同的元素——例如醒目的标题或较小的图像——可能会成为最大的内容填充。通过为移动设备指定不同的 LCP 图像，您可以确保在每台设备上优先预加载正确、最重要的元素，这有助于优化您网站的性能和核心网页指标得分，从而为所有用户提供更好的体验。

在大多数情况下，桌面图像也适用于移动设备，但如果你想要微调你的页面，你需要使用内置的浏览器工具（如 Chrome DevTools）将浏览器窗口缩小到移动设备的大小。然后，点击按钮搜索 LCP 图像。重要的是要强调，将浏览器屏幕调整到移动设备的尺寸是确保移动图像被正确识别的关键步骤。或者，你可以在登录网站后从实际的移动设备上识别移动图像，或者通过打开页面的 metabox 部分的移动  标签手动设置图像。

在 Image type 选项中应选择什么值？

使用 <img>  标签和 CSS 中的 background-image 是两种在网站上显示图像的不同方法，每种方法都有特定的目的和对性能的影响。关键的区别在于图像被视为内容还是 装饰 。例如，通过“Single Image”元素在页面中显示的图像将使用  标签位于页面的内容中，而设置在 Design Options (WPB) 或 Style → Background (Elementor) 部分作为行背景的图像将被视为使用 CSS 设置的装饰性 background-image 。

对于 LCP 图片选项，如果您使用自动图片检测，图片类型将为您确定。但是，当您手动设置图片时，您需要根据它在页面上的显示方式自行决定其类型：作为必要的内容 （一个标签）还是作为装饰性的背景 （CSS 中的 background-image）。这一技术步骤对于包含来自 srcsets 的图片并最大化您网站的性能至关重要。