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

短代码是一种将动态内容添加到 WordPress 帖子、页面和侧边栏的简单方法.

许多 WordPress 插件和主题使用短代码来添加专门的内容,例如联系表单、图片库、滑块等.

在本文中,我们将向您展示如何在 WordPress 中轻松添加短代码.我们还将向您展示如何在 WordPress 中创建您自己的自定义短代码.

Adding a shortcode in WordPress

什么是短代码?

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

[我的简码]

为了更好地理解短代码,让我们先了解一下为什么添加它们的背景.

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

但是,如果您想在帖子中运行一些自定义代码来显示相关帖子、横幅广告、联系表单、画廊等,该怎么办?

这就是 Shortcode API 的用武之地.

基本上,它允许开发人员将他们的代码添加到一个函数中,然后将该函数作为短代码注册到 WordPress,因此用户无需任何编码知识即可轻松使用它.

当 WordPress 找到短代码时,它会自动运行与之关联的代码.

让我们看看如何在您的 WordPress 帖子和页面中轻松添加短代码.

在 WordPress 帖子和页面中添加短代码

首先,您需要编辑要添加短代码的帖子和页面.之后,您需要单击添加块按钮以插入短代码块.

Adding shortcode block in WordPress

添加短代码块后,您只需在块设置中输入您的短代码即可.短代码将由您可能使用的各种 WordPress 插件提供,例如用于联系表单的 WPForms、用于电子邮件营销表单的 OptinMonster、用于插入点击呼叫按钮的 WP Call 按钮等.

Insert shortcode in the block editor

要了解有关使用积木的更多信息,请参阅我们的古腾堡教程以了解更多详细信息.

您现在可以保存您的帖子或页面并预览您的更改以查看正在运行的短代码.

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

您还可以在 WordPress 侧边栏小部件中使用短代码.只需访问 外观 »小部件页面并将"文本"小部件添加到侧边栏.

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

Adding shortcode in sidebar widget

不要忘记点击"保存"按钮来存储您的小部件设置.

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

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

如果您仍在 WordPress 中使用旧的经典编辑器,那么您可以通过以下方式向 WordPress 帖子和页面添加短代码.

只需编辑要添加短代码的帖子和页面.您可以将短代码粘贴到内容编辑器中要显示的任何位置.只需确保短代码在其自己的行中.

Shortcode classic editor

不要忘记保存您的更改.之后,您可以预览您的帖子和页面以查看正在运行的短代码.

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

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

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

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

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

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 运行我们创建的功能.

您现在可以使用以下代码将此短代码添加到您的帖子、页面和小部件:

[问候]

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

现在让我们来看看短代码的更实际用法.在此示例中,我们将在短代码中显示 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 将自动运行与短代码关联的功能并显示广告代码.

简码与古腾堡块

用户经常问我们简码与新古腾堡块之间的区别.

基本上,如果您发现短代码有用,那么您会喜欢 WordPress 编辑器块.块允许您以更用户友好的方式做同样的事情.

块允许用户通过更直观的用户界面在帖子/页面中添加动态内容,而不是要求用户添加用于显示动态内容的短代码.许多流行的 WordPress 插件都转而使用 Gutenberg 块而不是短代码,因为它们更适合初学者.

我们汇总了您可能想尝试的 WordPress 最有用的 Gutenberg 块插件列表.

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

我们希望本文能帮助您了解如何在 WordPress 中添加短代码.您可能还想查看我们关于最佳拖放 WordPress 页面构建器插件的指南,以及如何在不编写任何代码的情况下创建自定义 WordPress 主题.

7

发表回复