解决 Elementor 未加载错误

已发表: 2024-03-21

使用 Elementor 这样的页面构建器可以显着简化您的设计过程，从而更轻松地创建美观、响应灵敏的网站，而无需编写一行代码。 然而，事情并不总是一帆风顺。 用户可能遇到的一种常见错误是“Elementor 未加载”错误。 此问题可能会阻止您的进度，呈现一个令人沮丧的屏幕，其中 Elementor 编辑器拒绝加载，让您陷入创作过程之外。 了解这个问题是解决这个问题的第一步。

此错误可能源于多种原因，从插件冲突、内存限制和服务器限制，到 WordPress 主题甚至您正在使用的浏览器的问题。 在这篇博客中，我们将分析这个错误的含义，探讨它的根源，并讨论它在不同设置中如何变化的细微差别。 我们的目标是为您提供诊断和解决此问题的知识，确保您的工作流程保持不间断。

错误可能如何出现

有几个因素可能导致 Elementor 编辑器无法正确加载。 以下是该错误可能出现的最常见方式。

  • Elementor 编辑器的界面无法完全加载，导致屏幕空白。
  • Elementor 编辑器中永无休止的加载屏幕，通常伴随着旋转轮或加载栏。
  • 尝试访问 Elementor 编辑器时出现“500 内部服务器错误”消息。
  • Elementor 编辑器部分加载，其中某些元素或小部件无法访问或无法正确呈现。
  • 浏览器 JavaScript 控制台中与 Elementor 相关的错误或警告，在使用浏览器的开发人员工具时可见。

元素要求

此问题通常可以追溯到服务器端复杂性或插件冲突。 具体来说，您的服务器可能不完全符合 Elementor 的操作要求。 对于 Elementor，需要满足特定的系统要求才能无缝运行。 这些与存储空间无关，而是与 WordPress 环境的基础技术堆栈有关。 以下是 Elementor 最低要求的细分：

WordPress 版本：Elementor 需要 WordPress 5.2 或更高版本。这确保了与 Elementor 所利用的最新 WordPress 功能和安全标准的兼容性。

PHP 版本：需要 PHP 7.0 或更高版本。PHP 是 WordPress 构建的脚本语言，较新的版本在速度和安全性方面提供了显着的改进。

MySQL 版本：您的数据库应该是 MySQL 5.6 或更高版本。Elementor 依赖 MySQL 进行数据存储和检索，使用过时的版本可能会导致性能瓶颈或兼容性问题。

WordPress 内存限制：建议 WordPress 至少使用 128 MB 内存。由于其实时预览和众多功能，Elementor 是一个资源密集型插件，因此需要这个量才能平稳运行而不会崩溃或减慢。

虽然您可能在不满足这些先决条件的情况下设法安装 Elementor，但您肯定会遇到性能问题，或者它可能根本无法运行。 在 Elementor 的场景中，不遵守这些要求可能会导致编辑器无法加载以及其他潜在错误。

出现此错误的原因

以下是 Elementor 未加载错误的最常见因素：

插件冲突：其他 WordPress 插件可能会干扰 Elementor，尤其是当它们加载有冲突的 JavaScript 或 CSS 时。修改页面输出的缓存、安全或优化插件通常会出现这种情况。

主题冲突：有时，活动的 WordPress 主题可能与 Elementor 发生冲突，特别是当主题编码不佳或未更新以与最新版本的 Elementor 配合使用时

过时的软件：运行过时版本的 WordPress、Elementor 或您的主题可能会导致兼容性问题，从而阻止 Elementor 正确加载。

浏览器问题：浏览器扩展、过时的浏览器或浏览器特定的行为也可能是罪魁祸首，特别是当它们干扰 JavaScript 执行时。

内存限制：WordPress 有 PHP 内存限制，如果您的网站超过此限制，可能会导致 Elementor 和其他插件出现故障。这在安装了许多插件的复杂网站上尤其常见。

服务器限制：某些托管提供商会施加与 Elementor 不兼容的限制或特定配置，例如阻止编辑器操作的安全规则。

如何修复 Elementor 未加载错误

解决此问题需要采用系统方法来识别和解决根本原因。 如果 Elementor 未加载，首先要做的就是尝试重新加载它，然后再进行更复杂的故障排除策略。 如果 Elementore 仍然无法加载，那么您应该继续进行故障排除。

