WordPress插件开发短代码功能定义和使用

WordPress插件开发短代码功能定义和使用

作为安全预防措施,禁止在 WordPress 内容中运行 PHP;为了允许与内容进行动态交互,WordPress 2.5 版中提供了短代码。短代码是可用于与内容执行动态交互的宏。例如,从附加到帖子的图像创建图库或渲染视频。

为什么要使用短代码?

短代码是一种保持内容整洁和语义的有效方法,同时允许最终用户以编程方式改变其内容的呈现方式。

当最终用户使用短代码将照片库添加到他们的帖子时,他们使用尽可能少的数据来指示画廊的呈现方式。

优点:

帖子内容中没有添加任何标记,这意味着可以轻松地在运行中或稍后操作标记和样式。

短代码还可以接受参数,允许用户逐个实例地修改短代码的行为方式。

内置短代码

默认情况下,WordPress 包含以下短代码:


[ caption ]– 允许你将字幕环绕在内容周围
[ gallery]– 允许您显示图片库
[ audio ]– 允许您嵌入和播放音频文件
[ video ]– 允许您嵌入和播放视频文件
[ playlist]– 允许您显示音频或视频文件的集合
[ embed ]– 允许您包裹嵌入的物品

注意:这里的中括号caption两边没有空格,gallery两端也是,为了演示防止被解析,我这里添加了空格。

短代码最佳实践

开发短代码的最佳实践包括插件开发最佳实践和以下列表:

永远返回!

短代码本质上是过滤器,因此创建“副作用”会导致意外的错误。

在您的短代码名称前添加前缀以避免与其他插件冲突。

净化输入并转义输出。

为用户提供所有短代码属性的清晰文档。

快速参考

查看使用基本短代码结构的完整示例,处理自关闭和封闭场景、短代码中的短代码以及安全输出。

如何在 WordPress 中添加短代码(初学者指南)

在 hao-blog.com 好客站seo研究中心,我们经常听到用户抱怨 WordPress 短代码让人眼花缭乱。这些代码片段乍一看可能让人眼花缭乱,但如果使用得当,它们实际上是 WordPress 中最强大的功能之一。

无论您想添加联系表单、图库还是自定义布局,短代码都提供了一种无需触及任何代码即可插入复杂功能的简便方法。

在这个适合初学者的指南中,我们将向您展示如何在 WordPress 中添加短代码、将它们放置在何处以及使用它们的最佳方法。

我们将所有内容分解为简单易懂的步骤,任何人都可以理解,即使您是 WordPress 新手。

如何在 WordPress 中添加短代码

什么是短代码?

WordPress 中的短代码是一些快捷方式,可帮助您向 WordPress 文章、页面和侧边栏小部件添加动态内容。它们显示在方括号内,如下所示:

[myshortcode]

为了更好地理解短代码,让我们先来了解一下添加短代码的背景。

WordPress 会过滤所有内容,以确保没有人利用帖子和页面内容向数据库插入恶意代码。这意味着您可以在帖子中编写基本的 HTML ,但不能编写 PHP 代码。

但是,如果您想在帖子中运行一些自定义代码来显示相关帖子、横幅广告、联系表单、图库或其他内容,该怎么办?

这就是 Shortcode API 的用武之地。

基本上,它允许开发人员在函数中添加他们的代码,然后将该函数作为短代码注册到 WordPress,这样用户就可以轻松使用它而无需任何编码知识。

当 WordPress 找到短代码时,它将自动运行与其关联的代码。

让我们看看如何轻松地将短代码添加到您的 WordPress 文章和页面。您可以使用以下链接跳转到您喜欢的方法:

  • 在 WordPress 文章和页面中添加短代码
  • 在 WordPress 侧边栏小部件中添加短代码
  • 在旧版 WordPress 经典编辑器中添加短代码
  • 在 WordPress 主题文件中添加短代码
  • 使用全站编辑器在块主题文件中添加短代码
  • 在 WordPress 中创建您自己的自定义短代码
  • 短代码与古腾堡区块

在 WordPress 文章和页面中添加短代码

首先,您需要编辑要添加短代码的帖子和页面。

之后,您需要单击添加块按钮“+”来插入短代码块。

添加短代码块后,您只需在块设置中输入您的短代码即可。

您可能正在使用的各种 WordPress 插件都会提供短代码,例如用于联系表单的WPForms。

要了解有关使用块的更多信息,请参阅我们的Gutenberg 块编辑器教程以获取更多详细信息。

您现在可以保存您的帖子或页面并预览您的更改以查看短代码的实际效果。

在 WordPress 侧边栏小部件中添加短代码

您还可以在 WordPress 侧边栏小部件中使用短代码。

只需访问外观»小部件页面并将“短代码”小部件块添加到侧边栏。

现在,您可以将短代码粘贴到小部件的文本区域内。

不要忘记点击“更新”按钮来存储您的小部件设置。

之后,您可以访问您的WordPress 网站以查看侧边栏小部件中的短代码的实时预览。

