WordPress 简码完整指南

已发表: 2020-10-02

在 WordPress 块编辑器之前,WordPress 短代码是使用 WordPress 编辑器的最佳工具之一,它可以更轻松地向 WordPress 网站的页面、帖子和其他部分添加插件和主题功能。

WordPress 简码终极指南

随着移动到块编辑器,这对于大多数仍然充满短代码的旧插件和网站意味着什么? WordPress 短代码仍然有效吗? 有没有办法轻松地从使用 WordPress 短代码转移到 WordPress 块?

让我们来了解一下。 在本指南中,我们将探索 WordPress 块编辑器时代的 WordPress 短代码。

在本指南中

    什么是 WordPress 简码?

    WordPress 短代码是一种可重用的动态代码,包含在[brackets] 中。 短代码允许您轻松地将 WordPress 本身或插件或主题的特定功能插入任何帖子、页面、自定义帖子类型或小部件。 想想 WordPress 简码,如“快捷方式”或您网站上的宏。

    您可以使用 WordPress 短代码来显示静态内容,这些内容太繁琐而无法继续编码和重复。 您还可以使用短代码来显示动态内容,例如图片库、播客的音频播放器、事件日历或某些数据的更改统计信息。

    简码格式

    在插入短代码时,基本的[括号]格式可以通过多种方式“扩展”,允许您自定义或添加称为属性的附加设置信息。 此外,快捷方式可以包装文本(或 HTML),甚至可以嵌套在另一个短代码中。

    例如,短代码可以具有以下格式:

    [shortcode]
    
    [shortcode]Some text[/shortcode]
    
    [shortcode]<a href="http://mysite.com/">HTML content</a>[/shortcode]
    
    [shortcode]Some text [another-shotcode] more text [/shortcode]
    
    [shortcode icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/shortcode]
    

    简码属性

    简码也很灵活,因为它们可以使用属性进行扩展。 通过属性,简码只需简码中添加额外的代码片段即可提供额外的自定义。

    插件和主题提供了额外的指南和准则,以帮助用户使用正确的短代码片段在输出中添加或删除某些元素。

    以下是一些带有属性的短代码示例。

    [[gallery id="123" size="medium"]]
    
    [recent-posts posts="5"]
    
    [recent-posts posts="5"]Posts Heading[/recent-posts]
    

    内置 WordPress 简码

    WordPress 带有几个内置的短代码,用于呈现某些类型的内容。

    [[audio]]
    

    音频短代码允许您嵌入音频文件并播放它们。

    [[caption]]
    

    标题简码主要用于单个图像,允许您在内容周围环绕标题。

    [[gallery]]
    

    图库简码允许您将一个或多个图片库添加到您的帖子和页面。

    [[embed]]
    

    嵌入短代码允许您以最大(但不固定)的宽度和高度包装嵌入的项目。

    [[playlist]]
    

    播放列表短代码实现了在帖子中显示 WordPress 音频或视频文件集合的功能。

    [[video]]
    

    视频短代码允许您嵌入视频文件并播放它们。

    插件和主题短代码

    特定的 WordPress 主题和插件具有开箱即用的短代码,您可以将其插入帖子或页面编辑器中,并将在前端呈现结果。 迄今为止,许多主题和插件仍在使用短代码。

    例如,简码通常用于日历、表格、表格、会员、倒数计时器或拉引号的常见插件中。 甚至存在短代码插件,允许您为任何内容创建短代码。

    WordPress 主题还可以利用短代码来呈现某些预先设计好的或由它们提供的动态内容。

    自定义简码

    大多数专业开发人员选择创建自己的短代码,从本质上减少编写重复代码所需的时间。 只需在文件目录中添加一个简单的附加文件即可创建custom-shortcodes.php 文件。 如果您想了解自定义短代码的诀窍,请参阅有关创建自定义短代码的指南。

    WordPress 简码 API

    对于创建自己的自定义短代码的开发人员,WordPress Shortcode API 提供了一组简单的函数来创建用于帖子和页面的 WordPress 短代码。

    Shortcode API 帮助插件开发人员创建动态内容,用户可以通过将相应的短代码添加到内容区域来添加到页面或帖子中。 值得庆幸的是,API 处理所有复杂的解析,无需为每个短代码编写自定义正则表达式。 此外,还包括用于设置和获取默认短代码属性的辅助函数。

    开发人员可以查看 WordPress Shortcode API 文档以了解更多信息:

    • 处理属性
    • 输出
    • 封闭与自封闭短代码
    • 功能参考
    • 限制
    • 正式语法

    经典编辑器中的短代码

    过去,短代码被插入到任何帖子或页面的经典编辑器中,如下所示:

    WordPress 简码

    什么是 WordPress 块?

    首先是简码……但后来出现了基于块的编辑。 随着 WordPress 5.0 的推出,计划已久的古腾堡编辑器或 WordPress 块编辑器作为 WordPress 的主页和帖子编辑器得以实施,取代了已经存在多年的经典 WordPress 基于文本的编辑器。

    下面是 WordPress 5.5 之前的内容编辑器(啊,那些日子!)

    Gutenberg 编辑器最初是在 WordPress 的早期版本中发布的,但在 WordPress 5.0 成为默认编辑器之前一直是可选的。

    下载电子书:WordPress 5.0 和古腾堡编辑器终极指南
    下载 PDF

    新的被阻止的编辑器本身没有任何问题。 事实上,大多数用户都喜欢 WordPress 后端经过改进、更干净、更不令人生畏的外观。

    但是随着 WordPress 块编辑器出现了 WordPress。 顶部的格式选项让人想起 Microsoft Word 等文字处理应用程序已经一去不复返了。 相反,格式选项已被每个块的选项卡式右侧边栏选项替换。

    WordPress 块本质上是内容容器。 不同类型的内容有许多不同的块——图像、视频、文本、标题、画廊——你可以说出它的名字。

    甚至还有一个用于格式化、间隔和分隔符的 WordPress 块,它们随意排列在类别中以便于访问。

    顶部的所有选项和控件现在都位于页面/帖子编辑器的右侧,顶部的选项卡指示您是要单独查看当前块还是整个文档的选项。

    块编辑器更简单、更快速、更用户友好。 此外,主题和插件开发人员也在制作自己的块,为默认的 WordPress 块添加更多的块选项。

    可重用块与短代码

    在 WordPress 经典编辑器中保存一组预定义输出的旧方法是通过创建自己的短代码。 现在,这种方法已被可重用的块取代。

    保存预定义和预定制块的能力也使得保存某个块的布局和设计并在另一个块上使用它变得更加容易。 很像页面模板。

    例如,如果您添加一个按钮块并使用特定颜色、悬停效果等对其进行样式设置,您不会希望在添加该按钮的每个页面上都继续这样做。 如果您将其更改为可重复使用的块,该按钮将保存在您的 WordPress 网站上,并成为您可以在其他页面或帖子上使用的自己的块。

    您还可以通过将这些块转换为常规块、将其另存为新块(使用新名称)或更新块的现有设计来进一步更新这些块。

    组块

    在 WordPress 5.3 中还引入了组块和模板。

    从本质上讲,您可以将某些块组合在一起并一起移动或更新它们。 这最终导致了块模式。 块模式使编辑内容变得更加容易,因为用户更愿意选择一种模式并更新内容,而不是从空白画布开始。

    块样式选项

    每个主题都有不同的风格选择。 通常,您在每个站点上添加的内容样式是由您的主题预先确定的。

    使用块编辑器,您可以选择单独更新每个块的样式,以突出显示或使其更加引人注目。

    块和完整站点编辑

    随着我们在 WordPress 上创建和构建页面方式的所有这些进步和变化,产生了想法并最终过渡到所谓的完整站点编辑

    在粘贴中,大多数用户只能更新帖子或页面的实际正文。 网站的某些方面,例如页眉、页脚、侧边栏和小部件,仍然在很大程度上取决于主题。 这当然使寻找具有适量选项的完美主题成为 WordPress 开发人员和用户的终极斗争。

    随着完整站点编辑和 Block Builder 的引入,趋势正在朝着使页面或帖子的所有部分都可编辑的方向发展,在某种程度上,使用块。

    例如,最新的 20-20 WordPress 主题遵循这种模式,让创建者和网站所有者更好地控制他们的网站以及他们希望它的外观。

    展望未来,插件和主题开发人员在开发软件时需要采用不同的方法,以适应 WordPress 块编辑器的全新完整站点编辑和页面构建体验。 虽然此功能的全面应用仍在进行中,但这是一个我们可能会早日看到的积极变化。

    新的简码块

    在块编辑器之前,短代码被直接插入到页面或页面编辑器中。 现在,WordPress 块编辑器包含一个新的短代码块

    短代码块可以轻松地在帖子或页面中继续使用旧的短代码,并保持短代码输出的完整性。

    注意:将简码插入段落块可能并不总是有效,因此您可能需要改用简码块。

    通过单击“添加块”按钮,可以将短代码块添加到页面或帖子中。 或者,您可以输入 /shortcode 并按 Enter。

    wordpress 短代码块

    您会注意到,与其他常见块不同,短代码块在块工具栏或编辑器侧栏中不包含任何特定设置,这可能是因为可以使用其属性自定义短代码。

    块编辑器对 WordPress 短代码意味着什么?

    WordPress 块编辑器对短代码有重大影响。 让我们介绍一些关于块编辑器时代 WordPress 短代码需要注意的最重要的事情。

    1. WordPress 块编辑器从根本上改变了大多数插件和主题的短代码的需求和目的。 使用基于块的编辑系统,页面上的每个“元素”都有自己的块,而不是包含在一个可编辑的 WYSIWYG 编辑器中。

    由于块编辑器是一种完全不同的撰写帖子或页面的方法,因此由短代码生成的页面中更动态的部分可以作为可以单独添加的块存在。

    2. 块现在可以代替大多数短代码,用户无需学习如何使用短代码。 对于某些用户来说,短代码的概念和格式可能具有陡峭的学习曲线,因此块方法可能更容易。

    例如,采用 Gravity Forms 插件。 在块编辑器之前,将表单插入帖子或页面的过程是不同的。 在经典编辑器中,您必须使用按钮将表单插入到您的内容中。

    重力形式插入形式

    选择表单后,表单短代码已添加到您的内容中。 根据您选择的选项,短代码包含标题和描述的属性。

    现在,Gravity Forms 插件提供了一个表单块嵌入块。 从块编辑器中,选择 Forms 块。

    选择表单后,您实际上会更好地预览表单在页面上的外观。 表单设置可以在块设置中找到。

    3. 主题和插件开发人员需要决定他们的短代码实现的未来并将他们的短代码转换为块。 如上所述,数百个主题、插件和开发人员仍然在他们的网站和应用程序上使用短代码。 区块采用可能会很慢,但随着用户对新区块编辑器越来越熟悉,用户很可能会请求区块选项。

    对于那些距离采用 WordPress 块编辑系统还有数英里的开发人员来说,完整站点编辑概念可以与他们的短代码齐头并进。 诸如评论和评级插件、音频播放器、日期行情、画廊、联系表格以及大多数其他仍然使用短代码的插件仍然“在游戏中”。

    4. 短代码不会很快消失。 这可能就是 WordPress 块编辑器提供短代码块以帮助维护短代码使用的原因。 因为在 WordPress 5.0 和块编辑器之前,简码有如此广泛的使用和实现,重要的是 WordPress 的未来版本仍然支持简码。

    5. 短代码可以转换为块。 有使用短代码的最喜欢的主题或插件吗? 这些短代码很可能会在某个时候转换为块。 如果您是插件或主题的开发人员,或者您构建 WordPress 网站并在自定义主题中使用短代码,则可以将短代码重新考虑为块。

    在下一节中,我们将简要介绍如何将 WordPress 短代码转换为 WordPress 块。

    如何将 WordPress 简码转换为 WordPress 块

    正如您可以添加自定义短代码和可重用块一样,您也可以轻松地将自定义 WordPress 短代码转换为 WordPress 块。

    按照此自定义短代码指南中的第一步操作。

    以 Caldera Forms 中的这个基本示例为例:

     <?php /** * Handler for [cl_post_title] shortcode * * @param $atts * * @return string */ function caldera_learn_basic_blocks_post_title_shortcode_handler($atts) { $atts = shortcode_atts([ 'id' => 0, 'heading' => 'h3', ], $atts, 'cl_post_title'); return caldera_learn_basic_blocks_post_title($atts[ 'id' ], $atts[ 'heading' ]); } /** * Output the post title wrapped in a heading * * @param int $post_id The post ID * @param string $heading Allows : h2,h3,h4 only * * @return string */ function caldera_learn_basic_blocks_post_title($post_id, $heading) { if (!in_array($heading, ['h2', 'h3', 'h4'])) { $heading = 'h2'; } $title = get_the_title(absint($post_id)); return "<$heading>$title</$heading>"; } /** * Register Shortcode */ add_shortcode('cl_post_title', 'caldera_learn_basic_blocks_post_title_shortcode_handler');

    此代码采用帖子 ID 和标题级别(h2、h3、he)并输出包含在标题 HTML 中的帖子标题。

    完成并测试代码是否正常工作后,您必须将短代码注册为一个块。 以下是将 WordPress 简码转换为 Gutenberg 块的分步指南作为示例。

    有关创建 WordPress 块的更多资源

    有许多在线插件和资源可以帮助您完成这一步,包括来自 WordPress 的关于编写您的第一个块类型的官方文档。 您也可以查看 Igor Benic 的帖子,了解如何创建用于显示帖子的块。

    阅读这些指南后,您将能够弄清楚如何使用自定义短代码创建自己的 WordPress 块。

    注意:使用不同的短代码,该过程可能会有所不同。 由于要考虑的属性非常庞大,带有短代码的插件和主题可能会采用不同的方法。 基本上,您可能需要进行大量研究并花费大量时间对此进行编码。

    WordPress 短代码的裁决

    WordPress 短代码现在并将仍然是 WordPress 最重要的部分之一。 短代码帮助许多插件开发人员使他们的插件更加用户友好,并且许多主题开发人员扩展了他们主题的功能。 短代码还减少了许多内容创建者和网站所有者在创建自定义短代码后反复添加和更新他们想要的内容时所遇到的麻烦。

    话虽如此,毫无疑问,块编辑器是 WordPress 编辑体验的未来,所以期待看到更多的开发人员为使其更好,甚至更多功能做出贡献,包括那些仍在使用短代码的人。 展望未来,我们预计更多的开发人员将过渡到使用和添加 WordPress 块而不是 WordPress 短代码。

    我们希望您已经了解了 WordPress 短代码的重要性、它们的用途以及何时使用它们。 希望您可以开始创建自己的自定义短代码,并最终创建自己的块,这两者肯定不会很快消失。