WordPress 短代码使用技巧：从入门到精通

无论你是经验丰富的 WordPress 用户还是完全的新手，使用短代码（Shortcodes）都能让你无需任何编程知识，解锁自定义网站的新方式。

短代码允许你在文章、页面和小工具中添加各种功能，而无需实际编写代码。许多 WordPress 插件和主题也使用短代码来添加不同的元素，比如联系表单和事件日历。

在猫哥（原 WPBeginner），我们一直使用短代码和短代码插件来为客户构建 WordPress 网站或为读者测试功能。在此过程中，我们总结了一些让短代码使用更简单、更有效的方法。

在本文中，我们将分享一些在 WordPress 中使用短代码的必备技巧。

什么是 WordPress 短代码？

在 WordPress 中，短代码是一段用方括号括起来的小代码，让你可以在文章、页面或小工具中添加动态内容或功能。

示例：

[example_shortcode]

当你向 WordPress 网站添加内容时，它会自动经过安全检查与过滤，确保没有有害代码混入文章、页面或评论中。这意味着你不能在这些区域直接编写代码。

不过，有时你可能需要在这些区域添加特定代码。短代码提供了一种实现方式。

它们充当了添加高级功能的快捷方式，比如漂亮的响应式滑块、联系表单、图片画廊或嵌入视频，操作简单且用户友好。

例如，无需手动嵌入复杂的 HTML 或 JavaScript 代码片段，只需使用一行短代码就能获得相同效果。这使得短代码对初学者和专家都非常有用。

重要提示： 虽然 WordPress 区块编辑器内置了许多之前需要短代码的功能（如图片画廊或列），但短代码仍然非常重要。它们通常是流行插件让你在文章和页面中添加内容的主要方式。

然而，即使短代码易于使用，了解添加和管理它们的最佳方法也能节省时间、改善工作流程并避免问题。

下面我们来看看在 WordPress 中使用短代码的一些技巧。点击链接可跳转到对应技巧：

• 技巧1：知道何时不使用短代码
• 技巧2：让短代码未来兼容
• 技巧3：如何在主题中搜索短代码
• 技巧4：在小工具中使用短代码
• 技巧5：在主题文件中添加短代码
• 技巧6：隐藏损坏的短代码
• 技巧7：查找文章中使用的短代码
• 额外：常见短代码错误
• 常见问题

技巧1：知道何时不使用短代码

短代码很有用，但每篇文章都依赖它们并非最佳选择。许多主题声称提供数百个短代码，但使用它们会带来问题。

如果你使用某个主题的短代码来添加按钮等元素，那么你的网站就与该主题绑定。如果以后更换主题，这些按钮将会失效。

以下是添加按钮等元素的方法对比：

方法	优点	缺点
主题短代码	如果主题提供，插入快捷	高风险：更换主题后内容失效
CSS 按钮	适用于任何主题，轻量	需要一定的编码知识
WordPress 区块	可视化编辑，原生支持，无需代码	未来兼容的最佳选择

如果你需要添加号召性按钮，我们建议使用内置的按钮区块。它易于使用，且适用于任何主题。

同样，如果你使用短代码添加重复性元素（如横幅广告或文章末尾的签名文本），建议考虑其他方法。你可以使用 WordPress 插件或与开发者合作，将这些元素添加到博客中。这种方法能确保样式一致，并方便将来更新或删除。

最后，请记住，零散分布在文章中的短代码在决定停止使用时很难移除。手动编辑每篇文章非常耗时。因此，谨慎使用短代码，只在必要的地方使用，过度使用会给以后带来大麻烦。

技巧2：让短代码未来兼容

短代码很棒，但如果你的主题提供了它们，你可能要三思而后行，不要过度使用。因为一旦更换主题，新主题很可能不支持相同的短代码，导致内容失效。

要避免这个问题，你可以将短代码转移到站点专用插件中。这样，无论使用哪个主题，短代码都会保持独立并正常工作。

