如何在您的 WordPress 主题中使用简码

您想在您的 WordPress 主题中使用短代码吗?通常,您将在帖子、页面或侧边栏小部件等内容区域内使用简码。但是,有时您可能希望在WordPress主题中添加一个短代码。在本文中,我们将向您展示如何轻松地将任何短代码添加到您的 WordPress 主题中。

如何在WordPress主题中使用短代码

为什么要在你的WordPress主题中使用简码?

简码允许您向网站添加各种功能,包括图片库、表单、社交媒体提要等等。

WordPress带有一些内置的短代码,但也有许多流行的WordPress插件可以为您的网站添加短代码。

例如,WPForms 具有易于使用的块,但它也提供短代码,以便您可以将表单添加到网站的其他区域。

由WPForms提供的WordPress短代码示例

大多数情况下,您将在帖子和页面等内容区域中添加短代码。

将简码块添加到WordPress页面或帖子

但是,有时您可能希望在 WordPress 主题文件中使用简码。

这允许您将动态元素添加到无法使用标准 WordPress 帖子编辑器编辑的区域,例如您的 404 页面。这也是在多个页面上使用相同的短代码的简单方法。

例如,您可以向主题的主页或帖子模板添加短代码。

方法 1:使用全站点编辑器(仅限块主题)

在您的 WordPress 主题中使用短代码的最简单方法是使用完整的站点编辑器。这允许您将简码块添加到网站的任何部分。

但是,此方法仅适用于基于块的主题,例如 Hestia Pro。如果您没有使用启用块的主题,则需要改用其他方法。

要开始使用,请转到 主题 » 编辑器 在 WordPress 仪表板中。

打开WordPress全站编辑器

默认情况下,完整站点编辑器显示主题的主模板,但您可以向任何模板或模板部件(如页眉或页脚)添加短代码。

要查看所有可用选项,只需选择“模板”或“模板部件”。

将简码添加到WordPress模板

您现在可以单击要编辑的模板或模板部件。

例如,我们将向 404 页面模板添加一个简码,但无论您选择哪个模板,步骤都将完全相同。

使用全站点编辑器 (FSE) 向 WordPress 主题添加简码

WordPress现在将显示模板或模板部分的预览。

要添加简码,请继续并单击小铅笔图标。

使用全站编辑器 (FSE) 编辑 WordPress 主题的 404 模板

完成后,单击左上角的蓝色“+”图标。

在搜索栏中,您需要输入“简码”。

将简码块添加到WordPress主题

出现右侧块时,将其拖放到主题模板上。

您现在可以粘贴或键入要使用的简码。

将简码块添加到 WordPress 主题

之后,继续并单击“保存”按钮。

现在,只需访问您的WordPress博客即可查看运行中的短代码。

404 页面模板上的短代码示例

方法2:编辑WordPress主题文件(适用于任何WordPress主题)

您还可以通过编辑主题文件将短代码添加到您的 WordPress 主题中。这种方法更高级,但它适用于每个WordPress主题。

您可以直接修改单个主题文件,但这会使在不丢失自定义的情况下更新 WordPress 主题变得困难。因此,我们建议通过创建子主题来覆盖主题文件。

如果要创建自定义主题,则可以在现有主题文件中添加或修改代码。

编辑主题文件时,不能添加与标准内容区相同的短代码。您将在屏幕上看到短代码本身,而不是看到短代码的输出。

发生这种情况是因为WordPress不会在主题模板文件中执行短代码。相反,您需要明确告诉WordPress使用该函数运行短代码。 do_shortcode。

以下是您将添加到WordPress主题文件中的代码示例:

echo do_shortcode('[gallery]');

只需将“图库”替换为您要使用的简码即可。

如果要添加带有额外参数的简码,则代码片段也会稍有变化。

假设您已使用 WPForms 创建了一个联系表单。在这种情况下,您需要使用标准 WPForms 短代码加上表单的 ID:

echo do_shortcode( "[wpforms id='92']" );

故障排除:当do_shortcode不起作用时该怎么办

有时,您可能会向主题文件添加简码,但代码的输出不会出现在您的 WordPress 网站上。这通常意味着短代码取决于您网站上的WordPress插件或其他代码。

如果do_shortcode功能不起作用,请转到插件 » 已安装的插件,确保已安装并激活提供短代码的插件。

在下图中,WPForms 已安装但已停用,因此代码将不起作用。 echo do_shortcode

如何安装和激活WordPress插件

您还可以通过将函数添加到 index.php 文件中来检查是否有可供您使用的短代码。 shortcode_exists()

在以下代码片段中,我们将检查 WPForms 代码段是否可以在我们的网站上使用:

f ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

如果您仍然没有在您的网站上看到短代码输出,请尝试清除 WordPress 缓存,因为您可能会看到网站的过时版本。

方法3:创建自己的WordPress主题(完全可定制)

另一种选择是创建自定义WordPress主题。这是一种更高级的方法,但它允许您将任意数量的短代码添加到 WordPress 主题的任何区域。您还可以进行其他更改以创建完全具有所需功能和设计的主题。

过去,您需要遵循复杂的WordPress教程并编写代码来构建自定义WordPress主题。但是,现在可以创建自定义主题,而无需使用 SeedProd 编写任何代码。

SeedProd 是最好的 WordPress 页面构建器,还带有主题构建器。这允许您使用拖放来设计自己的主题。

种子生产的高级主题构建器功能

创建主题后,您可以通过转到 SeedProd » 主题生成器将短代码添加到 WordPress 网站的任何部分。

自定义WordPress主题模板

在这里,找到要使用简码的模板。

然后,只需将鼠标悬停在该模板上,然后在出现时单击“编辑设计”。

使用 SeedProd 创建自定义主题

这将在 SeedPro 的拖放页面构建器中打开模板。

在左侧菜单中,滚动到“高级”部分。在这里,找到 简码 块并将其拖到您的布局上。

使用 SeedProd 将简码块添加到主题

在实时预览中,只需单击以选择简码块。

您现在可以将短代码添加到“简码”框中。

使用简码将联系表单添加到 WordPress 主题

默认情况下,SeedProd 不会在实时预览中显示短代码输出。

要查看您的简码运行情况,请单击“显示简码选项”切换。

在种子生产中预览简码输出

之后,您可能希望通过选择“高级”选项卡来向简码输出添加一些样式。

在这里,您可以更改间距,添加自定义CSS,甚至添加CSS动画效果。

使用 SeedProd 主题构建器设置简码输出样式

当您对页面的外观感到满意时,只需单击“保存”按钮。

之后,选择“发布”以使短代码生效。

使用 SeedProd 发布自定义 WordPress 主题

您现在可以访问您的网站以查看自定义简码的实际效果。

WooCommerce独立站
Image

联系我们

六翼为您提供更丰富的服务项目,涵盖设计、开发、多媒体、营销、云服务等,驱动品牌网站的互联网创新发展,释放品牌潜力。

联系电话

400-188-6006
010-86469696

在线咨询