Table of Contents
Detailed explanation of the basic method of writing shortcode format tags in WordPress,
Articles you may be interested in:
Home Backend Development PHP Tutorial 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, _PHP tutorial

Jul 12, 2016 am 09:02 AM
wordpress

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 );
Copy after login

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' );
Copy after login

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' );
Copy after login

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

remove_all_shortcodes();
Copy after login

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
Copy after login

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
Copy after login

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 );
Copy after login

Example:

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

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' );

Copy after login


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' );
Copy after login

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' );

Copy after login

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

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1084559.htmlTechArticleDetails the basic method of writing shortcode format tags in WordPress. WordPress shortcode is something similar to forum tags , the format is similar to the Html tag with angle brackets replaced by square brackets. Jane...
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1272
29
C# Tutorial
1251
24
How to adjust the wordpress article list How to adjust the wordpress article list Apr 20, 2025 am 10:48 AM

There are four ways to adjust the WordPress article list: use theme options, use plugins (such as Post Types Order, WP Post List, Boxy Stuff), use code (add settings in the functions.php file), or modify the WordPress database directly.

How to build a website for wordpress host How to build a website for wordpress host Apr 20, 2025 am 11:12 AM

To build a website using WordPress hosting, you need to: select a reliable hosting provider. Buy a domain name. Set up a WordPress hosting account. Select a topic. Add pages and articles. Install the plug-in. Customize your website. Publish your website.

How to change the head image of the wordpress theme How to change the head image of the wordpress theme Apr 20, 2025 am 10:00 AM

A step-by-step guide to replacing a header image of WordPress: Log in to the WordPress dashboard and navigate to Appearance &gt;Theme. Select the topic you want to edit and click Customize. Open the Theme Options panel and look for the Site Header or Header Image options. Click the Select Image button and upload a new head image. Crop the image and click Save and Crop. Click the Save and Publish button to update the changes.

How to import the source code of wordpress How to import the source code of wordpress Apr 20, 2025 am 11:24 AM

Importing WordPress source code requires the following steps: Create a sub-theme for theme modification. Import the source code and overwrite the files in the sub-topic. Activate the sub-theme to make it effective. Test the changes to make sure everything works.

How to view the front-end of WordPress How to view the front-end of WordPress Apr 20, 2025 am 10:30 AM

You can view the WordPress front-end by logging into the dashboard and switching to the View Sites tab; automate the viewing process with a headless browser; installing the WordPress plugin to preview the front-end within the dashboard; viewing the front-end via a local URL (if WordPress is set locally).

What are the plugins for wordpress blocking ip What are the plugins for wordpress blocking ip Apr 20, 2025 am 08:27 AM

WordPress IP blocking plugin selection is crucial. The following types can be considered: based on .htaccess: efficient, but complex operation; database operation: flexible, but low efficiency; firewall: high security performance, but complex configuration; self-written: highest control, but requires more technical level.

How to cancel the editing date of wordpress How to cancel the editing date of wordpress Apr 20, 2025 am 10:54 AM

WordPress editing dates can be canceled in three ways: 1. Install the Enable Post Date Disable plug-in; 2. Add code in the functions.php file; 3. Manually edit the post_modified column in the wp_posts table.

How to write a header of a wordpress How to write a header of a wordpress Apr 20, 2025 pm 12:09 PM

The steps to create a custom header in WordPress are as follows: Edit the theme file "header.php". Add your website name and description. Create a navigation menu. Add a search bar. Save changes and view your custom header.

See all articles