WordPress简码终极指南：从零基础到自定义开发

一、WordPress 简码是干什么的？有什么用？

简码是一段简短的代码片段，通常以方括号包裹，如[shortcode]。在 WordPress 中，它提供了一种便捷方式，能将复杂的功能重复使用、以简单的方式把内容轻松插入到帖子、页面或小工具中。比如，你想在文章中插入一个表格、按钮、滑块，或是创建一个表单，若采用传统的 （HTML、CSS 和 JavaScript） 代码编写，过程会相当繁琐。而有了简码，这一切变得轻而易举。以插入按钮为例，只需使用类似[button link="https://www.rbzzz.com/" color="blue" size="large"]按钮文字[/button]这样的简码，就能在页面上呈现出一个链接为https://www.rbzzz.com/、颜色为蓝色、大小为大号的按钮。

二、简码怎么使用的呢？用在哪里？

1）、复制生成的简码（插件生成、主题生成、自己开发）

2）、古腾堡编辑选择简码、粘贴保存即可（帖子和页面都是这样使用的）

3）、经典编辑器是将简码放到编辑器文本中保存即可

4）、小工具-》选择简码-》粘贴-》保存即可

5）、elementor编辑器也支持简码的使用

三、简码开发

1）、创建简单的简码

在主题的functions.php文件或者插件入口文件中添加以下代码：

function jianma_fun() {
    return '我是简码';
}
add_shortcode('jianma', 'jianma_fun');

上述代码定义了名为jianma_fun的函数，该函数返回 “我是简码” 文本。接着通过add_shortcode函数，将此函数注册为简码，简码标签为jianma。在文章或页面中输入[jianma]，就能显示"我是简码"。

2）、简码中是否只能是静态的呢？是否可以传参？

简码支持接受参数，从而具备更高灵活性。例如，创建一个根据用户输入显示不同消息的简码：

function lingyige_fun($atts) {
    $atts = shortcode_atts(array(
       'message' => '默认消息'
    ), $atts);
    return $atts['message'];
}
add_shortcode('lingyige', 'lingyige_fun');

这里shortcode_atts函数用于定义简码的默认参数，将用户提供参数与默认参数合并。在文章或页面中使用[lingyige  message="Hello, 我是带参数的简码"]，就会显示 "Hello, 我是带参数的简码"。

3）、功能简码

简码不仅能生成内容，还能处理包含在其中的内容。比如，创建一个将包含内容包裹在<div>标签中的简码：

function wrap_content_shortcode($atts, $content = null) {
    return '<div>' . do_shortcode($content) . '</div>';
}
add_shortcode('wrap_content', 'wrap_content_shortcode');

使用[wrap_content]Your content here[/wrap_content]，其中 "Your content here"; 会被包裹在<div></div>中输出。

4）、嵌套简码

简码可嵌套使用，但要确保内容正确处理。例如，有外层和内层两个简码：

function outer_shortcode($atts, $content = null) {
    return '<div>' . do_shortcode($content) . '</div>';
}
add_shortcode('outer', 'outer_shortcode');
function inner_shortcode($atts, $content = null) {
    return '<div>' . do_shortcode($content) . '</div>';
}
add_shortcode('inner', 'inner_shortcode');

在文章中使用[outer][inner]嵌套内容[/inner][/outer]，会正确解析，输出嵌套的<div>结构。

5）、复杂输出的简码

简码还能输出复杂的 HTML 结构或动态内容。例如，创建一个输出文章列表的简码：

function recent_posts_function($atts, $content = null) {
    extract(shortcode_atts(array(
        'posts' => 1
    ), $atts));
    $return_string = '<h3>' . $content . '</h3>';
    $return_string .= '<ul>';
    query_posts(array('orderby' => 'date', 'order' => 'DESC','showposts' => $posts));
    if (have_posts()) :
        while (have_posts()) : the_post();
            $return_string .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endwhile;
    endif;
    $return_string .= '</ul>';
    wp_reset_query();
    return $return_string;
}
add_shortcode('recent - posts', 'recent_posts_function');

使用[recent - posts posts="5"]最新文章列表[/recent - posts]，会显示包含 5 篇最新文章链接的列表。