


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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











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.

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.

A step-by-step guide to replacing a header image of WordPress: Log in to the WordPress dashboard and navigate to Appearance >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.

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.

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).

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.

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.

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.
