“使用 Page Builder Sandwich 编辑”按钮未显示

“Edit with Page Builder Sandwich”按钮未显示

如果您在网站前端看不到“Edit with Page Builder Sandwich”按钮,可以尝试以下几种方法:

确保管理栏处于可见状态

PB Sandwich 的编辑按钮位于前端的管理栏中。请进入管理后台并导航至 用户 > 个人资料,仔细检查并确保已勾选在浏览站点时显示工具栏,以确保管理栏可见。

e5960e581e file w9uN2EeCjm

确保您位于页面、文章或自定义文章类型中

只有文章、页面和自定义文章类型可以在前端编辑。只有当您能在后台使用 WordPress 的内容编辑器编辑它们时,您才能在前端进行编辑。您网站的其他区域——例如首页的博客文章列表、所有博客文章列表、分类目录列表、404 页面、搜索页面——都是由 WordPress 结合您使用的主题生成的动态页面,无法使用 PB Sandwich 进行编辑。

判断当前网页是否可编辑的一个依据是,您是否能在管理栏中看到“编辑文章”或“编辑页面”。

确保您的内容不是由主题或插件动态生成的

如果您的页面/文章是由主题或插件动态生成的,那么将无法使用 Page Builder Sandwich 进行编辑(在其他页面构建器中也很可能无法编辑)。如果您发现后台的内容编辑器是空的,但在前端查看页面时却内容充实,这就表明您的页面是动态生成的。

要检查您的页面是否为动态生成,请查看网页源代码(右键点击并选择“查看网页源代码”)。搜索文本“pbs-main-wrapper”,如果任何地方都找不到该文本,则表明您的页面是动态生成的。

以下是动态生成内容的一些示例:

  • 您的页面由您使用“自定义”(Customizer)添加/编辑的多个小部件构成,
  • 您的页面由“单页”(one page)主题拼接的多个不同页面组成(在这种情况下,您仍然可以编辑各个独立页面,但无法编辑拼接后的页面),或者
  • 您的页面由最新的博客文章组成。

尝试先添加一些内容

曾有部分案例中,如果内容为空,主题根本不会显示该内容,这使得 PBS 误以为页面不可编辑。要检查是否属于这种情况,请在后台编辑器中编辑您的页面/文章,尝试在内容中添加任意文字(例如“hello”),然后从那里点击“Edit with Page Builder Sandwich”按钮。

感谢 Mathias Hellquist 提供此技巧!

确保您的页面未被其他页面构建器“占用”

某些页面构建器会要求您选择使用 WordPress 默认内容编辑器,还是使用页面构建器自带的编辑器。如果您已经使用其他页面构建器编辑过页面,该页面构建器可能已经“声明占用”了内容,其他内容钩子/过滤器将无法再运行。正因如此,有时 Page Builder Sandwich 无法检测到您的内容位置,并且由于没有可编辑的内容,它将不会显示编辑按钮。

要解决此问题,只需选择不在该特定页面/文章上使用该页面构建器,而选择仅使用 WordPress 默认内容编辑器。

确保您拥有该页面的编辑权限

如果您无法编辑该页面,编辑按钮将不会出现。例如,如果您是编辑(Editor)或贡献者(Contributor),可以在网站中撰写博客文章,但这并不一定意味着您可以编辑首页或“联系我们”页面。如果您可以在管理栏上看到“编辑文章”按钮,那么您也应该可以使用 PB Sandwich 对其进行编辑。如果需要,请向您的网站管理员申请编辑权限。

可能存在阻止 PB Sandwich 运行的 Javascript 错误

PB Sandwich 大量使用了 Javascript。如果网站中的其他脚本出现 Javascript 错误,这可能会阻止 PB Sandwich 正常运行。要检查是否属于这种情况,您可以打开浏览器中的开发者控制台来排查错误。

针对此项检查,我建议使用 Chrome。右键点击页面上的任意位置,然后点击“检查”(Inspect)选项。这将在浏览器底部打开一个新区域,点击“Console”(控制台)选项卡。如果有错误,您应该会看到类似这样的内容:

4acce143a3 file

如果确实存在错误,您还可以通过点击或将鼠标悬停在脚本名称上来获取该错误来源的线索:

