无需信用卡
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添加了自定义短代码。这些短代码允许用户轻松插入复杂的功能或样式元素，而无需接触代码。例如，我们创建了一个短代码，用于在网站的任何位置添加自定义按钮：
[删除]
此短代码使编辑者可以轻松添加带有自定义文本和 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 3 天！
CONVEYTHIS