作者: Neil Lock

  • Jetpack

    Jetpack

    Page Builder Sandwich 应该与 Jetpack 的各个不同模块兼容。

    Jetpack 的 Markdown 模块

    Markdown 模块在保存内容时会执行一些特殊处理,导致更改在 Markdown 转换过程中丢失。为了解决这个问题,当从前端保存更改时,后端编辑器中的 Markdown 文本会转换为 HTML 标签。(感谢 Jake Jackson 提供的帮助)

  • PHP 7

    PHP 7

    我们已在 PHP 7 环境下对 Page Builder Sandwich 进行了测试,一切应该都可以正常运行,没有任何问题。

    将您的网站从较低版本升级到 PHP 7 时请务必小心,因为存在很多与较低版本不兼容的问题,需要在您的所有主题和插件中进行处理。

  • 使用 Materialize 的主题

    使用 Materialize 的主题

    当同时使用 Page Builder Sandwich 和 Materialize 时,会出现一个 Javascript 错误。materialize.js 与 WordPress 核心的颜色选择器之间存在冲突。

    Materialize 的 GitHub 代码仓库中已有关于此问题的议题:https://github.com/Dogfalo/materialize/issues/2821

  • 当您的许可证到期时会发生什么?

    当您的许可证过期时会发生什么?

    只要您不在网站上停用许可证,该插件将继续正常运行。一旦停用,您将无法再次重新激活。

    您将无法从 WordPress 仪表盘接收更新,也无法获取更新的版本。我们将无法为您提供出色的专属支持。

  • 如何添加小部件

    如何添加小工具

    可以通过点击检查器元素部分中的小工具元素按钮来添加小工具。点击后,应该会出现一个弹出窗口,列出 Page Builder Sandwich 在您网站中找到的所有小工具。

    为什么某些小工具选项可能无法正常工作

    在您的 WordPress 网站中找到的所有小工具都可以添加,但是一些在其设置中使用了自定义/专用 Javascript 代码的小工具可能无法正常工作。使用以下功能的小工具可能无法工作:

    • 除 WordPress 内置颜色选择器之外的其他颜色选择器
    • 不使用 WordPress 媒体管理器的文件上传选项
    • 其他特殊脚本,如交互式地图选择器、字体选择器,
    • 在设置更改值时触发的 Javascript 代码等。

    默认的 WordPress 小工具以及类似方式创建的小工具应该没有问题。

    如何解决此问题

    如果您确实需要该特定小工具正常工作,有一种变通解决方法。

    您可以使用 Custom Sidebars by WPMU Dev 插件创建一个新的侧边栏/小工具区域,使用 外观 > 小工具 中的常规方法将您的小工具添加到其中。然后在 Page Builder Sandwich 中,添加一个侧边栏元素并选择包含所需小工具的侧边栏。

    另一种替代方法是使用 Page Builder Sandwich 中提供的各种元素和样式重新创建所需的效果。

  • 如何找回丢失的 PBS .zip 文件

    首次购买 Page Builder Sandwich 时,包含该插件的 .zip 文件将自动下载到您的计算机中。

    如果您丢失了此文件,可以通过访问此链接重新下载您的 .zip 文件: https://dashboard.freemius.com/license-recovery/203/page-builder-sandwich/

    在此链接中输入您的许可证,即可找回 Page Builder Sandwich 的 .zip 文件,以及您的许可证和账户详细信息。

  • PBS 能与我的主题兼容吗?

    PBS 能与我的主题兼容吗?

    从技术上讲,它应该适用于任何和所有主题。

    与我们的用户和客户一起,我们已在许多主题上成功使用 Page Builder Sandwich,包括来自 WordPress.org 主题库的主题、Genesis Themes、StudioPress Themes、Elegant Themes 以及来自 ThemeForest 的主题。

    但是,有时您的主题可能会采取一些非标准做法,从而阻止 Page Builder Sandwich 正常运行。遇到这种情况时,请向我们发送支持请求,我们将尽力修复。

  • 基本故障排查

    基本故障排除

    市面上有成千上万的主题和其他插件。因此,尽管我们尽量谨慎并遵循标准构建一切,但有时难免还是会出现问题。

    如果您发现 Page Builder Sandwich 在您的环境中无法正常工作,可以采取以下几个步骤来进行故障排除。

    阅读关于“使用 Page Builder Sandwich 编辑”按钮未出现时的文章

    请在此处查看文章:  “使用 Page Builder Sandwich 编辑”按钮未出现 如果这未能解决问题,请继续往下阅读。

    查看其他故障排除文章

    浏览文档中的  故障排除分类 下的不同文章。

    确保您的各项程序保持更新

    包括 WordPress、您的插件、您的主题甚至是 Page Builder Sandwich。始终保持更新是明智之举。确保您的各项内容都是最新版本,意味着您的网站将拥有最新的错误修复和漏洞修补。

    尝试在后台编辑您的内容,并检查它是否显示在前端页面/文章中

    如果您无法使用 Page Builder Sandwich 编辑内容(并可能弹出了错误提示窗口),可能是您当前所在页面的内容全部是由您的主题/某个插件生成的。要检查这一点,请在 WordPress 后台正常编辑您的页面/文章,然后检查您保存的内容是否显示在前端。如果不显示,则意味着该页面/文章内容完全是生成的,无法使用 PBS 进行编辑。

    逐个停用您的插件,并检查 PBS 何时恢复正常工作

    有时,某个插件可能与 Page Builder Sandwich 存在冲突。要检查是哪个插件可能导致了冲突,请停用一个插件,然后检查 PBS 是否恢复正常工作。对每个已启用的插件都重复此操作。如果 PBS 重新开始工作并且您可以编辑页面,那么您刚才停用的插件就与 PBS 不兼容。在这些情况下,请通过电子邮件 [email protected] 与我们联系,以便我们进行修复。

    切换回默认的 WordPress 主题

    如果停用插件没有任何效果,请尝试将您的主题切换为默认的 WordPress 主题(Twenty-XX 系列主题)。如果您可以重新开始使用 Page Builder Sandwich 编辑内容,那么您正在使用的主题就与 PBS 不兼容。请通过电子邮件 [email protected] 将此信息发送给我们,以便我们进行修复。

    尝试无痕模式(罕见)

    在极少数情况下,浏览器扩展程序可能会阻止网站中的 Javascript 代码正常运行。要检查是否是浏览器扩展程序导致了问题,请在无痕模式(Chrome)或隐身/隐私模式下打开浏览器并尝试访问 PBS,这样会在没有启用任何扩展程序的情况下打开新标签页。如果它能正常工作,则说明存在冲突的扩展程序。

    已发现浏览器扩展程序 PageXray 会导致问题。

  • 如何在页面中删除项目

    如何在页面中删除项目

    在 Page Builder Sandwich 中删除内容通常只需选中文字或元素,然后按 Delete 或 Backspace 键。

    另一种方法是点击检查器上的删除/移除按钮:

    53dabdd7d7 file ZZXjBNEw56

    在某些情况下这种方法不起作用。无法通过此方式删除的项目通常是容器,例如行、列或轮播。这是为了防止在删除内容时发生误删。

    要删除这些项目,请点击检查器中元素属性面板上的删除/移除按钮。例如,要删除一行,您需要使用此区域:

    96b535f82e file

  • PBS 是否支持我的语言?

    PBS 是否支持我的语言?

    Page Builder Sandwich 现已提供以下语言版本:

    • 英语
    • 希伯来语
    • 西班牙语

    如果您想通过将其翻译成您的语言来为 Page Builder Sandwich 做出贡献,请前往我们的 Transifex 页面!

  • 如何添加图片

    如何添加图片

    添加图片非常简单直接。您可以:

    1. 从 Windows 资源管理器或“访达”中将图片直接拖入浏览器窗口,或者
    2. 点击媒体元素按钮,并使用熟悉的 WordPress 媒体管理器进行上传。
  • NextGen

    NextGen

    此前存在一个关于 NextGen 和 Page Builder Sandwich 的问题。

    在 2.12 版本之前,PBS 会在某种情况下触发 NextGen 显示错误消息,从而导致您的网站出现白屏。此问题已在 2.12 版本中修复,如果您使用的是旧版本,请进行更新。

  • 这会让我的网站加载变慢吗?

    这会让我的网站加载变慢吗?

    我们确保了 Page Builder Sandwich 对您网站的性能影响几乎为零。在退出登录状态下,充其量只加载行和列的 CSS 样式,并仅排队加载您所使用简码所必需的 JS 和 CSS 脚本。

  • 如何使用 Markdown

    如何使用 Markdown

    Markdown 基本上是一种在编辑时输入的语法,用于添加或更改文本的格式。它们就像快捷键一样,但无需按下组合键,只需直接键入即可。

    以下是 Page Builder Sandwich 中支持的所有 Markdown 语法列表。

    块级元素

    ## 标题2
    
    ### 标题3
    

    最高支持:

    ###### 标题6
    
    > 块引用
    
    (4 个空格)预格式化文本/代码
    

    列表

    * 无序列表
    
    - 无序列表
    
    1. 有序列表
    
    1) 有序列表
    

    水平分割线

    -
    
    ------------------------------(或多个连字符)
    

    链接

    输入 URL 会自动转换为链接:

    前往 https://pagebuildersandwich.com
    
    或者您可以分别指定文本和 URL:
    前往 [Page Builder Sandwich](https://pagebuildersandwich.com
    
  • 如何添加短代码

    如何添加简码 (Shortcode)

    添加简码

    在编辑时可以粘贴或直接输入简码。输入简码后,按 Enter 键或光标移出简码,简码应立即显示为其渲染后的形式。

    添加简码的另一种方法是单击检查器上的简码元素 (Shortcode Element)。这将弹出一个窗口,列出您网站中可用的所有简码。选择一个或双击其中任何一个以将其插入。

    编辑简码

    您可以通过 2 种方式编辑简码:

    1. 单击简码将其选中,然后在检查器中编辑简码属性。如果您的简码中包含属性和内容,它们应显示为可供修改的字段。简码应会根据您的更改自动更新。
    2. 双击简码(或将鼠标悬停在上面,然后单击编辑工具栏按钮)以编辑原始简码。您可以通过这种方式自由修改整个简码。完成后,按 Enter 键或选择其他元素以更新简码。

    我的简码属性在哪里?

    Page Builder Sandwich 无法检测简码属性。因此您必须手动输入这些属性。我们正在研究一种将简码映射到系统中的方法,以便让每个人都能轻松使用。敬请期待!

  • 如何嵌入来自其他网站的内容

    有两种方法可以嵌入来自其他网站的内容:

    1. 通过粘贴 URL 进行嵌入

    您可以通过直接粘贴永久链接 URL 来嵌入来自各个网站的内容,例如 YouTube 视频、Vimeo 视频、Instagram 照片、Flickr 照片、推文甚至 Reddit 评论。

    https://www.youtube.com/watch?v=dQw4w9WgXcQ
    

    您可以从 WordPress codex 中找到可嵌入 URL 的列表:   https://codex.wordpress.org/Embeds

    您还可以安装其他插件来添加对更多嵌入 URL 的支持。例如,WordPress 开箱即用并不支持 Wistia URL,您可以安装它们的插件来启用嵌入功能,之后 PB Sandwich 应该也能够处理它们。

    请注意,一整行文本中应仅包含该 URL 才能生效。

    2. 通过粘贴嵌入代码进行嵌入

    您也可以直接粘贴嵌入代码。

    嵌入代码如下所示:

    <iframe width="420" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    

    请注意,一整行文本中应仅包含该嵌入代码才能生效。

    3. 使用媒体按钮

    点击“添加媒体”工具,然后在“从 URL 插入”选项卡中粘贴您的 URL。

    4. 使用

    简码</h2>
    WordPress 自带一个 简码,您可以直接输入此简码来嵌入内容。例如:
    <pre>https://www.youtube.com/watch?v=dQw4w9WgXcQ

  • 我可以用 PBS 编辑什么?

    我可以用 PBS 编辑什么?

    您只能使用 Page Builder Sandwich 编辑页面、文章和自定义文章类型的内容。

    但是,您无法编辑主题模板文件,例如:

    • 首页(如果在设置 > 阅读中设置为您的最新文章)
    • 404 页面
    • 分类列表页面
    • 标签列表页面
    • 搜索结果页面
    • 以及其他类似页面

    可以这样理解:如果前端的管理栏中显示有“编辑文章”或“编辑页面”,那么该页面应该就是可编辑的。

  • 如何使用 oEmbed 嵌入外部内容

    如何使用 oEmbed 嵌入外部内容

    您可以通过将永久链接 URL 粘贴到 Page Builder Sandwich 中,来嵌入来自各种网站的内容,例如 YouTube 视频、Vimeo 视频、推文甚至是 Reddit 评论。

    请注意,整行文本应仅包含该 URL

    Page Builder Sandwich 与 WordPress 的 oEmbed 功能协同工作。因此,您可以在后台嵌入的 URL 都应受到支持。添加对其他 oEmbed 提供商支持的插件也应该可以正常工作。

    您可以从 Codex 中找到 oEmbed 提供商的列表: https://codex.wordpress.org/Embeds

  • 如何上传您自己的图标

    如何上传您自己的图标

    在 Page Builder Sandwich 的高级版本中,您可以使用自己的 SVG / 矢量图标。操作方法如下:

    1. 开始使用 Page Builder Sandwich 进行编辑。
    2. 在您的桌面上找到您想要使用的 SVG 图标,
    3. 确保图标的文件名具有描述性,该名称稍后将用于搜索您的图标。例如:“apple-mac-desktop”
    4. 将文件拖入浏览器进行上传。(放置文件后,媒体管理器将出现以开始上传过程。如果未出现,请单击 PBS 检查器中的“添加媒体”元素按钮将其打开,然后从那里上传您的图标。)
    5. 关闭媒体管理器窗口,并单击“添加图标”元素按钮以打开图标选择器弹窗。
    6. 搜索您新上传的图标。例如,如果您的图标文件名是“apple-mac-desktop”,您可以使用“apple”、“mac”或“desktop”等词来搜索您的图标。

    上传的图标也可用作项目符号列表中的项目符号图标和按钮图标。

    注意:如果您的图标未出现在搜索结果中,可能是因为 PBS 未能正确解析文件名。在这些情况下,您可以使用“custom”或“upload”等词来查找您上传的图标。

  • 与其他插件的兼容性

    与其他插件的兼容性

    Page Builder Sandwich 的设计初衷是尽可能减少干扰,以便其他插件能与我们的插件良好共存。

    然而有时也会存在例外。以下是与 Page Builder Sandwich 一同使用时会出现一些特殊情况的插件列表。这并不一定意味着它们无法工作或完全不兼容,只是某些行为可能会有所不同。

    Jetpack – Markdown 模块

    • 从前端保存更改时,后端编辑器中的 Markdown 文本会转换为 html 标签。(感谢 Jake Jackson 提供此信息)

    我们将持续更新此列表。如果您发现了任何问题,欢迎随时发送支持工单至 [email protected]

  • PBSEditor.isEditing

    PBSEditor.isEditing

    检查 PBS 是否已开启且处于编辑模式。

    用法

    if ( PBSEditor.isEditing() ) {
    	// 在编辑时执行某些操作。
    }

    参数

    无。

    返回值

    Boolean。当前处于编辑状态时为 true,非编辑状态时为 false。

  • pbs_iframe_header

    pbs_iframe_header

    在 PBS 用于在编辑期间呈现其响应式视图的 iframe 中使用。它在 <head> 标签闭合之前被调用,可用于添加脚本和样式。

    参数

    无。

    示例

    add_action( 'pbs_iframe_header', 'change_bg_color' );
    
    function change_bg_color() {
    	?>
    	<style>
    	body {
    		background-color: hotpink;
    	}
    	</style>
    	<?php
    }
  • 我在哪里可以获得支持?

    我在哪里可以获得支持?

    如果您遇到问题,我们随时乐意为您提供帮助!但首先请先查看文档页面,您可能会在这里找到答案并节省时间。

    • Lite 版本不提供支持……漏洞除外。
    • 仅为 Premium 插件提供支持,且前提是您拥有有效许可证。
    • 许可证自购买之日起 1 年内有效。

    请将您的支持咨询发送电子邮件至  [email protected]

  • 如何阻止 PBS 显示

    如何阻止 PBS 显示

    您可以使用 pbs_is_editable_by_user 过滤器来阻止 PB Sandwich 在前端显示。

    例如,要阻止 PB Sandwich 在别名为 slider 的自定义文章类型中显示,您可以在 functions.php 中添加这段代码:

    add_filter( 'pbs_is_editable_by_user', 'stop_pbs_in_sliders' );
    
    function stop_pbs_in_sliders( $editable ) {
    	if ( is_singular( 'slider' ) ) {
    		return false;
    	}
    	return $editable;
    }
    

    要针对特定页面/文章阻止 PB Sandwich,可以使用文章 ID 进行判断:

    add_filter( 'pbs_is_editable_by_user', 'stop_pbs_for_123' );
    
    function stop_pbs_for_123( $editable ) {
    	global $post;
    	if ( is_singular() && ! empty( $post ) ) {
    		if ( '123' === $post->ID ) {
    			return false;
    		}
    	}
    	return $editable;
    }
    
  • pbs_stats_tracking

    pbs_stats_tracking

    每次已选择同意的用户在 PBS 编辑器中保存时,PBS 都会发送使用情况统计信息。该过滤器可用于停止发送数据。

    参数

    $true

    布尔值。该值始终为 true。

  • pbs.iframe.resized

    pbs.iframe.resized

    当用户在不同的响应式视图之间切换时触发。

    参数

    无。

  • 在哪里获取支持?

    在哪里获取支持?

    如果您遇到问题,我们随时为您提供帮助!但请先查看文档页面,您可能会在这里找到答案并节省时间。

    • Lite 版本不提供技术支持……错误(bug)除外。
    • 技术支持仅适用于 Premium 插件,且仅在您拥有有效许可证的情况下提供。
    • 许可证自购买之日起 1 年内有效。
    • 如果您的许可证已过期,您可以享受折扣优惠进行续费。

    请将您的支持咨询发送电子邮件至  [email protected]

  • PageBuilderSandwich:: get_all_shortcodes

    获取站点中所有可用的短代码标签。

    用法

    $all_shortcodes = PageBuilderSandwich::get_all_shortcodes()
    

    参数

    无.

    返回值

    Array。包含所有检测到的短代码标签的数组。

  • pbs.option.changed

    pbs.option.changed

    当(检查器中的)选项发生更改时触发。

    参数

    无。

  • pbs_add_builder_wrapper_pre

    pbs_add_builder_wrapper_pre

    PBS >= 4.3

    PBS 会添加一个包装容器来标识文章的内容区域。该钩子在放置包装容器之前被调用。

    参数

    $content

    String。应用了包装容器的文章内容。

  • pbs_iframe_footer

    pbs_iframe_footer

    用于 PBS 在编辑过程中渲染其响应式视图所使用的 iframe 内。该动作在 <body> 标签闭合之前被调用,可用于添加脚本和样式。

    参数

    无。

  • pbs_is_editable_by_user

    pbs_is_editable_by_user

    PBS >= 4.3

    覆盖是否在前端加载 PBS 并允许用户使用 PBS 编辑文章的判定。

    参数

    $is_editable

    布尔值。如果文章可以使用 PBS 进行编辑,则为 True。否则为 False

    示例

    禁止 portfolio 文章类型使用 PBS 编辑

    add_filter( 'pbs_is_editable_by_user', 'disallow_portfolios' );
    
    function disallow_portfolios( $is_editable ) {
    	global $post;
    	if ( $post ) {
    		if ( 'portfolio' === get_post_type( $post ) ) {
    			return false;
    		}
    	}
    	return $is_editable;
    }
    
  • PageBuilderSandwich::instance

    PageBuilderSandwich::instance

    PBS >= 4.3

    获取 PageBuilderSandwich 的实例

    用法

    $pbs = PageBuilderSandwich::instance()
    

    参数

    无。

    返回值

    PageBuilderSandwich 对象。PBS 类的当前实例。

  • pbs_add_builder_wrapper

    pbs_add_builder_wrapper

    PBS 会添加一个包装器来标识文章的内容区域。这会在放置包装器后被调用。

    参数

    $content

    String。应用了包装器的文章内容。

  • PageBuilderSandwich:: is_editable_by_user

    用于检查当前文章的前端是否加载了 PBS

    用法

    PageBuilderSandwich::is_editable_by_user()
    

    参数

    无.

    返回值

    Boolean。如果 PBS 可以编辑该文章则为 true,否则为 false。

  • pbs_save_style

    pbs_save_style

    一个用于修改为文章保存的 CSS 样式的过滤器。当从 PBS 编辑器发起保存时,将调用此过滤器。

    参数

    $style

    字符串。发送以进行保存的 CSS 样式。

    $post_id

    整数。我们正在保存的文章 ID。

  • pbs.init

    pbs.init

    在 PBS 编辑器完成加载时调用(用户点击开始编辑按钮时不会调用)

    示例

    在 PBS 加载后执行某些操作

    wp.hooks.addAction( 'pbs.init', function() {
    	console.log( 'PBS is ready!' );
    }
  • pbs_shortcodes_to_hide_in_picker

    pbs_shortcodes_to_hide_in_picker

    要在 PBS 的短代码选择器中隐藏的短代码标签列表。如果您有一些显示在选择器弹出窗口中的短代码已被弃用,或者只是想对用户隐藏,请使用此过滤器。

    参数

    $shortcodes

    Array。短代码标签数组。

    示例

    从选择器中隐藏 短代码。

    add_filter( 'pbs_shortcodes_to_hide_in_picker, 'hide_embed_shortcode' );
    
    function hide_embed_shortcode( $shortcodes ) {
    	$shortcodes[] = 'embed';
    	return $shortcodes;
    }
  • Javascript 钩子

    Javascript 钩子

    Page Builder Sandwich 的主体是 Javascript,我们添加了大量方法,以便开发者能够扩展并为我们的页面构建器添加更多功能。

    为了方便开发者,我们效仿了 WordPress 的运作方式——通过钩子(hooks)!

    在 WordPress 中,您通常使用 add_filter() 和 add_action() 函数来修改或添加 WP 的行为。同样,在 PBS 中,您可以使用 wp.hooks.addFilter() 和 wp.hooks.addAction()。

    它们的使用方式也相同:使用过滤器来修改内容,使用动作来执行额外操作。这两个函数调用本质上与它们在 PHP 中的对应项相同,只不过它们在 Javascript 中运行。

    为了避免混淆 PHP 钩子和 Javascript 钩子,我们使用“点分命名法”(period-case)(自创词)来命名 Javascript 钩子。而 PHP 钩子均使用蛇形命名法(snake case):

    • pbs.save.payload – “点分命名法”,一个 JS 钩子
    • pbs_save_content_data – 蛇形命名法,一个 PHP 钩子

    请参阅左侧菜单中的 Javascript 动作(Javascript Actions)和 Javascript 过滤器(Javascript Filters)分类以浏览所有钩子。

    鸣谢

    如果您感到好奇,我们使用了 https://github.com/carldanley/WP-JS-Hooks 来在 Javascript 中添加这些实用的钩子调用

  • pbs_localize_frontend_scripts

    pbs_localize_frontend_scripts

    向前端的 pbsFrontendParams 对象添加 Javascript 属性。无论用户何时登录并编辑,pbsFrontendParams 对象在前端均可用。

    参数

    $params

    数组。包含键和值的数组,这些键和值将在 window 级 Javascript 变量 pbsFrontendParams 中可用

    示例

    使变量在前端可访问

    add_filter( 'pbs_localize_frontend_scripts, 'add_my_property' );
    
    function add_my_property( $params ) {
    	
    	// 这将在 Javascript 中通过 pbsFrontendParams.myProperty 访问
    	$params['myProperty'] = 'My Property';
    	return $params;
    }
  • pbs.save.payload

    pbs.save.payload

    在编辑器保存内容之前立即调用。您可以使用此钩子放置在保存期间要发送的附加数据(这不会保存数据,只是通过 Ajax 将其发送到后端)

    参数

    payload

    FormData 对象。 通过 Ajax 发送用于保存的数据。

    示例

    wp.hooks.addAction( 'pbs.save.payload', function( payload ) {
    
    	// Add data to be sent during saving.
    	payload.append( 'my_data', 'My Data' );
    }
    
  • pbs_localize_scripts

    pbs_localize_scripts

    向前端的 pbsParams 对象添加 Javascript 属性。当用户登录并有权限编辑页面时,pbsParams 对象在前端可用。

    此变量还包含 PBS 在编辑期间使用的许多属性,例如 nonce、所有已加载简码的列表以及翻译字符串。

    参数

    $params

    数组。包含键和值的数组,这些键和值将在 window 级别的 Javascript 变量 pbsParams 中可用

    示例

    将未检测到的简码添加到编辑器中

    add_filter( 'pbs_frontend_scripts, 'add_my_shortcode' );
    
    function add_my_shortcode( $params ) {
    	$params['shortcodes'][] = 'my_shortcode';
    	return $params;
    }
  • pbs_enqueue_scripts

    pbs_enqueue_scripts

    与 PBS 一起排队加载脚本或样式。仅当文章可使用 PBS 编辑时才会调用此钩子。当页面无法使用 PBS 编辑时,则根本不会使用此钩子。

    参数

    无。

    示例

    当 PBS 加载时,同时也排队加载 my-script.js

    add_action( 'pbs_enqueue_scripts, 'add_my_script' );
    
    function add_my_script() {
    	wp_enqueue_script( 'my-script' , plugins_url( 'js/my-script.js', __FILE__ ) );
    }
    
  • 我在哪里可以下载高级插件?

  • 添加同页面滚动锚点链接

    添加同页面平滑滚动锚点链接

    这是一项高级功能,适用于 4.0.1+ 版本

    同页面滚动锚点链接是指向同一页面中特定位置的链接。当您点击同页面链接时,您的浏览器将平滑滚动至目标区域。

    创建同页面锚点链接需要准备两项内容:

    1. 元素上的自定义类(Class)或自定义 ID,以及
    2. 引用该自定义类或 ID 的链接或按钮

    1. 元素上的自定义类或自定义 ID

    选择页面底部附近的任意元素,然后打开其属性设置。在高级区域中,添加名为“go_here”的自定义类或自定义 ID

    2. 引用该自定义类或 ID 的链接或按钮

    现在,在页面顶部附近创建链接或添加按钮元素。不要添加常规 URL 作为链接,如果您将“go_here”添加为自定义类,请使用“.go_here”(带点);如果您将其添加为自定义 ID,请使用“#go_here”(带井号)。

    保存页面后,当您点击链接/按钮时,页面现在应平滑滚动到底部的该元素。

    您还可以使用此方法定位命名锚点

    命名锚点,例如

    <a name="go_here"></a>

    也可以通过添加指向“#go_here”(带井号)的链接来定位

    其他用途

    您还可以定位页面中的任何其他区域,甚至是编辑器区域之外的区域,只要您使用它们的类名或 ID 进行定位即可。

  • pbs_saved_content

    pbs_saved_content

    在内容保存后调用。当从 PBS 编辑器发起保存时调用此项。

    参数

    无

  • pbs_save_content_data

    pbs_save_content_data

    用于修改待保存文章数据的过滤器。当从 PBS 编辑器发起保存时调用。

    参数

    $post_data

    数组。待保存的最终文章数据,随后会直接传递给 wp_update_post()。

    $_POST

    数组。从编辑器发送用于保存的原始文章数据。该数据已通过 nonce 验证。

    $post_id

    整数。我们正在保存的文章 ID。

    示例

    add_filter( 'pbs_save_content_data', 'save_always_as_draft', 10, 3 );
    
    function save_always_as_draft( $post_data, $_post, $post_id ) {
    
    	// For some reason, we always want the post to be a draft.
    	$post_data['post_status'] = 'draft';
    	
    	return $post_data;
    }
  • 如何使用响应式模式

    如何使用响应式模式

    从 4.0 版本开始,您现在可以在编辑时在桌面、平板电脑和手机视图之间切换!我们称之为响应式模式。在响应式模式下,您的网站将调整为较小的尺寸,以模拟您的网站在较小屏幕上的显示效果。

    受限的编辑功能

    在平板电脑或手机视图中查看您的网站时,您将拥有受限的编辑功能。在此状态下,您只能执行以下操作:

    • 编辑文本
    • 使用文本格式工具栏设置文本样式
    • 调整元素和行的部分外边距 *
    • 在平板电脑或手机中隐藏行

    * PBS 会对您的元素和行应用某些响应式样式,因此某些外边距将无法调整。

    以下是您无法执行的操作:

    • 添加、删除、拖动元素
    • 查看元素属性
    • 调整图像、图标、行和其他可调整大小元素的大小

    针对特定屏幕尺寸调整外边距

    如果您在平板电脑或手机视图中查看网站,您进行的任何外边距调整都仅适用于当前视图和更小的视图。这使您可以对设计进行微调,使其在较小屏幕上看起来更美观,且与完整的桌面版本相互独立。

    以下是一个示例,以便更清楚地进行说明。

    1. 如果您在平板电脑模式下查看网站并调整标题的外边距,该调整将仅应用于平板电脑屏幕。同时该调整也会应用于手机屏幕。如果您返回桌面模式,将恢复原始外边距。
    2. 现在,如果您进入手机模式并再次进一步调整同一外边距,该调整将仅应用于手机屏幕。之后,您将在桌面、平板电脑或手机上拥有不同的外边距。

    这仅适用于外边距调整,文本更改或文本样式更改将应用于所有屏幕尺寸。

    在平板电脑或手机尺寸中隐藏内容

    在平板电脑或手机视图中查看时,当您将鼠标悬停在行上时,会显示一个新的“眼睛”工具栏按钮。单击此按钮将允许您在当前屏幕尺寸下显示/隐藏该行。

    隐藏的行在编辑时会变得略微透明,以表明在您完成编辑后它们将被隐藏。

    请注意,此功能仅适用于行。

  • CloudFlare & Rocket Loader 兼容性

    CloudFlare 与 Rocket Loader 兼容性

    CloudFlare 是一种被广泛使用的免费 DNS CDN。它非常出色,但 PBS 目前在其 Rocket Loader 功能方面存在一些问题。Rocket Loader 可以缩短 Javascript 文件的加载时间,但它会打乱 PBS 脚本的依赖关系和调用顺序。如果您启用了 Rocket Loader,Page Builder Sandwich 的编辑按钮将不会出现(且 Javascript 控制台不会显示任何错误)。

    要关闭 Rocket Loader,请登录您的 CloudFlare 帐户并进入您域名的设置。导航至“Speed”(速度)设置:

    e3e66a8071 file

    然后向下滚动到 Rocket Loader 设置,确保将该设置关闭:

    e4dff5b8c0 file tPnWvP09FF

    关闭此项后,请务必从“Cache”(缓存)设置中清除整个网站的缓存:

    db1850599b file hSGiBXG0LF

    清除所有缓存后,您可以刷新页面,Page Builder Sandwich 编辑按钮现在应该就会显示出来了。
    fd8786bba0 file AJdoCLbOcB

  • 在您销售的主题中捆绑 PBS

    在您销售的主题中捆绑 PBS

    如果您是一名主题开发者,在您的主题中包含 PBS 可以极大地提升您产品的价值。

    请通过 [email protected] 与我们联系,让我们携手合作!

  • pbs_pre_save_content

    pbs_pre_save_content

    在保存内容之前被调用。当从 PBS 编辑器发起保存时调用此函数。

    参数

    无

  • pbs_save_content

    pbs_save_content

    用于修改待保存文章内容的过滤器。当从 PBS 编辑器发起保存时会调用此过滤器。

    参数

    $content

    String。 要保存的最终文章内容。

    $post_id

    Int。正在保存的文章 ID。

  • 使用 Markdown

    使用 Markdown

    Markdown 基本上是一种在编辑时输入的语法,用于添加或更改文本格式。它们类似于快捷键,但您不需要按下组合键,而是直接键入。

    以下是 Page Builder Sandwich 中支持的所有 Markdown 语法列表。

    块级元素

    (注意空格)

    # 标题1
    ## 标题2

    直至:

    ###### 标题6 
    > 引用块 
    (4个空格)预格式化文本/代码 

    列表

    * 无序列表  - 无序列表 
    1. 编号列表  1) 编号列表 

    水平分割线

    -  ------------------------------(或多个短划线) 

    链接

    输入网址将自动转换为链接:

    前往 https://pagebuildersandwich.com 
    虚拟占位内容

    输入“lorem”然后按 Tab 键即可创建虚拟文本内容。

  • Varnish Cache 缓存

    Varnish Cache

    在使用 Varnish Cache 时,如果在保存更改后仍然看到旧内容,则可能是 Varnish Cache 没有自动清除。

    有一些 WordPress 插件允许您清除缓存: https://wordpress.org/plugins/search/varnish+cache/

    如果这不起作用,您还可以通过在终端中执行此命令来手动清除 Varnish Cache:

    curl -X PURGE http://mysite.com/my-page/
  • 如何停用插件?

    如何停用插件?

    要停用 PBS,请先登录到您的仪表盘 / 后台,然后导航至插件 > 已安装的插件:

    07b25420a6 file LRa1eOB7Vw

    进入“插件”页面后,向下滚动插件列表并找到 Page Builder Sandwich。在名称正下方,您应该能够看到停用链接以及其他链接,例如“编辑”或“更改许可证”(具体可能因您的网站而异)。点击“停用”链接即可禁用该插件。

    555d96ed73 file eYVN9yZNif

  • 刷新后看不到我的更改

    刷新后看不到所做的更改

    如果您已经在页面中保存了更改,并且……

    1. 刷新后恢复为旧内容;或者
    2. 在其他浏览器(或无痕模式)中查看页面时仍能看到旧内容;

    可能原因 #1:缓存

    这可能意味着保存操作未能触发缓存解决方案清除其存储的数据。

    如果您正在使用某种缓存解决方案——例如像 W3 Total Cache 这样的缓存插件、像 Memcached 或 Redis 这样的服务端缓存软件,或者像 CloudFlare 这样的 DNS 缓存——它可能尚未清除已保存的内容。

    检查是否属于这种情况的一种方法是在后台编辑页面(常规方式),然后在前台查看页面。如果内容没有变化,那么可能是缓存没有自动清除。

    一些非 WordPress 缓存解决方案配有配套的 WordPress 插件,可帮助刷新或清除当前缓存,而 WordPress 解决方案通常具有用于此目的的按钮或选项。

    可能原因 #2:发生错误

    在保存过程中也有可能发生了某种 PHP 错误。

    要检查是否出现这种情况,请打开开发者控制台(建议使用 Chrome),然后切换到 Network(网络)选项卡。在该页面中,于 PBS 中保存您的更改,然后您应该会看到指向 admin-ajax.php 的多个条目。如果您看到该条目显示为红色,则表明发生了错误。检查您是否看到类似以下内容:

    38a8eb3ad5 file QhA6mhZ3Fo

    如果属于这种情况,请发送电子邮件至 [email protected],并附上必要的登录凭据,以便我们为您进行检查和修复。

    可能原因 #3:Wordfence 防火墙

    请在此处阅读有关 Wordfence 兼容性的文章:http://docs.pagebuildersandwich.com/article/214-wordfence-firewall-setup-compatibility

  • 我在激活许可证时遇到了问题

    我在激活许可证时遇到了问题

    注意:这不适用于 Envato 客户

    如果您在激活许可证时遇到错误,可以尝试以下几种方法:

    1. 停用然后再启用插件

    这种情况多发生在升级到更高版本的用户身上。如果您直接手动更新了插件的文件,跳过了完整的更新或停用-启用步骤,某些进程可能未能正常运行。请停用该插件,然后重新启用它,并尝试再次输入您的许可证。

    2. 清除 Freemius 缓存

    从 v3.2 开始,Page Builder Sandwich 已与 Freemius 集成。在某些情况下,清除 Freemius 数据可以解决许可证激活错误。以下是解决方法。

    进入您的控制面板,然后将您的 URL 更改为 http://yoursite.com/wp-admin/admin.php?page=freemius(别忘了将 URL 更改为与您的网站相对应的地址)。如果您看到下方所示的界面,说明您找对地方了。

    eccf3dd364 file SmWPmZQS5b

    点击 Delete All Accounts(删除所有帐户)按钮,然后再点击 Clear API Cache(清除 API 缓存)按钮。完成此操作后,尝试再次输入您的许可证密钥。

    3. 如果仍然无法解决,请联系我们

    如果仍无法解决,请通过 [email protected] 联系我们,并向我们提供有关问题和您网站的详细信息。

  • 为您的元素添加出场动画

    为您的元素添加淡入/入场动画

    在大多数元素中(但不包括简码),您可以指定一个在元素于屏幕上变为可见时播放的入场动画。

    为此,请将鼠标悬停在某个元素上以显示工具栏,然后点击齿轮按钮。

    5c220b4ac9 file Odem5RLPok

    这将调出检查器。导航到动画(Animations)区域,将其展开,然后选择一个动画。

    d2675375dd file bKhEnSFBNj

    选择动画后,它应该会播放以向您展示预览效果。您可以使用提供的其他选项进一步优化动画。

    动画仅在用户滚动并且元素进入视野时播放。如果您访问页面时该元素已处于可见状态,则不会触发动画。

  • 删除插件后我会丢失所有页面吗?

    删除插件后我会丢失所有页面吗?

    不,你不会!你的所有页面和内容仍应保留在你的网站中。这意味着在从免费版升级到高级版时,或者只是进行测试时,你可以安全地停用 PBS。

    但是,并非所有内容看起来都会保持原样。你会注意到页面中的某些项目会发生变化,因为 PBS 包含了某些更复杂的元素所需的额外样式和脚本。

    停用 PBS 后将保留以下内容:

    • 文本样式
    • 行和列
    • 背景图片
    • 圆形图片

    停用 PBS 后将消失以下内容:

    • 行和列的响应式(在较小的屏幕上看起来不会那么酷炫)
    • 视差背景和其他背景特效
    • 阴影
    • 轮播图
  • PBS 视频导览

    PBS 视频导览

    以下是 PBS 视频导览:

  • 让图片探出容器外部

    让图片探出容器外

    这里我添加了一行带有背景颜色的内容,然后在其中添加了一张图片。效果如下:

    7a1ad1cd25 file 029qnDthFO要让它“探出”容器上方,请将鼠标悬停在要移动的元素上。当轮廓显示出来时,将鼠标移到轮廓顶部的上方。它应该会显示当前的上外边距(top margin)值:

    3bb498880e file FqLy7ZTTHD

    向上单击并拖动上外边距以减小边距,使其变为负值:

    4a89f1e31e file Zm8Z0aOtCs

    现在图片就“探出”行外了!

    如果元素超出该行时被截断,请打开该行的属性检查器,并在高级选项中关闭溢出隐藏(overflow hidden)选项:

    0787678afd file pUDej5DLsQ

  • 缓存与压缩插件(W3 Total Cache、WP Super Cache、Comet Cache、Better WordPress Minify 等)

    缓存与压缩插件(W3 Total Cache、WP Super Cache、Comet Cache、Better WordPress Minify 等)

    Page Builder Sandwich 可与所有缓存插件配合使用。但是,如果开启了它们的压缩(minify)或缓存功能,可能会遇到一些问题。

    只要确保针对已登录用户禁用压缩,它应该就能正常工作。

    我们在此仅以 W3 Total Cache 的设置为例进行展示,但其他缓存与压缩插件也应该具有类似的设置。

    W3 Total Cache

    d7dce04be3 file EG564wdzqj

    确保在 Performance > Page Cache 下勾选了 Don’t cache pages for logged in users(不为已登录用户缓存页面)

    134a30cd2b file ONknBiLRav

    如果您正在使用压缩功能,请确保在 Performance > Minify 下勾选了 Disable minify for logged in users(对已登录用户禁用压缩)

  • 插入 Lorem Ipsum 占位符/虚拟文本

    插入 Lorem Ipsum 占位/虚拟文本

    要快速添加一些虚拟文本,只需输入单词“lorem”,然后按 Tab 或 Enter 键,即可快速添加一些 lorem ipsum 占位文本:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolor sed numquam? Sapiente autem adipisci, minus expedita enim, suscipit laboriosam deleniti possimus sequi pariatur explicabo numquam alias atque officia sit.

  • 内边距、外边距及其他样式未应用到元素上

    内边距、外边距及其他样式未应用到元素上

    如果您尝试拖动上下外边距或内边距手柄,而元素的外边距/内边距没有改变,则可能是其他样式强行覆盖了所有样式更改。当您无法更改背景、边框,或者透明图像始终带有背景色时,也可能会发生这种情况。

    要找到问题所在,请打开浏览器的检查器并检查该元素。浏览该元素的样式。如果您看到类似以下内容:

    ca574b601b file pAMRmfV9DQ

    那么您可以确定是您的主题或插件阻止了将任何其他样式应用到该元素。将鼠标悬停在样式表上以查明它来自哪个主题/插件。

    要解决此问题,请删除样式的“! important”部分,您应该就能够再次应用样式了。您可能需要联系主题或插件的作者来解决此问题。

  • 嵌入 YouTube/Twitter/Facebook/外部内容

    嵌入 YouTube/Twitter/Facebook/外部内容

    要嵌入来自外部网站的内容,只需粘贴 URL 并按回车键。例如,您可以复制并粘贴来自 YouTube 的此 URL:

    https://www.youtube.com/watch?v=dQw4w9WgXcQ

    也可以通过粘贴 <iframe> 嵌入代码来进行 Iframe 嵌入。例如,复制并粘贴此嵌入字符串:

    <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0″ frameborder=”0″ allowfullscreen></iframe>

    您可以嵌入 WordPress Codex 中列出的网站的 URL: https://codex.wordpress.org/Embeds 以及任何支持 oEmbed 的网站。

  • 编辑时一直弹出“会话已过期”提示

    编辑时总是弹出“会话已过期”弹窗

    Page Builder Sandwich 会定期检查您是否仍登录在 WordPress 中。执行此操作是为了确保在您点击保存按钮时,所做的更改确实能够保存。这同样用于文章锁定和自动保存功能。

    我们依靠 WordPress Heartbeat API 来执行检查,而它反过来又依赖于浏览器的 Cookie 和会话。因此,如果您在编辑时一直收到这些“会话已过期”弹窗,可能是某些原因阻碍了 WordPress 正确跟踪您的登录状态。您可以采取以下措施来解决此问题:

    清空缓存

    如果您安装了缓存插件、或存在 DNS 缓存或任何形式的缓存,请清除它们。同时清除您的浏览器缓存。您可能未能加载到网站的最新脚本。

    清除 Cookie

    也有可能是您的 Cookie 损坏了,这可以通过在浏览器设置中清除浏览器 Cookie 轻松解决。该选项通常位于清除浏览器缓存的选项附近。

    检查站点网址(URL)设置

    前往设置 > 常规并检查您的设置。找到 WordPress 地址(URL)和站点地址(URL)的设置。两者的域名和协议应与您的实际域名一致。例如,如果其中一个使用的是“http://”,但您访问网站时使用的是“https://”,那么设置应改为“https://”。另一个常见问题是,其中一个网址包含“www”,而另一个不包含。

    这些应该保持一致:

    a96f7d7412 file jRzgrZO0et

    或者:

    e00b20cbb4 file dTXaKDFHET

    要解决此问题,您可以在设置 > 常规中更改这些设置。如果您无法直接编辑这些设置,可以打开 FTP 并编辑 wp-config.php 文件,添加以下几行代码:

    define( 'WP_HOME', 'http://example.com' );
    define( 'WP_SITEURL', 'http://example.com' );
    
    之后,清除缓存和 Cookie 并重试。

    确保未禁用 Heartbeat API

    最后,检查您是否有插件(或主题)强行禁用了 WordPress 的 Heartbeat API。它非常有用,我们个人建议您保持其启用状态。
  • 为背景图片着色

    为背景图像着色

    您可以为行和背景添加背景图像。更棒的是,您还可以用某种颜色为背景图像添加色彩叠加(色调),使其更契合您的设计风格。

    例如,我这里有一行带背景图像的内容,上面覆盖着一些白色文本。由于我选择的背景图像,目前很难看清这些文本。

    2b91fa8f2a file mzgaf4V044

    为了让视觉效果更佳,我们可以为背景图像添加一些颜色。为此,请将鼠标悬停在行上,然后点击该行的齿轮图标以打开其属性。转到背景(Background)选项,然后开启背景图像色调(Background Image Tint)。

    bafd9f5d79 file VqSdQk08dV开启后,您可以更改背景颜色,现在它就会为您的背景图像添加带有颜色的色调。您还可以调整色调的强度或不透明度。这是我将背景调整为绿色后的效果,使文本更加清晰可见:

    766d6beaa3 file jSAuV7QQ48

  • 如何从我的页面中移除页眉或菜单

    如何从我的页面中移除页眉或菜单

    注意:默认情况下,仅首页移除了页眉。

    要从任何页面中移除页眉或菜单,您需要一个允许您添加自定义 CSS 的插件,例如 Jetpack。

    要移除页眉,您需要文章的 文章 ID,然后添加此自定义 CSS(将此处的 9999 替换为您的文章 ID):

    body.page-id-9999 #masthead {
    	display: none;
    }
    

    要从页面中移除菜单(将此处的 9999 替换为您的文章 ID):

    body.page-id-9999 #header-wrapper {
    	display: none;
    }
    

    或者仅从主页移除菜单时:

    body.page-id-9999 #header-wrapper {
     	display: none;
    }
  • 轮播元素

    轮播元素

    可用性

    精简版 不可用
    高级版 所有功能均可用

    • 单个轮播幻灯片中支持多列。
    • 可视化编辑轮播幻灯片。
    • 像编辑行或列一样编辑轮播幻灯片。可以添加文本和图像等其他元素。

    用法

    轮播是一种将内容循环反复展示在视野中的新颖方式。Page Builder Sandwich 拥有可直接使用的原生轮播元素,无需再使用外部轮播插件。

    点击轮播元素的齿轮按钮可以配置轮播的行为,例如幻灯片动画、延迟等。创建时,系统会为您提供三张轮播幻灯片供您操作,并提供添加或删除幻灯片的选项。所有这些幻灯片均支持常规元素,如文本、图像和某些短代码。

    切换幻灯片就像选择导航按钮本身一样简单。幻灯片的顺序也可以通过属性(齿轮图标)进行修改。

    适用场景

    • 突出显示产品、图片、消息以及其他需要在视觉上加以强调的类似内容。
    • 在有限的空间内为更多详情和信息腾出空间。
    • 带有 1 个或多个行动呼吁按钮的着陆页标题、开篇页面,以及更常见的首页。
  • 更改您的文章状态

    更改文章状态

    要更改文章状态,请将鼠标悬停在屏幕左上方保存按钮上的下拉指示器上。这将显示更多保存选项。

    ae0cf6f413 file

  • 如何在精简版中隐藏黄色高级版标记

    如何在 Lite 版本中隐藏黄色高级版标记

    如果您正在使用 Lite 版本,您可能已经注意到了黄色的三角形标记。这些标记用于指示某个按钮/元素/选项是否属于高级功能。

    如果您想要隐藏它们,可以进入仪表盘,在 PBSandwich > Settings 中导航至设置页面,并勾选 Hide Premium Feature Flags 设置项

  • 您可以在 PBS 中做的事情

    您可以在 PBS 中执行的操作

    我们不希望界面杂乱无章,而是希望一切都直观且易于发现。因此,尽管 Page Builder Sandwich 的用户界面看起来很简单,但它非常强大,您可以在编辑时进行许多操作。

    打字时可插入的特殊内容

    • 粘贴可嵌入的 URL(例如 YouTube 视频 URL),然后按回车键进行嵌入
    • 粘贴 iframe HTML 代码,然后按回车键进行嵌入
    • 输入或粘贴短代码(shortcode),然后按回车键进行渲染

    使用鼠标光标操作内容

    您还可以使用鼠标光标执行许多绝妙的操作。当您将鼠标悬停在不同元素上时,会出现交互式浮层和工具栏。它们各自具有不同的功能,例如:

    • 拖拽元素 – 按住任意元素上的鼠标左键即可拖动它,然后将其拖放到另一个元素上进行移动。按住约 500 毫秒即可开始拖动。
    • 上下边距 – 您可以通过拖动文本和其他元素上的箭头浮层来调整元素的边距。按住 Shift + Ctrl(Mac 上为 Command)的同时单击角标可重置边距。
    • 列宽 – 拖动列的边缘以调整其宽度,数字指示器将显示当前的百分比宽度。
    • 调整大小 – 拖动图像和图标的角以调整它们的大小。按住 Shift + Ctrl 的同时单击角标可重置大小。
  • HTML 元素

    HTML 元素

    适用版本

    精简版 提供所有功能
    高级版 提供所有功能

    使用方法

    在检查器中点击 HTML 元素以添加新的 HTML 元素,此时会弹出一个模态窗口。在其中输入或粘贴您的 HTML 代码,然后点击保存 HTML。您的 HTML 现在应该会显示在编辑器内。

    将鼠标悬停在 HTML 元素上以显示工具栏。您可以通过点击工具栏中的铅笔图标或双击元素本身来编辑 HTML。

    适用场景

    • Iframe 嵌入
    • 统计跟踪或其他跟踪代码
    • 自定义 HTML 代码
  • “使用 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 变量可能会有所不同,但原理是相同的。如果可行,建议您创建一个子主题,而不是直接在主题中应用此修改。此外,该修改可能会产生副作用,因此最好就此咨询您的主题作者。

  • 编辑您的文章标题

    编辑文章标题

    当您开始使用 PBS 进行编辑时,将鼠标悬停在页面/文章的标题上,标题上应出现一个轮廓。点击标题即可将光标置于其上并进行修改。

    标题区域不提供格式化工具,您无法修改其样式,也无法向标题添加元素。

  • 了解行与列

    了解行和列

    行和列是可用于创建分节内容的工具。

    在新创建的页面/文章中使用 Page Builder Sandwich 进行编辑时,您输入的内容都将放置在单列中。这非常适合撰写博客文章,但如果您想为着陆页或联系页面提供特殊布局,您可能会需要双列布局,甚至在页面中使用不同列的混合布局。

    您可以使用检查器中的这些按钮来添加行和列:

    22ec073e6a file ythKcmfXHF

    添加后,新行将显示轮廓:

    d1bfd8117d file bB2ec01I6R

    您可以在行和列中放置任何内容——文本、简码、小工具,甚至可以添加更多行和列。

    当选中某行(或行内的内容)时,检查器中将提供更多选项。您可以使用这些按钮来进一步设置分节的样式:

    d9ddd0c520 file EaSMeFS0nW

    在检查器下方,还有用于设置列样式的其他选项。

    您可以通过按住行本身将其移动到不同位置(如果您按住其内部的元素,拖动的将是该元素而不是行)。

  • 按钮元素

    按钮元素

    可用性

    精简版 不可用
    高级版 所有功能均可用

    • 按钮元素
    • 样式
    • 按钮图标

    用法

    可以选择突出显示部分文本,然后点击检查器中的按钮元素。这将弹出一个模态窗口,您可以在其中输入按钮要链接的 URL。您还可以从那里搜索网站中已有的任何现有网页。

    与其他元素不同,按钮是内联放置的,这意味着它们将与其他文本(或其他按钮)并排放置。您无法将单个按钮拖放到其他位置,而是需要将按钮连同其周围的文本一起拖动。

    在编辑时,当您点击某个按钮时,您将能够在检查器中看到其他样式选项。您还可以将鼠标悬停在按钮上以查看它们链接到的 URL 以及其他命令。

    适用于

    • 链接到其他页面
    • “阅读更多”或“了解更多”链接
    • 带有 1 个或多个号召性用语按钮的着陆页标题
  • 如何使用插件 Zip 文件手动更新 PBS

    如何使用插件 Zip 压缩包手动更新 PBS

    注意:当您已经安装并激活了 PBS,并且想要使用从网站下载的 zip 压缩包,或者我们通过电子邮件发送给您的附件进行更新时,请按此操作。

    注意:我们使用另一个插件来执行更新,这使我们无需先卸载即可直接更新 PBS。

    前往插件 > 安装插件,然后在搜索框中搜索插件“Easy Theme and Plugin Upgrades”

    f0dcdeeffe file GD3oacMvwc

    找到该插件后,安装并激活它。

    e8441d3ad7 file Z7Xzi6kQD8

    激活 Easy Theme and Plugin Upgrades 插件后,再次前往插件 > 安装插件,然后点击靠近顶部的上传插件按钮:

    4de275a631 file A4JzQMWjzu

    选择并安装 Page Builder Sandwich zip 压缩包文件,

    de7803a733 file oUXOASkueT

    大功告成。现在您应该已经拥有最新版本的 PBS 了。

  • 地图元素

    地图元素

    可用性

    精简版 可用,具有有限的样式设置
    高级版 所有功能均可用

    • 自定义地图图标
    • 彩色地图
    • 通过 snazzymaps.com 自定义样式地图 / 配色方案

    用法

    点击地图元素以向页面添加地图。每当选中地图元素时,属性检查器都会显示地图设置。您可以在属性检查器的位置字段中输入纬度和经度坐标或地址,使地图以该区域为中心。那里还提供其他样式设置选项。

    您还可以通过平移或放大/缩小地图来进一步操作地图元素。请注意,您在地图上的更改将应用到该元素上。

    对于高级用户,您可以通过选择颜色为其添加色调来美化地图;另一个选择是使用 snazzymaps.com 生成一些配色方案然后使用它们。SnazzyMaps 可用于创建类似于此示例的配色方案:https://snazzymaps.com/style/20053/papuportal-dark 要使用这些配色方案,请将 Javascript style array 复制到属性检查器中。

    地图高度可以调整,但地图宽度不能调整,并且始终会调整为可用的最大宽度。要调整其大小,请将地图放置在行和列中。您还可以将地图设置为占用浏览器的全屏宽度。

    适用于

    • 联系页面
    • 门店 / 分支机构定位器
    • 单页网站
  • 如何使用 Page Builder Sandwich

    如何使用 Page Builder Sandwich

    Page Builder Sandwich 与传统的页面构建器不同,它简单直观,极易上手。

    您可以观看下方视频,进行快速了解。

    编辑器在哪里?

    首先,创建一个新页面、文章或自定义文章类型(CPT)。然后在前端访问您的新文章或任何已有文章。PBS 是 100% 前端操作,您无需在后台繁琐调试。

    页面顶部(管理栏上)应该有一个“Page Builder Sandwich”按钮,点击它即可开始编辑。您会看到文本格式化工具栏从顶部弹出,添加元素面板从侧面滑出。您主题的内容区域现在就变成了您的编辑器!

    您只能使用 PBS 编辑单页面。无法编辑博客文章列表或 404 页面,因为这些是由您的主题生成的。文章、页面和自定义文章类型均可正常编辑。

    编辑您的内容

    现在精彩的部分来了……一旦进入前端并处于编辑器中,点击内容中的任何文本或点击内容区域内部,即可直接开始输入!与其他页面构建器不同,PBS 允许您直接编辑内容,无需通过弹出对话框。

    设置内容格式 / 美化页面

    dcb1615380 file 9OtagMFi2c

    编辑时,顶部的区域称为文本格式栏。该栏包含用于设置文本样式的所有格式化工具,例如:颜色、加粗、斜体、对齐方式、添加链接、项目符号等。将鼠标悬停在每个按钮上即可查看该工具的功能。

    添加元素

    ecfd309bb2 file yDqiNEv73s

    将鼠标悬停在屏幕左上方的“添加元素”按钮上,即可显示添加元素面板。您也可以直接将鼠标移至屏幕左侧以将其呼出。

    要插入任何元素,请按住鼠标左键拖动元素,然后将其拖入内容区域。放置该元素的目标区域会高亮显示。松开鼠标按钮即可放置元素。

    设置元素样式与修改元素

    将鼠标悬停在内容中的任何元素上,元素上方就会显示轮廓线和工具栏。

    0046713cb7 file YU6nUCc7jY您可以将鼠标悬停在轮廓边缘,以增加/减少元素之间的边距。

    您还可以点击工具栏上的按钮对元素执行快捷操作。点击工具栏上的齿轮图标将打开包含更多选项的属性检查器。

    5c220b4ac9 file Odem5RLPok

    属性检查器

    3e7e48b754 file INy1v5z9Oz

    属性检查器让您能够更全面地掌控元素的外观。您可以添加许多效果,例如阴影、动画、修改地图颜色、圆角边框等等。

    您还可以访问元素父级的属性。例如,如果您在列中放置了一张图片并打开属性检查器,您可以访问该图片、包含它的列以及包含该列的行的属性。

    属性检查器包含针对不同元素的众多不同设置,请务必都尝试看看。

    使用短代码

    Page Builder Sandwich 会在前端向您显示实际的短代码,而且您也可以轻松对其进行编辑!

    edee730340 file TqfWB9yv3y

    如果您记住了短代码,可以直接在内容中输入来插入短代码。但如果您没有全部记住(谁能记住呢?),检查器会列出您网站中可用的所有短代码。将检查器中的 Shortcode 按钮拖入内容区域,找到您要插入的短代码,点击它即可插入。

    短代码会在前端渲染为实际内容,若要编辑它们,您可以选中短代码并在检查器中查看其属性。或者为了更精细的控制,您可以双击短代码以原始代码形式进行编辑。完成编辑后,您的短代码将更新以反映更改。

    重新排列您的内容

    在 PBS 中,您可以点击并拖动任何内容,并将其移动到任何位置。拖动某个内容时,将其移到页面中另一个元素的上方,您可以将其放置在任何其他内容的上方或下方。

    保存您的工作

    ae0cf6f413 file

    对设计感到满意后,只需点击页面左上角的保存按钮即可。大功告成!

  • 如何使用 Page Builder Sandwich

    Page Builder Sandwich 与常见的页面生成器不同,它简单明了,易于使用。

    您可以观看下方视频进行快速了解。

    编辑器在哪里?

    首先,创建一个新页面、文章或 CPT。然后在前台访问您的新文章或任何现有文章。PBS 是 100% 前端操作,您无需在后台反复折腾。

    在页面顶部(管理栏上)应该有一个“Page Builder Sandwich”按钮,点击它即可开始编辑。您会看到文本格式栏从顶部弹出,添加元素面板从侧边弹出。您主题的内容区域现在就变成了您的编辑器!

    您只能使用 PBS 编辑单个页面。您无法编辑博客文章列表或 404 页面,因为这些是由您的主题生成的。文章、页面和自定义文章类型都可以正常编辑。

    编辑您的内容

    现在到了最精彩的部分……一旦您进入前端并打开编辑器,只需点击内容中的任何文本或点击内容区域内部,即可开始输入!与其他页面生成器不同,PBS 允许您直接编辑内容,而无需通过弹出对话框。

    设置内容格式 / 让页面更美观

    dcb1615380 file 9OtagMFi2c

    编辑时,顶部的区域称为文本格式栏。该栏包含用于设置文本样式的所有格式化工具,例如:颜色、加粗、斜体、对齐方式、添加链接、项目符号等。将鼠标悬停在每个按钮上即可查看该工具的功能。

    添加元素

    ecfd309bb2 file yDqiNEv73s

    将鼠标悬停在屏幕左上方的“添加元素”按钮上,即可显示添加元素面板。您也可以只需将鼠标移到屏幕左侧使其显示。

    要插入任何元素,请按住鼠标左键拖选元素,然后将其拖动到内容区域。放置该元素的目标区域将突出显示。松开鼠标按键即可放置该元素。

    设置样式与修改元素

    将鼠标悬停在内容中的任何元素上,其周围将显示轮廓线和工具栏。

    0046713cb7 file YU6nUCc7jY您可以将鼠标悬停在轮廓边缘上,以增加/减少元素之间的边距。

    您还可以点击工具栏上的按钮对元素执行快捷操作。点击工具栏上的齿轮图标将调出包含更多选项的属性检查器。

    5c220b4ac9 file Odem5RLPok

    属性检查器

    3e7e48b754 file INy1v5z9Oz

    属性检查器让您可以更好地控制元素的外观。您可以添加许多效果,例如阴影、动画、更改地图颜色、圆角边框等。

    您还可以访问元素的父级属性。例如,如果您将图像放置在列中并打开属性检查器,则可以访问该图像的属性、其所在的列以及该列所在的行的属性。

    属性检查器针对不同元素提供了许多不同的设置,请务必逐一查看。

    使用简码

    Page Builder Sandwich 会在前端向您显示实际的简码,而且您还可以轻松地对其进行编辑!

    edee730340 file TqfWB9yv3y

    如果您记住了简码,可以通过直接在内容中输入来插入简码。但如果您没有全部记住(谁能全记住呢?),检查器中列出了您网站上可用的所有简码。从检查器中拖动简码按钮到您的内容区域,找到您要插入的简码,点击即可插入。

    简码会在前端渲染为实际内容。要编辑简码,您可以选中它并在检查器中查看其属性。或者为了更精细的控制,您可以双击简码直接以原始形式进行编辑。编辑完成后,您的简码将更新以反映所做的更改。

    重新排列内容

    使用 PBS,您可以点击并拖动任何内容并将其移动到任何位置。拖动某项内容时,将其移至页面中另一个元素上方,您可以将其移动到任何其他内容的上方或下方。

    保存您的工作

    ae0cf6f413 file

    对设计满意后,只需点击页面左上角的保存按钮即可。大功告成!

  • 在内容中导航

    浏览您的内容

    您可以使用鼠标快速将光标定位在内容中的不同区域或选择不同的元素。

    您也可以使用键盘上的方向键在内容中移动光标。您可以使用此功能在行之间向上或向下移动。

    在处理行和列时,您可以单击行的边缘以在行之前或之后添加内容。如果您有多行相互嵌套,并且想要在它们之间添加一些内容,这将特别有用。

  • 我找不到在哪里输入许可证密钥

    我找不到在哪里输入许可证密钥

    Lite 插件和 Premium 插件是两个不同的插件。为了使用高级功能,您需要停用(或卸载)Lite 版本,然后安装并激活 Premium 插件,接着输入您的许可证密钥。

    注意:如果您同时激活了 Lite 和 Premium 插件,插件会提示您在继续之前先停用现有的那个。

    从 pagebuildersandwich.com 购买 PBS 的客户请注意:您也可以从该网站下载插件,您目前拥有的许可证密钥应该仍然有效。如果无效,请联系我们,我们可以为您发放一个新的。

    购买 PBS 后,您应该会收到一封包含两项内容的电子邮件:

    1. 高级版插件的下载链接,以及
    2. 您的许可证密钥

    安装并激活高级版插件,然后您应该会看到此屏幕:

    afb003b84c file在此输入您的许可证密钥,然后点击 Agree & Activate License。现在高级功能即可使用了。

    或者,您也可以转到插件页面,并在列表中找到 Page Builder Sandwich 插件:

    adefed6601 file TmKnoXuFCH

    点击 Activate License 链接,您就可以从那里输入您的许可证了。

  • 键盘快捷键

    快捷键

    为了让您更高效地工作,您可以使用 Page Builder Sandwich 提供的各种快捷键。

    非格式化/工具快捷键组合

    这些是非格式化/工具命令的快捷键。对于格式化/工具快捷键,请将鼠标悬停在文本格式化栏上的各个按钮上以查看其快捷键组合。

    快捷键 说明
    CTRL+E (未处于编辑状态时) 开始编辑
    CTRL+SHIFT+R (处于编辑状态时) 刷新页面(因为 CTRL+R 用于右对齐)
    CTRL+S 保存更改
    CTRL+ESC 放弃更改并停止编辑
    CTRL+C 复制
    CTRL+V 粘贴
    CTRL+X 剪切
    CTRL+ENTER 换行 / 下一行
    CTRL+Z 撤消
    CTRL+SHIFT+Z (Mac)
    CTRL+Y (PC)
    重做
  • IMPress for IDX Broker

    IMPress for IDX Broker

    我们最近添加了一些修复程序,以解决同时启用 Page Builder Sandwich 和 IMPress for IDX Broker 插件时的兼容性问题,该问题此前会导致已登录用户的前端发生崩溃。

    该修复使 PBS 恢复了正常功能,但我们不得不移除了将 IDX Broker 小工具插入编辑器中的功能。尽管如此,您仍然可以在“外观 > 小工具”菜单中使用 IDX Broker 小工具。

  • 常见问题

    常见问题

    常见问题(技术类)

    我可以编辑首页(近期博客文章)、404、分类及其他类似页面吗?

    您只能使用 Page Builder Sandwich 编辑单篇页面或文章。可以这样理解:如果后台有带有内容编辑器的“新建文章”区域,您就可以使用 Page Builder Sandwich 对其进行编辑。

    支持哪些自定义文章类型 / CPT?

    您应该能够编辑任何自定义文章类型的内容。

    对页面加载时间 / 性能有什么影响?这会让我的网站加载变慢吗?

    我们已确保 Page Builder Sandwich 对您网站的性能影响微乎其微。在未登录状态下,至少只会排队加载行和列的 CSS 样式,以及您所使用的简码所必需的 JS 和 CSS 脚本。

    会排队加载哪些额外的 CSS & JS 文件?

    对于您的网站访客,至少只会排队加载行和列的 CSS 样式,并包含您所使用的简码所必需的 JS 和 CSS 脚本。