更新 Elementor 和 WordPress

首先也是最重要的，让我们确保一切都是最新的。 这一点至关重要，因为过时版本的插件、主题或 WordPress 本身可能会导致兼容性问题，导致 Elementor 在加载屏幕上挂起。

元素器

在 WordPress 仪表板中更新 Elementor。

  1. 登录到您的 WordPress 仪表板。
  2. 在左侧，您会看到一个菜单。 将鼠标悬停在“插件”上，然后单击“已安装的插件”。
  3. 在已安装的插件列表中查找 Elementor 和 Elementor Pro（如果您有高级版本）。 如果有新的更新可用，插件名称下方应该有一个通知。
  4. 单击链接以更新插件。

WordPress

  1. 返回 WordPress 仪表板。 您通常会在仪表板顶部或更新部分看到 WordPress 核心更新的通知。
  2. 单击通知并按照提示更新 WordPress。

在执行此操作之前，务必确保您有备份，以防万一。

检查插件与 Elementor 是否冲突

在 WordPress 中解决插件冲突的迷宫确实是一项艰巨的任务，尤其是当它中断了 Elementor 这样强大工具的使用流程时。 维护功能和确保兼容性之间的平衡很微妙。 以下是如何系统地诊断和解决这些冲突，从而最大限度地减少对网站运营的干扰。

使用暂存环境

临时网站本质上是您的实时网站的克隆，您可以在其中测试更改而不影响您的真实网站。 此设置对于解决插件冲突等问题非常有用，而且不会影响网站的访问者。

许多托管提供商提供暂存站点功能作为其托管包的一部分。

还有可用的 WordPress 插件可以为您创建临时站点。 请务必选择评价较高且更新频繁的一款。

如果您是 10Web 客户，您可以从 10Web 仪表板启用站点的临时环境。 请查看我们有关管理 10Web 中的临时环境的综合指南。

10Web暂存环境

一一测试插件

启用临时环境后，您现在可以测试插件，而不会影响您的实时网站。 这里的目标是隔离有问题的插件。 以下是该怎么做：

WordPress 中突出显示停用的插件页面

  1. 访问临时站点的 WordPress 仪表板并导航至“插件”>“已安装的插件”。
  2. 一次停用一个插件，从任何提供与 Elementor 类似功能或已知复杂或资源密集型的插件开始。
  3. 每次停用后，尝试加载 Elementor 编辑器。 如果编辑器在禁用特定插件后成功加载，您可能已经找到了冲突的根源。
  4. 记录测试了哪些插件以及结果。 如果您需要联系支持人员或解决进一步的问题，此信息会很有帮助。

替代方法：批量停用

虽然对于实时站点来说并不理想，但禁用除 Elementor 之外的所有插件，然后逐个重新激活它们可能是识别临时站点上有问题的插件的另一种有效方法。

使用批量操作停用所有插件。

  1. 转到您网站的 WordPress 管理仪表板。
  2. 单击插件并确保选中插件旁边的复选框。
  3. 取消选中 Elementor 和 Elementor Pro 前面的复选框。
  4. 单击批量操作下拉菜单并选择停用。

检查 Elementor 是否正确加载。 如果是这样，那么肯定是其中一个插件引起了冲突。 逐个重新激活插件，每次激活后加载 Elementor。 此方法有助于更快地查明冲突的插件，但存在临时站点上暂时功能丢失的风险。

Elementor 附加组件

Elementor 附加组件增强了构建器的功能，但由于与 Elementor 的深度集成，也可能成为冲突的根源。 对这些附加组件应用相同的一对一测试方法。 鉴于它们与 Elementor 的密切关系，请先从这些插件开始，然后再转向不相关的插件。

更新您的 PHP 版本

Elementor 与许多现代 WordPress 插件一样，需要现代 Web 环境才能顺利运行。 该环境的一个关键部分是 PHP——为 WordPress 提供支持的脚本语言。 由于 Elementor 仅支持 PHP 7 及更高版本，因此不仅建议您确保您的网站在适当的 PHP 版本上运行，而且还建议您这样做。 这是必要的。 以下介绍了如何检查和更新 PHP 版本以保持与 Elementor 的最佳兼容性。

检查您当前的 PHP 版本

在考虑更新之前，您应该首先确定您的网站当前使用的 PHP 版本。 WordPress 让这一切变得简单：