在旧版 WordPress 经典编辑器中添加短代码

如果您仍在使用 WordPress 中的旧经典编辑器,那么您可以按照以下方法将短代码添加到您的 WordPress 帖子和页面。

只需编辑您想要添加短代码的帖子和页面即可。您可以将短代码粘贴到内容编辑器中您想要显示的任何位置。只需确保短代码独占一行即可。

别忘了保存更改。保存后,您可以预览帖子和页面,查看短代码的实际效果。

在 WordPress 主题文件中添加短代码

短代码旨在用于 WordPress 文章、页面和小部件内部。但是,有时您可能希望在 WordPress 主题文件中使用短代码。

WordPress 可以轻松实现这一点,但您需要编辑 WordPress 主题文件。如果您之前没有这样做过,请参阅我们的指南,了解如何在 WordPress 中复制和粘贴代码。

基本上,您只需添加以下代码即可向任何 WordPress 主题模板添加短代码:

<?php echo do_shortcode('[your_shortcode]'); ?>

 

WordPress 现在将查找短代码并在主题模板中显示其输出。

使用全站编辑器在块主题文件中添加短代码

如果您使用的是块主题,那么您会发现使用完整的站点编辑器在您的 WordPress 主题文件中添加短代码更加容易 。

您可以通过从 WordPress 仪表板选择外观»编辑器来访问此工具。

默认情况下,您将看到主题的主页模板,您可以通过选择“模板”选项切换到其他模板。

选择模板后,您可以通过点击编辑器右侧窗格开始编辑。编辑器现在将填满整个屏幕。

现在,您可以点击“+”块插入器图标并搜索短代码块。之后,只需将其拖到模板上并输入您想要使用的短代码即可。

不要忘记点击屏幕顶部的“保存”按钮来存储您的更改。

在 WordPress 中创建您自己的自定义短代码

当您想在 WordPress 文章和页面中添加动态内容或自定义代码时,短代码非常有用。但是,如果您要创建自定义短代码,则需要一定的编程经验。

如果您熟悉编写 PHP 代码,那么这里有一个可以用作模板的示例代码:


// function that runs when shortcode is called

function wpb_demo_shortcode() {

 

// Things that you want to do.

$message = 'Hello world!';

 

// Output needs to be return

return $message;

}

// register shortcode

add_shortcode('greeting', 'wpb_demo_shortcode');

 

在这段代码中,我们首先创建了一个函数,用于运行一些代码并返回输出。之后,我们创建了一个名为“greeting”的短代码,并告诉 WordPress 运行我们创建的函数。

您可以手动将此代码添加到主题的functions.php 文件中,或使用代码片段插件(如WPCode)(推荐)。

我们推荐后者,因为 WPCode 是向网站添加代码最安全、最便捷的方式。要了解更多信息,请参阅我们的WPCode 评测。

有关更多详细信息,您可以查看我们的指南,了解如何在 WordPress 中添加自定义代码而不破坏任何内容。

完成后,您可以使用以下代码将此短代码添加到您的帖子、页面和小部件中:

[greeting]

它将运行您创建的函数并显示所需的输出。

现在,让我们看一下短代码的更实际的用法。

在此示例中,我们将在短代码内显示 Google AdSense 横幅:

 

// The shortcode function

function wpb_demo_shortcode_2() {

 

// Advertisement code pasted inside a variable

$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

style="display:block; text-align:center;"

data-ad-format="fluid"

data-ad-layout="in-article"

data-ad-client="ca-pub-0123456789101112"

data-ad-slot="9876543210"></ins>

<script>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>';

 

// Ad code returned

return $string;

 

}

// Register shortcode

add_shortcode('my_ad_code', 'wpb_demo_shortcode_2');

 

不要忘记用您自己的广告代码替换广告代码。

您现在可以在 WordPress 文章、页面和侧边栏小部件中使用[my_ad_code]短代码。WordPress 将自动运行与短代码关联的功能并显示广告代码。

短代码与古腾堡区块

用户经常询问我们短代码和 Gutenberg 块之间的区别。

基本上,块允许您执行与短代码相同的操作,但方式更加用户友好。

区块不再要求用户添加短代码来显示动态内容,而是允许用户通过更直观的用户界面在帖子和页面内添加动态内容。许多流行的 WordPress 插件已经改用区块替代短代码,因为它们更适合初学者。

我们整理了一份最有用的 WordPress Gutenberg 块插件列表,您可能想尝试一下。

如果您想创建自己的自定义 Gutenberg 块,您可以按照我们的分步教程了解如何在 WordPress 中创建自定义 Gutenberg 块。

希望本文能帮助您了解如何在 WordPress 中添加短代码。您可能还想查看我们的指南,了解如何使用切换效果在 WordPress 文章中显示和隐藏文本,以及如何在 WordPress 中复制粘贴并避免格式问题。

如果您喜欢这篇文章,请分享到你的朋友圈。

外部资源

WordPress 短代码生成器

顶部