为什么不推荐使用页面构建器插件elementor等制作wordpress网站

wordpress 页面构建器elementor和古藤堡编辑器

WordPress的elementor插件是一种用于创建页面和文章的可视化页面构建器插件，可以使用户不需要编写代码就能够创建复杂的页面和文章布局。

elementor插件提供了一个直观的拖放页面构建器，用户可以在页面中添加各种元素，例如文本框、图像、按钮、进度条、定价表格等等，同时也支持添加自定义HTML和CSS代码。用户可以通过这些元素和自定义代码来创建独特的、具有视觉冲击力的页面布局，无需具备编程技能。

elementor插件还提供了多个预定义模板和布局，可以帮助用户快速创建专业的页面和文章。此外，elementor还提供了多种样式和动画选项，以及移动设备优化功能，使页面在不同大小的设备上都能完美呈现。

然而，elementor所提供的很多功能，在wordpress5.0版本发布了古藤堡编辑器之后，古藤堡编辑器所提供的可视化编辑，拖拽布局，以及丰富的样板预设模块是可以完全媲美Elements插件的功能的。

那么，这两种编辑的方式都是可视化、多模块、多预设，可拖拽的布局构建方式，为什么我们不推荐Elements页面构建器插件的使用呢？

elementor速度慢，代码臃肿冗余

加载过多的CSS和JavaScript文件是导致页面加载速度慢的主要原因之一。

请见下图

上图是一个使用Elements制作的站点，仅仅在截图的部分中，我们就可以看到Elements插件加载了相当多的css文件，如果你使用了Elements插件，可使用右键查看源码，然后crl+f搜索elementor，即可看到加载的elementor文件，粗略统计，css文件加载了10个、js文件加载了12个。

每个CSS和JavaScript文件都需要进行网络请求和下载，这些请求会增加页面的加载时间。如果插件使用了太多的CSS和JavaScript文件，那么就会导致页面的加载时间变慢。

此外，插件加载的CSS和JavaScript文件可能会与其他插件或主题中的文件发生冲突，进一步加剧页面加载时间过长的问题。

代码冗余，臃肿，嵌套容器过多

WordPress的elementor插件是一个功能强大的布局模块插件，可以让用户方便地构建页面。然而，它可能会导致代码冗余和不良后果。

代码冗余是指插件在生成页面时会生成过多的代码，这会使页面的加载速度变慢，影响用户的体验。冗余代码还会占用服务器资源，增加网站的负载时间，进而影响搜索引擎的排名。

此外，过多使用布局插件也会导致页面结构变得复杂，难以维护和修改。如果网站需要频繁更新，那么使用布局插件会增加维护成本，降低开发效率。

另外，布局插件可能会产生页面兼容性问题。虽然elementor插件经过了充分的测试，但在某些情况下，它可能与其他插件或主题不兼容，从而导致页面出现问题。

上图是使用elementor创建的一个模块，可见他的原始内容就是几张图片混排，而他的嵌套则达到了惊人的地步，按照正常的html代码，这个嵌套只需要最多3层容器。

对SEO的优化有很大的影响

臃肿的代码，拖慢的网站加载速度，让构建出来的网站对于SEO的优化是不利的，在谷歌搜索优化测试中，网络请求和下载、加载速度是决定seo排名和收录的前提，因此使用这类型的插件会有较大的影响。

使用古藤堡编辑器构建网站，完全避免以上问题

古藤堡编辑器也是一种页面构建器，但与插件完全不同的是，古藤堡编辑器需要依赖主题提供丰富的区块和样板，这样对于网站主题开发者可以更好地控制和优化。

css和js

在主题公园所发布的基于古藤堡编辑器的主题 超级区块WordPress主题系列 中，我们的主题开发人员尽可能在维护性可靠的情况下精简了css和js文件的加载，并且可以使用合并优化将css和sh文件完全合分别并为一个文件，你可以打开我们的任意demo，右键查看源码，css和js加载的内容清爽干净，只有分别一个文件加载。

代码简洁、嵌套少

基于古藤堡所开发的插件，古藤堡所能够带来的唯一的容易是 区块内部可自定义编辑区，这个编辑区会自动嵌套一个div，这对于代码的简洁性完全没有任意影响，在查看代码时，完全和人工编码没有太多的区别，因此速度也更快。

综上所述，如果能够选用到一款良好的基于古藤堡编辑器的wordpress主题，就不要使用页面编辑器插件了。本文所述的elementor是较为流行的一种，市面上其他类型的页面构建器插件的问题大多是如此。