Detailed explanation of the basic method of writing shortcode format tags in WordPress, _PHP tutorial

Detailed explanation of the basic method of writing shortcode format tags in WordPress,

WordPress shortcode is something similar to a forum tag, and the format is similar to replacing angle brackets with square brackets Html tag. Many people call short codes short codes, but the official translation should be short codes. Please correct them here.

The logic of shortcode development is relatively simple, mainly adding, deleting and judging, which will be fully introduced in this article.

Shortcode format

The format of shortcode is very flexible, it can be with attributes, without attributes, closed, unclosed, etc.:

[example]

[example]Content[/example]

[example attr="attribute" attr-hide="1"]Content[/example]

[example "property"]

Add shortcode

To add a shortcode, you need to use the add_shortcode() function, with two attributes, the first is the shortcode name, and the second is the callback function of the shortcode.

add_shortcode( $tag, $func );

For example, add a shortcode named test and call back the Bing_shortcode_test() function:

function Bing_shortcode_test( $attr, $content ){
  return 'Hello World!';
}
add_shortcode( 'test', 'Bing_shortcode_test' );

Add [test] to the article and "Hello World!" will be output.

As you can see from the above example, the callback function of the shortcode needs to receive two parameters. The first is all the attributes of the shortcode, stored in an array; the second is the content of the shortcode (the content in the closed shortcode).

Remove shortcode

The remove_shortcode() function can remove a shortcode. You only need to specify the name of the shortcode to remove it.

remove_shortcode( 'test' );

The remove_all_shortcodes() function is used to remove all shortcodes currently added.

remove_all_shortcodes();

Judge shortcode

Regarding judging shortcodes, there are two functions. The shortcode_exists() function judges whether shortcodes exist.

remove_all_shortcodes();
if( shortcode_exists( 'test' ) ) echo '简码 test 存在';//False
add_shortcode( 'test', 'Bing_shortcode_test' );
if( shortcode_exists( 'test' ) ) echo '简码 test 存在';//True

There is also a has_shortcode() function to determine whether a certain shortcode appears in the string.

$content = '测试测试测试测试测试测试测试测试';
if( has_shortcode( $content, 'test' ) ) echo '字符串中有 test 简码';//False
$content = '测试测试测试测[test]测试[/test]试测试测试测试测试';
if( has_shortcode( $content, 'test' ) ) echo '字符串中有 test 简码';//True

Execute shortcode

The do_shortcode() function is used to find the shortcode in the string and call the previously added callback function at the shortcode to execute the shortcode into the required content.

Hooks added by WordPress:

add_filter( 'the_content', 'do_shortcode', 11 );

Example:

function Bing_shortcode_test( $attr, $content ){
  return 'Hello World!';
}
add_shortcode( 'test', 'Bing_shortcode_test' );
$content = '测试测试测试测[test]试测试测试测试测试';
echo do_shortcode( $content );//测试测试测试测Hello World!试测试测试测试测试

Shortcode attribute

Shortcode supports attributes in various formats and accepts the first parameter of the shortcode callback function. If you want to set default values ​​for parameters, you can use the shortcode_atts() function:

function Bing_shortcode_test( $attr, $content ){
  extract( shortcode_atts( array(
    'url' => 'http://www.bgbk.org',
    'hide' => false,
    'text' => '点击隐藏 / 显示'
  ), $attr ) );
  $hide = $hide ? ' style="display:none;"' : '';
  return '<a href="' . $url . '"' . $hide . '>' . $text . '</a>';
}
add_shortcode( 'test', 'Bing_shortcode_test' );

The script is only loaded when shortcodes are used in the page
During the development process, we sometimes encounter this problem: the shortcode module needs to load JS or CSS scripts, and when the page does not use shortcodes, it will cause a waste of resources.

For example, the Google Maps plug-in below:

//添加简码
function Bing_add_google_map( $atts, $content ){
  //content...
}
add_shortcode( 'google_map', 'Bing_add_google_map');
 
//挂载脚本
function Bing_add_javascript(){
  wp_enqueue_script( 'map_scripts' );
}
add_action( 'wp_enqueue_scripts', 'Bing_add_javascript' );

The script needs to be loaded only when the [google_map] shortcode is used in the page. How to do this?

In fact, it is very simple. You only need to mount the script in the footer when the shortcode function is triggered.

//添加简码
function Bing_add_google_map( $atts, $content ){
  $GLOBALS['google_map_shortcode'] = true;
  return '地图的代码';
}
add_shortcode( 'google_map', 'Bing_add_google_map');
 
//挂载脚本
function Bing_add_javascript(){
  global $google_map_shortcode;
  if( isset( $google_map_shortcode ) && $google_map_shortcode ) wp_enqueue_script( 'map_scripts' );
}
add_action( 'wp_footer', 'Bing_add_javascript' );

Summary

Shortcode is a very powerful function. It is a good extension to the content of the article. If it is used well, it can make adding something quick and convenient.

The functions related to short codes are all in the wp-includes/shortcode.php file. Friends who are capable can read it to understand the principle.

Articles you may be interested in:

• PHP code example for adding page number navigation to article list page in WordPress theme
• Analysis of the role and basic usage of function hooks in WordPress
• Enable the theme to support widgets and add plug-in enabling functions in WordPress