WordPress中的Shortcode如何使用？-牛奇网

WordPress 的 Shortcode（短代码）是一个非常强大和高效的功能，它可以极大地优化我们的内容编辑和网站构建。但很多用户并没有真正掌握它的用法，无法发挥出它的最大价值。本文将全面介绍什么是Shortcode、它的类型和用法，以及一些高级的用法技巧，希望能让读者完整地掌握这个好用的功能，使文章和网站更富互动性。正确认识和合理利用Shortcode，将大大提升我们的内容创作效率，使网站更智能化。希望本文能成为您踏上Shortcode掌握之路的良好开端。现在,让我们开始吧!

这篇文章主要介绍了什么是WordPress Shortcode,它的类型、用法以及一些高级用法技巧。

一、什么是WordPress Shortcode

WordPress 的 Shortcode是用方括号[]包含起来的简码，也称为短代码。WordPress会识别并解析这些Shortcode,根据它们定义的回调函数输出相应的内容。

这项功能是从WordPress 2.5版本引入的,使用它可以非常方便地在文章、页面或小工具里嵌入各种元素和功能,如按钮、提示框、视频等等。Shortcode的接口也非常简单易用。

可以说,Shortcode 是WordPress一个非常强大而灵活的功能，使用它可以大大提高编辑和发布内容的效率。掌握了Shortcode，就可以打造出更丰富多彩的文章和页面。

二、Shortcode的类型

Shortcode API支持几乎所有可能的组合形式:

自闭合标签

例如:[mycode]

开放标签

例如:[mycode]内容[/mycode]

含属性的标签

例如:[mycode foo="bar"]内容[/mycode]

嵌套Shortcode

例如:

[mycode]
  内容
  [child-code]嵌套代码[/child-code]
[/mycode]

5. 可以在Shortcode中使用HTML代码

例如:

[mycode]
  <p>这是HTML内容</p> 
[/mycode]

三、如何使用Shortcode

(一)在后台编辑器中使用

如果您使用的是古腾堡编辑器，可以直接在编辑器中找到“Shortcode”区块，在这里输入Shortcode即可。

如果是其他编辑器，则直接在文章内容中输入Shortcode代码即可。

(二)在主题模板中使用

可以通过do_shortcode()函数来执行Shortcode。例如在页面模板sidebar.php sidebar区域显示一个Shortcode:

<?php 
  echo do_shortcode("[mycode]我的侧边栏Shortcode[/mycode]");
?>

也可以直接输出Shortcode代码，而不执行它:

<?php 
  echo "[mycode]我的侧边栏Shortcode[/mycode]";
?>

(三)在PHP代码中使用

同样可以用do_shortcode()函数来解析Shortcode。例如:

$content = "[mycode]代码内容[/mycode]";
$content = do_shortcode($content); // $content变量中现在包含解析后的代码内容

四、Shortcode是如何执行的

当WordPress加载包含Shortcode的内容时，它是如何执行Shortcode并将其转换成结果内容的呢?

主要是通过为每个Shortcode定义一个回调函数来处理。这个回调函数会接收两个参数:

$attr – 包含Shortcode属性的数组
$content – Shortcode标签中的内容

然后回调函数对这两个参数进行处理，输出最终的内容。

例如一个处理 [mycode] 短代码的回调函数:

function my_shortcode_callback($attr, $content=''){

  // $attr - 包含 foo="bar" 这样的属性
  // $content - mycode标签中的内容 

  return "<div class='mycode'>{$content}</div>"; // 返回处理后的HTML
}

add_shortcode('mycode', 'my_shortcode_callback'); // 注册mycode的回调函数

以上就是Shortcode的基本运行原理。

五、Shortcode相关的函数

WordPress提供了一些和Shortcode相关的函数，主要包括:

add_shortcode():注册一个shortcode
remove_shortcode():删除已注册的shortcode
remove_all_shortcodes():删除所有shortcode
do_shortcode():解析并执行shortcode
strip_shortcodes():删除内容中的shortcode