abb5a87c67 file ITjVcdhZQU

这些错误可能来自您的主题或已安装的其他插件。修复这些错误可以使 PB Sandwich 恢复正常运行。

如果是您的主题或某个插件导致了 Javascript 错误,请通过电子邮件发送至 [email protected] 告知我们,我们将尽力解决该问题 🙂

如果您使用的是 CloudFlare,请确保已关闭 Rocket Loader

CloudFlare 是一款广泛使用的免费 DNS CDN。它非常出色,但 PBS 目前在兼容 Rocket Loader 功能时存在问题。Rocket Loader 虽然提升了 Javascript 文件的加载时间,但打乱了 PBS 脚本的依赖项和调用顺序。如果您开启了 Rocket Loader,Page Builder Sandwich 的编辑按钮将不会出现(且不会显示任何 Javascript 控制台错误)。

要检查您的网站是否正在使用 CloudFlare 的 Rocket Loader,请查看网页源代码(右键点击并选择“查看网页源代码”),然后搜索文本“rocketscript”,如果找到该文本,则说明您已开启 Rocket Loader。

e4dff5b8c0 file tPnWvP09FF

阅读关于 CloudFlare 和 Rocket Loader 兼容性 的文章,获取有关如何关闭它的完整说明。


我完成了上述所有操作,但编辑按钮依然没有出现!

好了,如果到这一步上述解决方案均不起作用,那么或许是时候解释一下它为什么没有显示以及该如何应对了。准备好了吗?我们开始吧!

原因分析(非技术角度)

Page Builder Sandwich 需要知道您的页面/文章内容位于何处。我们的做法是监听 WordPress 加载文章内容的时机并“标记”该区域,以便在所有内容加载完毕后找到核心内容所在的位置。

有时,某些插件会覆盖或绕过此流程,转而尝试以自己的方式加载内容。有时这并无大碍,但在特定情况下(尤其是涉及加载主体文章内容时),这可能会导致某些插件停止工作。当其他插件绕过该加载流程时,我们所做的“标记”可能会丢失,而当编辑器准备启动时,它便再也找不到您的内容所在。因此,编辑按钮就不会出现!您可能还会发现,某些向页面添加内容的插件(例如某些社交分享插件)也可能由于完全相同的原因而停止工作。

原因分析(技术角度)

Page Builder Sandwich 需要 知道 您的页面/文章内容位于何处,它是通过挂钩到 the_content 过滤器并在您的主体内容外添加一个包装器来实现的。某些插件可能会覆盖此项,而在后续流程中使用 get_the_content() 函数覆盖内容。不幸的是,这样做会阻止调用所有 the_content 过滤器,从而导致 PBS 的包装器丢失。其他任何插件所做的更改也会同样丢失。

使用 get_the_content() 本身并没有错,但如果在主查询中以及单篇文章模板页面内部使用它,而不是使用会执行所有 the_content 过滤器的常规 the_content() 调用,则可能会产生负面影响。

如何解决

您可以在登录状态下访问前端页面/文章并查看网页源代码,以检查 Page Builder Sandwich 的“标记”是否存在。在繁杂的代码中搜索是否能找到以下字符串:

data-name="main-content"

如果能找到它,那么可能只是某处存在 Javascript 问题,只需告诉我们您正在使用的主题和插件,我们就可以进行修复。

但如果您找不到它,那可能只是您的主题(或插件,但如果是页面或博客文章,则最有可能是主题)对文章内容进行了特殊处理。如果是这种情况,您应该联系主题作者并告知他们此问题!您也可以向他们出示上面“技术角度”的原因解释,这有助于排查问题 🙂

如果您对编写 PHP 代码很有把握,可以尝试通过找到处理文章内容的模板文件来修复它。我们遇到的一个解决方案是替换以下调用:

$content = get_the_content();

替换为:

ob_start();
the_content();
$content = ob_get_clean();<br>

注意:您的 PHP 变量可能会有所不同,但原理是相同的。如果可行,建议您创建一个子主题,而不是直接在主题中应用此修改。此外,该修改可能会产生副作用,因此最好就此咨询您的主题作者。