具体操作：找到主题的 functions.php 文件中的短代码片段，复制后粘贴到站点专用插件中。但直接编辑 functions.php 并不理想，一个错误就可能让网站崩溃。

这时就需要 WPCode 插件。我们认为是向主题添加短代码片段的最简单方式。

它让你只需几次点击即可添加自定义代码，甚至能高亮显示代码中的错误。我们在自己的网站上进行了充分测试，发现它对初学者非常友好。更多详情请参考我们的 WPCode 评测。

此外，即使不小心添加了错误的代码，它也不会导致网站崩溃，是一个可靠的选择。更多信息请参考我们的指南：如何在 WordPress 中添加自定义代码。

技巧3：如何在主题中搜索短代码

为确保短代码保持功能，了解它们的样子以及如何在主题中找到它们很重要。

首先，打开主题文件夹，通常位于 /wp-content/themes/你的主题名称/。你需要在 functions.php 文件中查找，或者如果主题有 includes 文件夹，则在那里查找。

找到文件后，打开并搜索 add_shortcode。这将帮助你定位当前主题使用的所有短代码。

短代码片段示例：

function my_shortcode_function() { 
    $i = '<p>Hello World!</p>';
    return $i;
} 
add_shortcode('my-shortcode', 'my_shortcode_function');

这段代码创建了一个短代码 my-shortcode，返回简单的文本问候，并可以嵌入到 WordPress 文章或页面中：

[my-shortcode]

更多细节请参考我们的指南：如何在 WordPress 中添加短代码。

技巧4：在小工具中使用短代码

很多用户以为短代码只能用于文章和页面，但其实不是。你也可以在 WordPress 小工具中使用它们，这为侧边栏、页脚和其他小工具区域添加动态内容提供了更多灵活性。

操作方式：根据你的主题类型进入对应编辑器。如果你使用经典主题，从 WordPress 仪表盘进入 外观 » 小工具。如果使用区块主题，则进入 外观 » 编辑器。

进入正确编辑器后，点击“添加区块”（+）按钮打开区块菜单，搜索并添加短代码区块到侧边栏或其他小工具区域。

更多详情请参考教程：如何在 WordPress 侧边栏小工具中使用短代码。

技巧5：在主题文件中添加短代码

需要在文章、页面或小工具之外添加短代码吗？如果你想在自定义主题文件或主题的特定部分添加短代码，可以轻松地将短代码直接添加到主题代码中。

例如，假设你创建了一个自定义页面模板，并想使用短代码包含一个响应式滑块。无需在内容区域手动插入短代码，你可以直接在主题中输出它：

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

这个技巧在你想将短代码嵌入到自定义页面、页眉、页脚或其他与内容编辑器无关的主题区域时非常有用。

警告： 编辑主题文件时要小心，最小的错误都可能导致网站崩溃。我们建议使用子主题并做好备份。如果遇到问题，请参考我们的指南：如何从网络粘贴代码片段到 WordPress。

技巧6：隐藏损坏的短代码

用户经常更换主题，却没有意识到旧短代码会失效。有时几个月后才发现访问者看到旧文章中有奇怪的文字。

有两种解决方法：手动从每篇文章中删除损坏的短代码，或者隐藏它们。我们推荐隐藏，因为更快捷。

操作：安装并激活 WPCode 插件。激活后，进入 Code Snippets » + Add Snippet 页面，选择“添加新自定义代码（新代码片段）”。

进入“创建自定义代码片段”页面后，从下拉菜单中选择“PHP 代码片段”。

然后在“代码预览”框中添加以下代码，并将“未激活”开关切换为“激活”：

add_shortcode( 'shortcodetag', '__return_false' );

记得将 shortcodetag 替换为你的短代码名称。最后点击“保存代码片段”按钮。

这段代码会重新添加孤儿短代码，但不会输出任何内容。

技巧7：查找文章中使用的短代码

如果你不想使用技巧6的 hack，而是想手动删除所有短代码，第一步是找到所有使用了该短代码的文章。

在主题的 functions.php 文件或 WPCode 中添加以下代码：