例如:

// 注册mycode短代码
add_shortcode('mycode', 'my_shortcode_callback'); 

// 删除mycode短代码  
remove_shortcode('mycode');

// 解析内容中的短代码
$content = do_shortcode($content);

// 删除内容中的短代码
$content = strip_shortcodes($content);

六、Shortcode高级用法技巧

正确利用Shortcode，可以让我们的WordPress网站更智能、更高效。下面介绍一些高级的Shortcode使用技巧。

(一)按需加载资源

可以检测是否存在某个Shortcode，如果存在才加载对应的脚本或样式文件。

例如只在包含了 [my_slider] Shortcode的页面加载滑块效果的脚本:

add_action('wp_enqueue_scripts', 'my_scripts');

function my_scripts(){

  global $post;
  
  if( has_shortcode($post->post_content, 'my_slider') ){
    wp_enqueue_script('my-slider-script');
  }

}

(二)跳过首页及列表页的Shortcode

有时我们只想在文章页面执行Shortcode，而首页等列表页希望保持简洁，可以移除Shortcode:

add_filter('the_content', 'my_content');

function my_content($content){

  if( !is_singular() ){ 
    return strip_shortcodes($content);
  }

  return $content;

}

(三)在Widgets中使用Shortcode

可以通过widget_text过滤器在Widgets的文本内容中解析Shortcode:

add_filter('widget_text', 'do_shortcode');

(四)转义Shortcode

如果需要显示而不执行Shortcode，可以在Shortcode外面再加一层:

[[mycode]不执行该Shortcode[/mycode]]

七、Shortcode示例

下面通过一些典型的Shortcode示例，来进一步加深对Shortcode的理解。

按钮 Shortcode

<!—->

// 在functions.php中
function button_shortcode( $atts, $content = null ) {

  extract(shortcode_atts(array(
    'text' => 'Click Here',
    'url'  => '#',
    'color' => 'blue'
  ), $atts));

  return "<a href='{$url}' class='button-{$color}'>{$text}</a>";

}
add_shortcode( 'button', 'button_shortcode' );

// 在文章中使用
[button text="下载文件" url="http://example.com/file.zip" color="red"]

2. 滑块 Shortcode<!—->

// 在functions.php中
function slider_shortcode( $atts, $content = null ) {

  extract(shortcode_atts(array(
    'id' => 1,
  ), $atts));

  ob_start();

  // 这里生成滑块的HTML

  $html = ob_get_clean();

  return $html;

}
add_shortcode( 'slider', 'slider_shortcode' );

// 在文章中使用 
[slider id=1]

3. 提示框 Shortcode<!—->

// 在functions.php中
function tip_shortcode( $atts, $content = null ) {

  return '<div class="tip">' . $content . '</div>';

}
add_shortcode( 'tip', 'tip_shortcode' );

// 在文章中使用
[tip]提示内容[/tip]

4. 视频 Shortcode<!—->

// 在functions.php中 
function video_shortcode( $atts ) {

  extract(shortcode_atts(array(
    'id' => '123456',
  ), $atts));

  return "<iframe src='https://player.example.com/video/{$id}'></iframe>";

}
add_shortcode( 'video', 'video_shortcode' );

// 在文章中使用

八、结语

WordPress Shortcode是一个非常强大而方便的功能，可以大大提高我们构建WordPress网站的效率。

掌握了Shortcode的用法，就可以方便地在文章和页面中嵌入各种元素，丰富网站内容，为用户创造更好的体验。同时,合理利用Shortcode也可以优化网站性能。

如果要开发WordPress主题或插件，提供Shortcode接口也是一个不错的选择。这样使用者就可以轻松通过Shortcode来使用我们开发的功能。

作者：牛奇网，本站文章均为辛苦原创，在此严正声明，本站内容严禁采集转载，面斥不雅请好自为之，本文网址：https://www.niuqi360.com/wordpress/wordpress-shortcode-tutorial/

WordPress中的Shortcode如何使用？