1）为什么我们创建一个新网站而不能只是“切换主题”
当我们第一次发现需要进行更改时，任务似乎很简单：“更改顶部区块，使号召性用语更有效。”从表面上看，这似乎是一个快速解决方案，但我们很快意识到，这个小任务揭示了网站结构和设计中更大的潜在问题。问题不只是一个区块；整个网站的架构都需要彻底改造。
我们的网站是随着时间的推移而建立起来的，不同的页面使用各种设计和布局添加，没有任何统一的主题或模板。每个页面的设计都是独一无二的，这可能听起来很有创意，但却导致了一个重大问题：不一致。如果我们继续为顶部区块进行新设计，同时保持网站其余部分的原样，就意味着要在 700 多个页面和帖子上手动更新该区块。更糟糕的是，每次我们想要进行未来更改时，都需要重复这个手动过程。想象一下，必须仔细检查数百个页面，确保每个页面都有最新更新，这是多么低效。很快我们就明白，继续使用旧网站是不可持续的。
除了更新每个页面的后勤工作外，我们还必须考虑整体用户体验。如今，用户在访问网站时希望获得无缝、连贯的体验。如果他们向下滚动页面并发现设计不一致（每个区块使用不同的样式），就会给人一种脱节和不专业的印象。更糟糕的是，当用户从一个页面移动到另一个页面并注意到布局和设计完全不同时，这会加剧混乱感。
不一致不仅限于布局。网站上的许多图片都已过时、样式不佳，甚至由神经网络生成不当。这些图片不符合现代设计标准，更换它们又是另一项艰巨的任务。使用劣质图片会降低网站的整体质量，让用户对我们提供的产品或服务产生负面印象。
没有简单的方法可以使用 Elementor 之类的工具全面更新网站。每个页面和块都包含自己的内联样式，这意味着无法全局进行更改。如果我们想更新网站的样式，就必须浏览每个页面并手动更新每个块，这将耗时且效率低下。考虑到这一点，我们唯一的解决方案显然是从头开始构建一个新网站。这将使我们能够传输所有内容，同时保持相同的 URL，但具有新的、一致的且易于更新的设计。
2）为什么我们决定不使用 Elementor
Elementor 是 WordPress 最受欢迎的页面构建器之一。从表面上看，它似乎是一款出色的工具，可以快速轻松地创建页面。然而，在广泛使用它之后，我们遇到了一些限制，这让我们决定放弃 Elementor，转而选择定制网站。
Elementor 的局限性和挑战：
- 错误和故障：虽然 Elementor 提供了许多有用的功能，但它也存在一些技术问题。例如，当我们复制一个页面并尝试编辑它时，新页面通常看起来与原始页面不同，甚至在进行任何更改之前也是如此。元素的显示方式经常出现错误，例如“最大图像宽度”属性无法正常运行。这些故障使得很难确保跨页面的样式一致。
- 过多的创作自由导致不一致：Elementor 的主要卖点之一是能够自定义所有内容。但是，这种灵活性可能是一把双刃剑，尤其是当多个编辑人员在网站上工作时。非专业人士很容易无意中创建设计不一致的页面。例如，我们看到编辑人员在粉红色按钮上使用粉红色文本或在背景中添加飞行的橙色三角形，导致设计混乱且令人困惑。如果没有严格的设计系统，就不可能保持一致的视觉形象。
- 高级功能自定义有限：虽然 Elementor 擅长使用文本和图像构建基本页面，但当您需要添加自定义功能时，它会变得更具挑战性。我们经常发现自己仅限于内置块，很难自定义更复杂的功能。随着我们的需求超出基本布局，Elementor 的局限性变得越来越明显。
-
代码臃肿和性能问题：Elementor 构建页面的方法引入了过多的元素嵌套。例如，Elementor 会自动生成多个其他容器内的元素，每个元素都有自己的一套样式。这会导致结构臃肿，对加载速度、页面性能以及网站的 SEO 排名产生负面影响。当我们进行速度测试时，结果一直很差，而 Elementor 生成的繁重代码是主要原因。
- 没有 A/B 测试功能：在当今的数字环境中，A/B 测试对于优化用户体验至关重要。但是，Elementor 不提供向不同用户显示网站不同版本的功能。每个人都看到同一个网站，这限制了我们测试和微调颜色、按钮形状和背景图像等设计元素的能力。如果没有此功能，我们就无法根据真实用户行为优化网站。
- 数据库膨胀：Elementor 最显著的缺点之一可能是它处理样式和内容的方式。Elementor 将样式、嵌套结构和其他不必要的标签与内容混合存储在数据库中。这会导致数据库膨胀，即使禁用或卸载 Elementor 也无法清理。因此，切换到新主题或框架并不能解决问题——这些样式仍然嵌入在页面中，继续引发问题。
考虑到所有这些挑战，我们显然需要一个更强大的解决方案。我们决定建立一个不使用 Elementor 的全新独立网站，选择一种更可持续、更灵活的方法。
3）如何在新网站上创建页面
从头开始构建新网站让我们有机会建立一个简洁、精简的页面创建流程。在新系统中，创建页面非常简单：
- 登录 WordPress 管理面板并单击页面 -> 添加新页面。
- 您将看到标准的 WordPress 编辑器，您可以在其中编写或粘贴文本、添加链接和上传图像。
这个过程简单但灵活。WordPress 中的内容编辑器不依赖 Elementor 复杂的块系统，而是更加简洁，可以快速更新和轻松自定义。在编辑器下方，有高级自定义字段(ACF) 的设置，这些设置已配置为保持整个网站的一致性。
ACF 允许我们创建灵活的内容部分，使用诸如内容 1…内容 15 之类的块，您可以在其中轻松设置页面每个部分的标题、文本、图像和按钮标签。这些块会自动交替定位图像和文本，确保布局保持视觉吸引力，而无需手动调整。
对于图像，我们实施了一个配色系统，该系统会自动在网站的主要颜色中应用渐变。这可确保所有图像与整体美感保持一致。对于需要保持颜色不变的徽标或屏幕截图，有一个“保留颜色”选项可以覆盖渐变。
该系统简化了内容管理，同时保持了所有页面的设计一致性。
4）如何创建新帖子
在新网站上创建帖子遵循与创建页面相同的简化流程，但有一些主要区别：
- 帖子的 URL 包含../blog/.. ，以区别于页面。
- 在右侧边栏中，一个区块会自动显示最新的三篇文章，有助于保持博客的活力和吸引力。
所有帖子的模板位于文件template-parts/content/content-single.php中，该文件处理每篇博文的结构和布局。此一致的模板可轻松更新并确保所有帖子都遵循相同的设计准则。
5）高级自定义字段（ACF）
ACF 是我们新网站开发中不可或缺的一部分。它允许我们创建自定义字段，这些字段可以通过 WordPress 管理面板轻松管理。PHP 代码中引用了content_1等字段，使我们能够动态提取每个页面和帖子的正确内容。
这种灵活性对于确保我们能够有效地管理和更新网站同时在需要时仍提供定制空间至关重要。
6）A/B 测试
我们对新网站做出的最重大改进之一是实施 A/B 测试。A/B 测试使我们能够比较两个版本的网站，看看哪个版本对用户更友好。这可以包括测试不同的颜色、按钮形状、背景甚至布局。
我们使用 URL 中的GET 参数实现了此功能。例如，可以创建两个相同的广告活动，但使用不同的 URL：
https://www.conveythis.com/?param=1
https://www.conveythis.com/?param=2
当用户点击这些链接时，该参数会保存在 cookie 中。根据参数的值，网站将显示页面的不同版本，例如不同的按钮颜色或背景图像。这使我们能够收集有关用户偏好和行为的宝贵数据。
所有事件均记录在.csv文件以及 MySQL 数据库中，使我们能够分析数据并就网站改进做出明智的决策。
7）functions.php文件
- 自定义帖子类型和分类法
functions.php文件的主要用途之一是创建自定义帖子类型和分类法，这使我们能够更有效地组织内容。我们不再仅仅依赖默认的 WordPress 结构（页面和帖子），而是为特定内容（例如案例研究、推荐或产品功能）引入了自定义类型。这不仅使我们的内容更加井井有条，而且还通过使导航和查找相关信息更加容易，从而改善了用户体验。
例如，为了为案例研究创建自定义帖子类型，我们在functions.php中添加了以下代码：
函数 create_case_study_post_type() {
register_post_type('案例研究',
大批（
'标签' =>大批（
'name' => __( '案例研究' ),
'singular_name' => __( '案例研究' )
),'公共' => true，
'has_archive' => true,
'rewrite' => 数组（'slug' => '案例研究'），
)
);
}
添加动作（'初始化'，'创建案例研究帖子类型'）；
这创建了一种名为“案例研究”的新帖子类型，其行为与常规帖子类似，但具有自己的档案和分类结构。- 加载外部脚本和样式
functions.php的另一个重要用途是加载外部脚本和样式，确保我们的网站拥有所有必要的库和框架。例如，我们集成了用于滑块的Slick.js库和用于流畅动画的AOS （滚动动画）库。通过仅在需要时（例如在特定页面或模板上）选择性地加载这些资产，我们减少了不必要的臃肿并提高了页面加载速度。
以下是我们处理样式和脚本加载的方式：
函数 load_custom_scripts() {
// 为特定模板加载 Slick 滑块
如果（is_page_template（'template-slider.php'））{
wp_enqueue_style（'slick-css'，get_template_directory_uri（）。'/css/slick.css'）;
wp_enqueue_script（'slick-js'，get_template_directory_uri（）。'/js/slick.min.js'，array（'jquery'），''，true）;
}// 在整个站点加载 AOS 动画
wp_enqueue_style（'aos-css'，get_template_directory_uri（）。'/css/aos.css'）;
wp_enqueue_script（'aos-js'，get_template_directory_uri（）。'/js/aos.js'，array（'jquery'），''，true）;
}
添加动作（'wp_enqueue_scripts'，'load_custom_scripts'）；
通过使用条件检查（例如，是页面模板（）），我们确保整个站点不会加载不必要的脚本，从而优化性能。- 自定义简码
为了提高非技术用户管理网站内容的灵活性，我们通过functions.php添加了自定义短代码。这些短代码允许用户轻松插入复杂的功能或样式元素，而无需接触代码。例如，我们创建了一个短代码，用于在网站的任何位置添加自定义按钮：
函数custom_button_shortcode（$atts）{
$atts = shortcode_atts（
大批（
'label' => '点击此处',
'url' => '#',
),
$atts，
‘自定义按钮’
);
返回 ' ' . esc_html( $atts['label'] ). ' ';
}
添加短代码（'自定义按钮'，'自定义按钮短代码'）；
此短代码使编辑者可以轻松添加带有自定义文本和 URL 的按钮，从而可以在不破坏设计的情况下进行快速调整。8）处理SEO和网站速度
网站改版期间的一大重点是改善 SEO 和网站整体性能。原网站使用 Elementor 构建，由于代码臃肿和图片未优化，加载速度慢，SEO 实践不理想。
改善搜索引擎优化
为了确保我们的新网站对 SEO 友好，我们从一开始就实施了几项最佳做法：
-
语义 HTML ：我们精心设计了网站的 HTML，并正确使用了标题标签（
，等），确保搜索引擎能够轻松解析和理解内容层次结构。这对于 SEO 排名和可访问性都尤为重要。 - 元标签和 Open Graph 数据：我们利用Yoast SEO插件来处理元标题、描述和 Open Graph 数据，以便进行社交分享。通过使用 Yoast，我们确保每个页面和帖子都具有优化的元数据，这对于搜索引擎可见性和社交媒体平台的点击率至关重要。
- 架构标记：使用functions.php文件，我们为结构化数据添加了自定义架构标记，从而改善了搜索引擎在搜索结果中显示我们页面的方式。例如，我们为文章、案例研究和产品添加了架构，帮助搜索引擎更好地对我们的内容进行分类。
函数 add_schema_markup() {
回显'
{
“@context”：“http://schema.org”，
"@type": "组织",
"名称": "ConveyThis",
"url": "https://www.conveythis.com",
“logo”：“https://www.conveythis.com/logo.png”，
“sameAs”：[
“https://www.facebook.com/conveythis”，
“https://twitter.com/conveythis”
]
>
';
>
add_action( 'wp_head', 'add_schema_markup' );
网站速度优化
性能不仅是用户体验的关键因素，也是 SEO 排名的关键因素。我们采取了以下几个步骤来提高网站速度：
- 图像优化：我们使用了WebP等现代图像格式，这种格式比 PNG 和 JPEG 等传统格式具有更高的压缩率。所有图像均根据用户的屏幕分辨率以适当的尺寸呈现，即使在移动设备上也能确保快速加载。
- 延迟加载：通过实现图像延迟加载，我们确保最初只加载用户屏幕上可见的图像。其他图像将在用户滚动时加载，从而减少初始页面加载时间。
- 缓存和压缩：我们使用WP Rocket来缓存、压缩和压缩 HTML、CSS 和 JavaScript 文件。WP Rocket 通过减少整体文件大小并向重复访问者提供页面的静态缓存版本，帮助我们实现更快的加载时间。
9）数据库优化和清理
由于 Elementor 的臃肿和低效数据库结构，旧网站积累了大量“垃圾”数据。为了确保新网站顺利运行，我们进行了彻底的数据库清理和优化。
- 删除旧 Elementor 数据
如前所述，即使停用 Elementor，其样式和设置仍嵌入在数据库中。我们使用自定义查询删除这些多余的数据并清理数据库。此外，我们还删除了任何未使用的媒体文件、帖子修订和随着时间的推移而积累的过期瞬态。
- 数据库索引
我们还优化了数据库，为经常查询的列添加索引，确保数据库查询更快、更高效。例如，为发布日期列加快了与最近帖子相关的查询，从而提高了我们博客页面的性能。
结论
决定从头开始构建新网站是因为旧网站的局限性和低效性。由于 Elementor 导致的设计不一致、样式臃肿和性能问题，简单地切换主题并不是一个可行的选择。通过创建具有自定义开发和高级自定义字段的新网站，我们实现了更高效、更具凝聚力和更专业的网站，增强了用户体验，同时实现了简化的更新和 A/B 测试功能。这个新网站为未来的发展和改进奠定了坚实的基础。
准备好开始了吗？
翻译不仅仅是了解语言，而是一个复杂的过程。
通过遵循我们的提示并使用 ConveyThis ，您翻译的页面将会引起受众的共鸣，让他们感觉就像目标语言一样自然。
虽然需要付出努力，但结果却是值得的。如果您正在翻译网站，ConveyThis 可以借助自动机器翻译为您节省数小时。
免费试用ConveyThis 7 天！
CONVEYTHIS