标签: 编辑器

  • WordPress古腾堡Gutenberg编辑器常见问题解答

    自WordPress 5.0发行,官方即开始使用名为Gutenberg(古腾堡)编辑器,虽然目前来说该编辑器的功能尚不够完善,但就WordPress的计划,未来还是会积极发展这一编辑器。在本文中,我们将回答一些最常见的古腾堡问题。

    Gutenberg编辑器常见问题解答

    1. WordPress为什么引入了古腾堡?

    长期以来,WordPress使用基于TinyMCE的编辑器来创建文章和页面。经典WordPress编辑器是一个简单的文本窗口,顶部有几个用于基本格式设置选项的按钮。

    尽管效果很好,但用户必须学习不同的方法来添加图像,创建画廊,嵌入视频,添加表格和其他内容元素(不过大部分WordPress站长应该已经非常熟悉这些操作)。但对于新用户来说,传统的文本编辑器相对古腾堡编辑器说,学习曲线更为艰难。

    全新的WordPress区块编辑器引入了现代化的简化写作体验,其中每个内容元素都包裹在一个区块中。您可以在编辑器中移动这些块,更改其设置并创建引人入胜的内容布局,而无需编写代码。

    古腾堡编辑器

    古腾堡编辑器

    古腾堡(Gutenberg)编辑器还为主题和插件开发人员提供了强大的框架,以为WordPress构建高级解决方案。

    2. 如何检查我使用的主题和插件是否兼容Gutenberg?

    检查主题和插件是否与Gutenberg兼容的最简单方法是查看它们是否支持WordPress 5.0+。

    古腾堡编辑器是WordPress 5.0以上版本默认的内容编辑器,附带“Tested with 5.0+”标签的主题或插件意味着它们才有可能与古腾堡兼容。

    您可以通过在WordPress插件库搜索插件的名称找到“Tested with”标签。

    WordPress插件市场

    WordPress插件市场

    在结果中,您将看到测试插件的WordPress版本。例如,下方截图表明WPForms目前已通过WordPress 5.0.3测试。

    wpformstestedwithwordpress5.0

    WPForm插件

    但这是否说明WPForm一定兼容Gutenberg,不一定,只是兼容WordPress 5.0+是先决条件。

    你可以通过访问WordPress官方插件库的“Block-Enabled”,查看所有发布到WordPress插件市场的支持区块编辑器的插件。

    又或者你可以访问主题和插件的官方文档了解其支持古腾堡的情况!

    3. 如何在Gutenberg块编辑器中管理旧文章?

    在将网站更新为WordPress 5.0之后,您的旧文章内容将被包装在Gutenberg编辑器的Classic块中。

    classic-block-guteberg-edit

    古腾堡编辑器

    您可以像在经典编辑器中一样编辑所有内容。

    您也可以将旧文章内容转换为Gutenberg块。只需从“经典”区块的下拉菜单中单击“ Convert to Blocks选项,然后它将自动将文章内容转换为适当的区块。

    古腾堡编辑器转经典编辑器古腾堡编辑器转经典编辑器

    4.如何禁用古腾堡并恢复经典编辑器?

    由于某种原因,许多用户还没有准备好切换到Gutenberg编辑器。

    在这种情况下,您可以选择禁用古腾堡,然后恢复经典编辑器。

    您需要做的就是安装并启用Classic Editor插件。又或者安装闪电博主题部分插件,我们也提供类似的功能帮助站长一键禁用古腾堡编辑器。

    classic-editor-wordpress-plugin

    Classic Editor插件

    使用此插件,您可以轻松禁用Gutenberg并在你的网站上使用经典编辑器。

    Classic Editor插件将至少在2022年之前可用,或根据需要提供。

    这将为用户提供大量时间,让他们在使用Gutenberg时测试其网站并在适当的时候进行升级。

    5. 古腾堡是WordPress页面生成器吗?

    Gutenberg是基于块的编辑器,它使用称为块的内容元素来创建文章和页面。同样,WordPress页面构建器还使用块(也称为小部件,模块或元素)在WordPress中创建页面。

    这让用户容易产生困惑,为此站长经常会问Gutenberg是否是WordPress页面构建器的替代品。

    答案是“不,至少不是目前的形式”。

    WordPress页面构建器插件提供了许多用于在WordPress中创建登录页面的高级功能。

    大多数页面构建器是前端编辑器,而Gutenberg是后端编辑器。这是在Gutenberg内容编辑器中编辑内容的方法。

    Gutenberg编辑内容

    Gutenberg编辑内容

    而且,下面是最好的页面构建器之一Beaver Builder,下图是使用它编辑页面时的界面:

    editingwithbeaverbuilder

    Beaver Builder页面构建器

    页面构建器的块是真正的拖放元素,支持自由格式的拖放。而Gutenberg的块仅支持对块进行重新排序的拖放操作。

    简单来说,Gutenberg是一个基本的编辑界面,而页面构建器是高级页面编辑器。

    6. 如何使用Gutenberg更新页面构建器的内容?

    更新使用页面构建器创建的内容应该不是问题。不同页面生成器更新内容的方法各异。

    因此,您可以联系插件提供商以获取更新教程。您也可以访问插件官方网站以找到有关Gutenberg支持的说明。

    7. 古腾堡是否支持简码?

    是的,Gutenberg支持简码。古腾堡(Gutenberg)中有一个单独的Shortcode块,用于添加带有shortcodes的内容。

    shortcodeblockgutenberg

    古腾堡Shortcode

    WordPress块被定义为[shortcode]的演变,因此建议使用常规的Gutenberg块而不是短代码。

    例如,您可以使用简码将WPForms添加到文章或页面中。

    wpformsshortcodes

    WPForms插件

    您所要做的就是从“Forms Overview”页面中复制简码,然后将其粘贴到帖子编辑屏幕上的“简码”块中。

    addshortcodetogutenbergeditor

    古腾堡简码

    但是,更好的选择是直接使用WPForms Gutenberg块,而不是将表单shortcode粘贴到Shortcode块中。

    WPForms古腾堡块

    WPForms古腾堡块

    8. 如果升级到古腾堡后出现故障,咋办?

    古腾堡(Gutenberg)最好不要破坏网站上的任何内容,但与您的主题和插件冲突可能会导致一些错误。

    在升级到古腾堡之前,始终建议站长可以在测试环境执行安装测试。

    但是,如果在使用古腾堡编辑器时发现意外错误,您应该首先禁用Gutenberg并在您的站点上启用Classic编辑器。

    然后,与主题和插件提供方联系以请求支持。

  • 如何编辑WordPress代码 – HTML、CSS、PHP

    如何编辑WordPress代码 – HTML、CSS、PHP

    虽然WordPress使非编码人员可以轻松管理网站,但有时您可能希望在WordPress中编辑代码以更好地控制您的网站的外观或功能。

    为了帮助您做到这一点,这篇文章将向您展示如何以几种不同的方式在WordPress中安全地编辑代码:

    如果您已经知道要做什么,可以单击上面的链接之一直接跳到该特定部分。否则,让我们开始编辑!

    为了更好地控制WordPress网站的外观和功能,您可以编辑WordPress代码以自定义不同的区域:

    • 新的区块编辑器和经典编辑器支持编辑单个文章或页面的HTML代码。
    • 如果要编辑WordPress主题的源代码,请使用子主题。
    • 考虑使用插件来管理添加到主题的<head>或functions.php文件中的代码片段。
    • 如果您只想添加自定义CSS,您可以使用WordPress定制器中的附加CSS区域或“Simple CSS”等插件。

    如何为单个文章/页面编辑WordPressHTML

    让我们从编辑WordPress的HTML代码的最简单方法开始——访问单个WordPress文章、页面或其他文章类型的源代码。

    您可以在新的WordPress区块编辑器 (Gutenberg)以及较旧的经典TinyMCE编辑器中执行此操作。

    如何在区块编辑器中编辑HTML (Gutenberg)

    您可以通过多种方式在Gutenberg中使用 HTML。

    首先,如果您只想将自己的HTML代码添加到一段内容中,我建议不要尝试编辑文章的整个源代码,因为这会使事情变得不必要地复杂化。

    相反,您可以只使用专用的自定义HTML区块并粘贴您想在那里使用的HTML:

    古腾堡自定义HTML区块

    古腾堡自定义HTML区块

    但是,有时您也可能需要直接编辑不同区块的HTML。例如,如果您想向块编辑器中的链接添加nofollow标记,则需要编辑该区块的HTML。

    有两种方法可以做到这一点……

    首先,您可以单击单个区块的选项并选择作为HTML编辑选项:

    如何将单个区块作为HTML编辑

    如何将单个区块作为HTML编辑

    这将让您编辑该单个区块的HTML:

    编辑区块的HTML的示例

    编辑区块的HTML的示例

    或者,如果您想编辑整个文章的HTML ,您可以从主工具和选项下拉列表中访问代码编辑器。或者,您也可以仅使用此键盘快捷键在代码和可视化编辑之间切换 – Ctrl + Shift + Alt + M

    如何在Gutenberg中访问完整的代码编辑器

    如何在Gutenberg中访问完整的代码编辑器

    请记住,在完整的代码编辑器中,您必须处理区块的所有标记 – 例如<!-- wp:paragraph -

    如何在经典编辑器 (TinyMCE) 中编辑HTML

    如果您仍在使用经典WordPress编辑器 (TinyMCE),则可以通过转到“文本”选项卡来编辑整个文章的HTML :

    如何在经典WordPress编辑器中编辑HTML

    如何在经典WordPress编辑器中编辑HTML

    如何编辑WordPress主题中的源代码

    现在,让我们进入更大的主题,即如何在WordPress主题中编辑代码。风险有点高,所以在我们进入操作方法之前,我们需要先解决一些初步问题。

    为什么赌注更高?嗯,很简单,这是因为如果你在这里搞砸了一些东西,你可能会破坏你的网站!

    在最近的版本中,WordPress使您更难不小心这样做,但是编辑网站的源代码总是会打开问题的大门,因此您要确保安全地进行。

    使用子主题进行任何直接代码编辑

    如果您打算直接编辑主题文件中的任何代码,则需要使用子主题而不是编辑“父”主题。

    如果没有子主题,您所做的任何代码更改都将在您下次更新主题时被覆盖。但是,当您使用子主题时,您将能够及时更新父主题而不会丢失您在子主题中所做的更改。

    考虑使用插件而不是在子主题中编辑代码

    如果您打算修改主题的工作方式,则可能需要通过直接编辑子主题的源代码来进行工作。

    但是,如果您出于其他原因想在WordPress中编辑代码——例如向网站的<head>部分添加跟踪脚本或向主题的functions.php文件添加代码段——您最好使用插件代替.

    例如, Head, Footer and Post Injections可以很容易地在需要的地方注入代码片段。而且因为这些代码片段都被隔离在插件的界面中,所以将来管理它们也更容易。

    同样,如果您要添加可以放入子主题的functions.php文件的代码片段,免费的Code Snippets插件是一个不错的选择。

    总之,如果您想在WordPress中编辑代码以将片段添加到您的主题…

    • <head> 部分
    • Functions.php

    …那么您应该考虑使用插件而不是指导编辑主题文件,因为这样可以更轻松地管理这些片段并确保更新主题时它们不会被覆盖。

    如果您需要进行其他编辑,让我们深入了解如何为您的主题编辑源代码。

    使用仪表盘内的WordPress代码编辑器

    如果您打算直接编辑您的主题代码,我们强烈建议您在这样做之前备份您的网站(您的整个网站或您正在编辑的文件)。

    完成后,您可以通过转到外观→ 主题编辑器来访问仪表板内的主题代码编辑器。在这里,WordPress会首先给你一个类似于你上面学到的警告:

    访问仪表盘内代码编辑器之前的警告

    访问仪表盘内代码编辑器之前的警告

    然后,您将能够使用右侧的侧边栏在不同的主题文件和代码编辑器本身之间导航以进行实际编辑:

    仪表盘内的WordPress代码编辑器

    仪表盘内的WordPress代码编辑器

    使用SFTP编辑WordPress代码

    作为仪表盘代码编辑器的替代方案,您还可以通过SFTP编辑主题文件。这种方法有两个好处:

    • 您可以使用您喜欢的代码编辑器。
    • 如果您不小心弄坏了某些东西,您可以立即解决问题。相比之下,如果您通过WordPress仪表盘编辑代码,则总有可能会导致你无法进入WordPress仪表盘,这意味着您需要通过SFTP连接来解决问题(尽管再次 – 这是由于最近的变化,可能性较小)。

    以下是通过FTP连接到您的站点的方法。

    完成后,导航到您的主题文件夹 – …/wp-content/themes/child-theme-name。找到要编辑的文件并右键单击它。大多数FTP程序都会为您提供编辑文件的选项,并在您进行更改后自动重新上传文件。

    但是,我们强烈建议您在进行任何更改之前将该文件的原始版本下载到您的桌面。这样,如果您不小心破坏了某些内容,您可以重新上传原始版本:

    如何通过SFTP编辑WordPress的文件代码

    如何通过SFTP编辑WordPress的文件代码

    如何将自定义CSS添加到WordPress

    如果您只想向WordPress添加自定义CSS,而不是编辑WordPress的HTML或PHP代码,则不需要使用仪表板内代码编辑器或SFTP方法。

    相反,您可以使用WordPress定制器。除了是一个更简单的选择之外,采用这种方法的另一个好处是您将能够实时预览您的更改。

    要开始,请转到WordPress仪表盘中的外观 → 自定义

    如何访问WordPress定制器

    如何访问WordPress定制器

    然后,在WordPress定制器中查找额外CSS选项:

    WordPress定制器中的额外CSS选项

    WordPress定制器中的额外CSS选项

    这将打开一个代码编辑器,您可以在其中添加所需的CSS。添加CSS时,站点的实时预览将根据这些更改自动更新:

    如何在WordPress定制器中编辑CSS

    如何在WordPress定制器中编辑CSS

    添加CSS的另一个不错的选择是Tom Usborne的Simple CSS插件。它在WordPress定制器中为您提供了一个类似的选项,它还允许您通过元框将自定义CSS添加到单个文章或页面。

    最后,如果您想添加大量自定义CSS——比如数百或数千行——另一个选择是创建您自己的自定义CSS样式表并使用wp_enqueue_scripts将其添加到您的主题中。

    小结

    如果您想在单个WordPress文章或页面中编辑代码,新的区块编辑器和经典编辑器都为您提供了直接编辑HTML的选项。

    另一方面,如果您想编辑WordPress主题的源代码,则需要考虑以下几点:

    • 始终使用子主题,而不是直接对父主题进行代码编辑。
    • 考虑使用插件来管理您添加到<head>functions.php文件的片段,因为这些插件可以提供更简单、更易于管理的方法。

    如果您在考虑这些因素后仍需要直接编辑代码,您可以通过转到外观 → 主题编辑器,从您的WordPress仪表盘编辑您的子主题的源代码。或者,您可以通过SFTP连接到您的站点并以这种方式编辑代码。

    最后,如果您只想添加一些自定义CSS,则无需直接编辑主题代码。相反,您可以只使用WordPress定制器中的额外CSS区域或像Simple CSS这样的插件。