function wpb_find_shortcode($atts, $content=null) {
    ob_start();
    extract( shortcode_atts( array(
        'find' => '',
    ), $atts ) );
    $string = $atts['find'];
    $args = array(
        's' => $string,
    );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        echo '<ul>';
        while ( $the_query->have_posts() ) {
            $the_query->the_post(); ?>
            <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
        <?php
        }
        echo '</ul>';
    } else {
        echo "抱歉，未找到相关文章";
    }
    wp_reset_postdata();
    return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');

这段代码创建了一个名为 shortcodefinder 的短代码。它运行 WordPress 查询，并列出包含指定短代码标签的文章。

例如，如果你想查找所有包含短代码 [contact-form] 的文章，只需在 WordPress 页面中输入 [shortcodefinder find='contact-form'] 并保存。

注意： 我们建议创建一个私密草稿页面来运行这个测试。这样访问者就不会看到你的短代码列表。

预览页面后，你会看到所有包含该短代码的文章。详细教程请参考：如何查找并隐藏 WordPress 中未使用的短代码。

额外：常见短代码错误

短代码虽然有用，但用户在使用时经常犯一些常见错误。这些错误可能导致功能失效、代码混乱或网站性能下降。以下是五个关键错误及避免方法：

• 页面上短代码过多： 单个页面使用太多短代码会导致加载速度变慢和设计杂乱。建议将短代码限制在必要元素上。
• 错误地嵌套短代码： 嵌套短代码（在一个短代码内部使用另一个短代码）可能很棘手，会导致某个短代码不工作或页面显示错误内容。如果必须嵌套，请先测试确保显示正确。
• 忘记正确关闭短代码： 有时用户忘记关闭短代码，这会破坏文章或页面的布局。务必确保短代码的方括号正确打开和关闭。对于单次使用的短代码，不要留下多余空格或符号。
• 在不受支持的区域使用短代码： WordPress 的某些区域默认不支持短代码。尝试在那里使用短代码可能导致内容破损或不可见。在将短代码插入小工具或自定义字段之前，请检查该区域是否支持短代码。通常可以使用插件来启用不受支持区域的短代码。
• 未在移动设备上测试短代码： 很多用户忘记检查短代码生成元素在移动设备上的显示效果。在桌面端看起来很棒，在移动端可能会损坏或显示不佳。始终在各种设备上预览页面和文章，确保短代码输出是响应式的。

通过避免这些常见错误并遵循上述技巧，你将在使用 WordPress 短代码时获得更顺畅的体验。

常见问题：WordPress 短代码

如何在 WordPress 中使用短代码？

要使用短代码，只需在内容编辑器中插入短代码区块，然后将你的短代码粘贴进去（例如 [my-shortcode]）。如果使用经典编辑器，可以直接将短代码粘贴到文章内容区域中你想要显示的位置。

如何为短代码设置样式？

你不能直接为短代码括号本身设置样式，但可以为其生成的内容添加自定义 CSS。方法：将短代码包裹在组区块或带有特定 CSS 类的 div 中，然后在 WordPress 自定义器或主题样式表中添加自定义样式。

如何创建自定义短代码？

你可以通过编写一个返回所需内容的简单 PHP 函数，并使用 add_shortcode 函数注册它来创建自定义短代码。我们建议使用 WPCode 插件安全地添加此代码片段，无需直接编辑主题文件。

可以不使用插件创建短代码吗？

可以，无需插件，直接添加代码片段到主题的 functions.php 文件中即可。但我们不推荐这种方法，因为一旦切换或更新主题，你的短代码将停止工作。

希望这些技巧能帮助你学会使用短代码，并在 WordPress 中充分利用它们。你也可以查看我们的初学者指南：如何防止复制粘贴时出现格式问题，以及掌握 WordPress 内容编辑器的专家技巧。

如果你喜欢这篇文章，请订阅我们的 YouTube 频道获取 WordPress 视频教程。你也可以在 Twitter 和 Facebook 上找到我们。