WordPress 短代码完整教程：创建、使用与自定义（附按钮和图库示例）

使用短代码（Shortcode），你可以轻松地嵌入复杂功能，如表单、图库、按钮和动态内容，不用编写大量的 HTML、CSS 或 PHP 代码。所以短代码成为了即使是初学者也能方便使用的强大工具。

本文将详细介绍如何创建、使用和自定义 WordPress 短代码，帮助你简化工作流程并提升网站的互动性和功能性。

什么是 WordPress 短代码？

短代码是一个用方括号（[ ]）包围的简短代码片段，用来在 WordPress 内容中插入特定功能。例如：

[gallery ids="1,2,3"]

该短代码告诉 WordPress 在前端显示一个图库，包含 ID 为 1、2 和 3 的图像。短代码通过简化代码的插入过程，使得复杂的任务变得简单直观。

短代码有许多优点，包括：

• 简洁性：无需编写复杂的 HTML、CSS 或 JavaScript，短代码简洁易懂。
• 灵活性：短代码可以在页面、帖子、小部件、甚至自定义帖子类型中使用。
• 可重复使用：创建一次短代码后，可以在网站的不同位置多次使用。
• 易于管理：使用短代码能保持页面和帖子整洁，不需要直接嵌入复杂的代码。

如何在 WordPress 中创建短代码

步骤 1：访问 functions.php 文件

创建短代码的第一步是打开主题的 functions.php 文件。这个文件是你向主题添加自定义功能和代码的地方，当你希望为网站添加自定义功能时，例如创建一个自定义短代码来显示特定内容或功能时，就需要在 functions.php 文件中添加代码。

按以下步骤操作：

1. 登录到 WordPress 仪表板。
2. 转到 外观 > 主题编辑器。
3. 在右侧找到并打开 functions.php 文件。

步骤 2：定义短代码函数

短代码的核心是你创建的 PHP 函数。以下是一个简单的短代码示例，它将在页面上显示一个消息：“Hello, World!”：

function hello_world_shortcode() {
    return 'Hello, World!';
}

这段代码定义了一个简单的 PHP 函数 hello_world_shortcode，它将返回一个字符串：“Hello, World!”。

步骤 3：注册短代码

创建完短代码函数后，接下来就是注册到 WordPress 中。可以使用 add_shortcode() 函数来注册短代码，并指定一个名称和对应的函数。例如：

add_shortcode('hello_world', 'hello_world_shortcode');

这行代码注册了一个短代码 [hello_world]，当它在页面或帖子中被插入时，WordPress 会调用 hello_world_shortcode() 函数并显示该函数返回的内容。

步骤 4：测试短代码

完成短代码的创建和注册后，你可以测试它。

以下是将整个过程整合在一起的完整代码：

// 定义短代码函数
function hello_world_shortcode() {
    return 'Hello, World!';
}

// 注册短代码
add_shortcode('hello_world', 'hello_world_shortcode');

在页面或帖子中插入 [hello_world]，然后查看前端页面。它应该显示出“Hello, World!”。

如果你未在 functions.php 文件中添加，在前端页面就应该显示[hello_world]

创建更多自定义短代码

示例 1：创建按钮短代码

按钮是网站交互的关键部分，可以用于号召行动（CTA）和导航。我们可以通过短代码创建一个简单的自定义按钮：

function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#',
        ), $atts
    );

    return '<a href="' . esc_url($atts['url']) . '" class="custom-button" style="padding: 10px 20px; background-color: #0073aa; color: white; text-decoration: none;">' . esc_html($atts['text']) . '</a>';
}

add_shortcode('custom_button', 'custom_button_shortcode');

在此例中，定义了一个短代码 [custom_button]，它接受两个参数：text（按钮文本）和 url（链接地址）。

例如，你可以这样使用它：

[custom_button text="Learn More" url="https://example.com"]

这将生成一个蓝色的按钮，点击后会跳转到指定的 URL。

示例 2：创建图库短代码

创建一个图库短代码也非常简单。通过指定图像 ID，WordPress 会自动生成一个图库：

function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']);
    $output = '<div class="custom-gallery">';

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium');
        $output .= '<img src="' . esc_url($image[0]) . '"  class="gallery-image" />';
    }

    $output .= '</div>';
    return $output;
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode');

创建一个 [custom_gallery] 短代码，它接受 ids 参数，你可以传入多个图像 ID 来生成图库。例如：

[custom_gallery ids="1,2,3"]

这将会在页面上显示 ID 为 1、2 和 3 的图像。

如何在 WordPress 页面和帖子中使用短代码

方法 1：使用经典编辑器

如果你使用的是 WordPress 经典编辑器，只需将短代码直接插入到编辑器中的文本框里。

例如：

[custom_button text="Buy Now" url="https://yourlink.com"]

更新或发布页面后，短代码会在前端被处理，显示出相应的内容。

方法 2：使用 Gutenberg 块编辑器

在 Gutenberg 编辑器中，你可以使用专用的“短代码”块来插入短代码。操作步骤如下：

1. 打开页面或帖子编辑器。
2. 点击 + 按钮添加新块。
3. 搜索并选择 Shortcode 块。

4. 在短代码块中输入你的短代码，例如：

[custom_button text="Sign Up" url="https://yourlink.com"]

然后保存或更新内容，短代码将在前端显示输出。

方法 3：使用页面编辑器

许多流行的页面编辑器，如 Elementor 和 WPBakery，提供了插入短代码的小部件或模块。只需要将短代码粘贴到相应的小部件中，构建器会实时显示其效果。

如何在 WordPress 小部件中使用短代码

你还可以将短代码用于小部件区域（例如侧边栏、页脚等）。以下是步骤：

1. 在仪表盘中，转到 外观 > 小部件。
2. 将 文本小部件 拖放到你希望显示短代码的小部件区域。

3. 在文本区域中输入短代码，例如：

[custom_button text="Contact Us" url="https://yourlink.com"]

保存并查看网站，短代码将在小部件区域中显示为按钮。

使用短代码生成器简化流程

对于不熟悉编写代码的用户，短代码生成器是一个非常实用的工具。通过这些工具，可以简单的使用表单生成短代码，无需手动编写代码。流行的短代码生成器插件包括：

• Shortcodes Ultimate：提供了一个全面的短代码库，支持滑块、手风琴等多种功能。
• MyThemeShop WP Shortcode：为按钮、选项卡、列等提供了易于使用的短代码生成器。
• Shortcoder：可以使用更高级的用户创建自定义短代码。

使用这些插件，可以快速生成短代码并将其插入到 WordPress 内容中，从而省去编写复杂代码的麻烦。

总结：

短代码在 WordPress 中可以帮助你轻松在页面、文章或小部件中插入复杂功能，如按钮、图库和动态内容，无需编写大量代码。通过简单的 [shortcode] 语法，你可以在不同位置重复使用这些功能，从而提升网站的效率和可维护性。本文详细讲解了如何在 WordPress 的 functions.php 文件中创建和注册短代码，并提供了按钮和图库短代码的实际示例。还介绍了在经典编辑器、Gutenberg 块编辑器以及小部件中使用短代码的方法，帮助你简化工作流程。