WordPress 中的 PHP 版本检查

  1. 导航到您的 WordPress 仪表板。
  2. 从左侧菜单中，选择“工具”>“站点运行状况”。
  3. 切换到“站点运行状况”页面顶部的“信息”选项卡。 此选项卡提供了有关您网站的大量技术详细信息。
  4. 展开服务器部分。 在这里，您将找到有关 Web 服务器的信息，包括其运行的 PHP 版本。

理想情况下，这应该是 PHP 7 或 8，因为这些版本提供了性能和兼容性之间的最佳平衡。

更新您的 PHP 版本

如果您使用的 PHP 版本不合适，请不要担心。 许多托管提供商通常可以通过托管控制面板轻松升级。 该过程可能会因您的主机而略有不同。

10网络用户

更改 10Web 中的 PHP 版本

  1. 登录您的 10Web 仪表板。
  2. 单击要升级 PHP 版本的站点。
  3. 单击“托管服务”>“工具”。
  4. 导航至 PHP 版本部分。
  5. 单击下拉菜单选择您想要的 PHP 版本。
  6. 确认更改以将 PHP 版本应用到您的网站。

如果您的主机不提供直接升级

并非所有托管提供商都提供用于切换 PHP 版本的简单下拉菜单。 如果您发现自己处于这种情况，您可以采取以下步骤：

  • 请联系您的托管提供商的客户服务。 大多数信誉良好的主机将帮助您升级 PHP 版本。
  • 如果您当前的主机不支持较新的 PHP 版本或不愿意帮助您升级，那么可能是时候迁移到支持性更强的现代托管环境了。 寻找积极支持最新网络技术的主机。

增加 PHP 内存限制

PHP 限制会影响从站点性能到顺利运行各种插件的能力等各个方面。 对于 Elementor 用户来说，遵守插件的 128 MB 内存最低要求至关重要，但瞄准 256 MB 的最佳内存可以显着增强网站的功能。 以下是有关如何检查和增加站点的 PHP 内存限制的分步指南。

检查您的 PHP 内存限制

在调整任何事情之前，明智的做法是了解自己的立场。 WordPress 的站点健康工具可以方便地让您了解底层情况：

WordPress 中的 PHP 内存检查

  1. 前往 WordPress 仪表板并导航至“工具”>“站点运行状况”。
  2. 单击“信息”选项卡可访问有关您网站的技术详细信息的宝库。
  3. 打开服务器部分并查找“PHP 内存限制”条目。 这显示了您的 WordPress 安装当前可以使用的内存量。

如果您发现 PHP 内存限制低于所需阈值，则需要升级。

通过 FTP 增加 PHP 内存限制

增加 PHP 内存限制的最直接方法是通过 FTP 进行一些文件编辑。 您可以这样做：

在 FTP 中查看和编辑 Wp 配置文件

  1. 使用 FileZilla 或 Cyber​​duck 等 FTP 客户端连接到您的网站。 您需要 FTP 或 SFTP 凭据，这些凭据通常由您的网络主机提供。
  2. 导航到网站的根目录，通常名为 www、public 或 public_html。
  3. 找到并编辑 wp-config.php 文件。 这个重要文件包含 WordPress 网站的重要设置。
  4. 右键单击该文件并选择“查看/编辑”以在文本编辑器中打开它。
  5. 搜索行 `define( 'WP_MEMORY_LIMIT', 'XXXM' );` ，其中“XXX”是您当前的内存限制。
  6. 如果此行不存在，您可以将其添加到“/* 就这样，停止编辑！” 快乐的博客。 */`。 将“XXX”替换为“256”，将限制设置为 256 MB，如下所示：`define( 'WP_MEMORY_LIMIT', '256M' );`。
  7. 保存更改并关闭文件。 FTP 客户端应提示您将修改后的文件上传回服务器。 确认覆盖现有的 wp-config.php。

进行此更改后，重新访问“站点运行状况”页面以确认 WordPress 现在可以识别更新后的 PHP 内存限制。

10网络用户

如果您的网站托管在 10Web 上，您可以直接从 10Web 仪表板调整 PHP 内存限制。

通过 10Web 仪表板更改 PHP 内存限制。

  1. 登录您的 10Web 仪表板。
  2. 单击要增加 PHP 内存的网站。
  3. 导航至“托管服务”>“工具”。
  4. 向下滚动并单击“高级设置”。
  5. 单击“内存限制”前面的下拉菜单，然后选择您需要的限制。
  6. 单击“保存”以应用更改。

当不允许直接更改时

有时，出于安全和稳定性原因，Web 主机会锁定用户手动调整 PHP 设置的能力。 在这种情况下，请联系您的网络托管服务商的支持团队。 解释您需要增加 WordPress 网站的 PHP 内存限制。 大多数信誉良好的托管服务都很乐意提供帮助，并且可以根据要求为您进行此更改。

更改 Elementor 的编辑器加载方法

如果您一直在尝试加载 Elementor 的编辑器但没有成功，那么您可能还想尝试另外一个技巧。 Elementor 设置中隐藏了一个选项，该选项可能会绕过导致编辑器故障的任何原因。 该解决方案涉及更改 Elementor 加载其编辑器的方式，这种策略有点不传统，但值得一试。

在我们深入了解操作方法之前，需要注意的是，只有在完成了通常的故障排除步骤之后，才建议调整 Elementor 的加载方法。

以下是切换加载器方法的方法：

切换 Elementor 加载方法

  1. 在 WordPress 仪表板中，将鼠标悬停在 Elementor 菜单项上，然后单击“设置”。 这将带您进入 Elementor 配置选项的核心。
  2. 在“设置”窗口中，您会发现顶部有几个选项卡。 单击“高级”。 向下滚动，直到遇到标记为“切换编辑器加载程序方法”的设置。
  3. 在此设置旁边，单击下拉菜单并选择“启用”。 您在这里所做的本质上是告诉 Elementor 在加载编辑器时尝试不同的路线。
  4. 点击“保存更改”按钮以确保应用您的新设置。

现在，尝试再次访问 Elementor 编辑器。 运气好的话，加载器方法的更改将扫清道路，您会发现以前难以捉摸的编辑器现在已准备就绪。

需要记住的几件事

更改加载程序方法通常很顺利，不会造成任何中断。 然而，记住以下几点总是一个好主意：

这是故障排除步骤：请记住，当其他解决方案未能解决您的问题时，建议更改加载程序方法。这不是一线解决方案，而是针对顽固情况的巧妙解决方法。

监控您的站点：进行更改后，请密切关注 Elementor 的行为。虽然它不太可能引起问题，但在调整设置后保持观察总是明智的。

您可以随时切换回来：如果出于任何原因您想恢复到原始加载程序方法，只需按照相同的步骤操作并取消选择“启用”选项即可。Elementor 就是这样灵活。

切换到与 Elementor 兼容的 WordPress 主题

鉴于 WordPress 主题的庞大生态系统，许多主题都经过设计或优化，可以与 Elementor 等页面构建器无缝协作。 让我们深入探讨为什么选择 Elementor 友好的主题至关重要，以及如何毫不费力地进行切换。

与 Elementor 兼容的主题可确保：

您的设计愿景变为现实：兼容的主题提供 Elementor 的全部功能，使您能够充分利用其动态小部件和模板的潜力。

流畅的性能：这些主题针对 Elementor 进行了优化，这意味着更少的冲突和更好的性能。

定期更新：与 Elementor 兼容的主题经常会收到更新，以增强其兼容性并引入新功能，确保您的网站保持新鲜和功能。

寻找正确的主题

在寻找新主题时，请留意 Elementor 兼容性的一些关键指标：

明确提及：提及与 Elementor 兼容性的主题描述将被批准。此确认意味着开发人员已经使用 Elementor 测试了他们的主题，并确认它们可以很好地协同工作。

检查评论和评级：用户反馈非常有说服力。在评论中查找有关 Elementor 的提及，以衡量现实世界的兼容性。

演示内容：提供 Elementor 构建的演示内容的主题可让您抢占先机并确认其兼容性。

进行切换

一旦您选择了一个能够与 Elementor 建立和谐关系的主题，切换主题就是一个简单的过程：

在进行任何重大更改之前，请确保您有最近的备份。 此步骤是您的安全网，允许您在出现任何问题时恢复站点。

WordPress 管理中的主题部分。

  1. 在 WordPress 仪表板中导航至“外观”>“主题”。
  2. 单击“添加新主题”，然后搜索您选择的主题，或者如果您已经下载了主题文件，则上传它。
  3. 单击“安装”，然后单击“激活”。

当您的新主题处于活动状态时，请访问您的页面以确保一切看起来都符合预期。 Elementor 构建的内容应保持不变，但可能需要进行一些样式调整才能与新主题的设计保持一致。

禁用浏览器扩展

那些方便的小附加组件使浏览在许多方面变得轻而易举，有时可能会造成阻碍，特别是对于像 Elementor 这样的复杂 Web 应用程序。 让我们探讨一下如何确定浏览器扩展是否应归咎于该问题以及如何处理。

测试扩展冲突

诊断扩展相关问题的第一步是查看问题是否在干净的浏览器环境中仍然存在。

大多数浏览器提供“隐身”或“私人”浏览模式，默认情况下禁用大多数扩展。 打开一个新的隐身窗口并尝试在其中使用 Elementor。 或者，使用未安装任何扩展程序的其他浏览器。

如果 Elementor 在这种干净的环境中工作正常，则很可能是常规浏览器设置中的扩展导致了该问题。

识别有问题的扩展

一旦确定扩展可能是原因，就该找出是哪一个扩展了。

返回到出现问题的常规浏览器窗口。 访问浏览器的扩展程序设置并一次禁用每个扩展程序。 禁用扩展程序后，尝试再次使用 Elementor。

禁用每个扩展后刷新 Elementor 编辑页面至关重要，以确保更改生效。

一旦错误停止并且 Elementor 开始按预期工作，您可能已经发现导致冲突的扩展。

Cloudflare 的 Rocket Loader 出现 Elementor 加载问题

Cloudflare 的 Rocket Loader 是一项强大的功能，旨在通过优化 JavaScript 的加载来缩短网站的加载时间。 它是一个很棒的工具，但有时它会干扰 Elementor 等复杂的 Web 应用程序，导致加载问题，甚至在尝试启动 Elementor 编辑器时卡在灰色加载页面上。 以下是解决此问题的分步指南，确保您既能享受 Cloudflare 的速度优势，又能享受 Elementor 强大的网页设计功能。

清除或停用您的缓存

在深入进行技术调整之前，通过清除或停用缓存来从头开始至关重要。 缓存数据通常会干扰您所做的更新和更改，包括与 Elementor 和 Cloudflare 设置相关的更新和更改。 该怎么做：

  • 通常，简单地清除浏览器的缓存就可以解决加载问题。 这可确保您的浏览器加载网站的最新版本。
  • 暂时关闭 Cloudflare 中的缓存。 这可以通过 Cloudflare 仪表板的“缓存”选项卡下完成，确保 Cloudflare 不会提供可能包含过时脚本或文件的站点缓存版本。

调整 Cloudflare 中的设置

处理完缓存后，下一步是在 Cloudflare 中进行一些调整，特别是有关 Rocket Loader 功能的调整。 虽然 Rocket Loader 对许多站点都有好处，但其激进的优化策略有时会减慢 Elementor 等应用程序的速度，从而导致错误。

创建特定的页面规则

Cloudflare 中的 Rocket Loader 功能旨在通过更改脚本的加载方式来缩短站点的加载时间，但众所周知，该功能偶尔会破坏 Elementor 的编辑器功能。 Rocket Loader 异步加载脚本可能会干扰 Elementor，导致编辑器可能无法正确加载的问题。

幸运的是，可以通过为使用 Elementor 的页面设置特定的Cloudflare 页面规则来解决此问题。 这些规则指示 Cloudflare 绕过 Elementor 页面和模板的某些优化（例如 Rocket Loader），以确保平稳运行。

以下是您可以在 cloudflare 中创建的规则来解决错误： Elementor 页面：

 站点 URL/*elementor*

元素模板：

 站点 URL/?elementor_library=*

将“siteURL”替换为您的实际网站 URL。

结束语

在本博客中，我们通过各种策略来解决 Elementor 未加载错误，强调兼容性和性能优化的重要性。 从更新主题和 PHP 版本到调整 Cloudflare 设置和管理浏览器扩展，每一步都是为了确保 WordPress 网站上流畅高效的 Elementor 体验。 本指南旨在为您提供针对常见 Elementor 挑战的实用解决方案，帮助您保持优化的网络形象。

利用 AI 加速 WordPress 网站创建

使用 10Web AI Website Builder 创建适合您业务需求的自定义 WordPress 网站，速度提高 10 倍。

生成您的网站
无需信用卡