Table of Contents
Detailed explanation of the use of shortcode shortcode function in WordPress, wordpressshortcode
Home Backend Development PHP Tutorial Detailed explanation of the shortcode function in WordPress, wordpressshortcode_PHP tutorial

Detailed explanation of the shortcode function in WordPress, wordpressshortcode_PHP tutorial

Jul 12, 2016 am 08:52 AM
wordpress short code

Detailed explanation of the use of shortcode shortcode function in WordPress, wordpressshortcode

WordPress has added a shortcode (short code) API starting from version 2.5, similar to BBCode on BBS. Shortcode can also easily add functions to articles or pages, and shortcode is more flexible and powerful than BBCode. Next, Kayo will introduce shortcode to you.

1. Shortcode Introduction
Shortcode allows developers to generate content by creating macro content in the form of functions. Perhaps this concept seems a bit vague, but in fact it is a very simple and practical function, as long as you can write basic PHP functions, that is Shortcode can be used. The following will use practical examples to illustrate the use of shortcode.

2.shortcode form
Shortcode supports closed tags and self-closing (automatically closed) tags, and supports the use of parameters within tags. As for the specific form of shortcode, it depends on how the developer writes the shortcode.

[myshortcode]Some Content[/myshortcode] // 封闭标签
[myshortcode] // 自闭标签
[myshortcode title="example"] // 带有一个参数的自闭标签
[myshortcode]<p><a href="#"><span>内容</span></a></p>[/myshortcode] // 标签内可以填写文本或 HTML
[myshortcode]Content [myshortcodesecond] more content[/myshortcodesecond] // 也可以嵌套使用标签

Copy after login

Three.shortcode examples
Before using shortcode, you must first define shortcode in the theme’s functions.php file, for example:

function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各个参数,$content 为标签内的内容
 
 extract(shortcode_atts(array( // 使用 extract 函数解析标签内的参数
 "title" => '标题' // 给参数赋默认值,下面直接调用 $ 加上参数名输出参数值
 ), $atts));
 // 返回内容
 return '<div class="myshortcode">
    <h3>'. $title .'</h3>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注册该 shortcode,以后使用 [msc] 标签调用该 shortcode
Copy after login
Copy after login

Add the above code to functions.php, and a simple shortcode will be created. We can call the shortcode through the [msc][/msc] tag, such as:

[msc title="欢迎"]这是独立博客 Kayo's Melody ,欢迎来到本博客[/msc]
Copy after login

Enter the above call in the article or page content, and you can output a welcome statement at the corresponding location. Define the corresponding CSS in style.css to give the short code a style.

Kayo briefly introduced the shortcode function of WordPress, mainly introducing the main concepts and usage of shortcode. In this article, Kayo will introduce the more important APIs in shortcode in more detail, hoping to help you develop more complex shortcodes.

4. Function add_shortcode

This function is used to register a shortcode. It has two parameters: the shortcode name and the shortcode processing function name. Quoting the above example:

function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各个参数,$content 为标签内的内容
 
 extract(shortcode_atts(array( // 使用 extract 函数解析标签内的参数
 "title" => '标题' // 给参数赋默认值,下面直接调用 $ 加上参数名输出参数值
 ), $atts));
 // 返回内容
 return '<div class="myshortcode">
    <h3>'. $title .'</h3>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注册该 shortcode,以后使用 [msc] 标签调用该 shortcode
Copy after login
Copy after login

msc is the shortcode name. You can directly use the [msc][/msc] tag to call the shortcode when writing articles or pages in the future, and "myshortcode_function" is the name of the shortcode processing function in the example. The following focuses on analyzing the short code processing function.

5. Short code processing function

The shortcode processing function is the core of a shortcode. The shortcode processing function is similar to Flickr (WordPress filter). They all accept specific parameters and return certain results. The shortcode processor accepts two parameters, $attr and $content. $attr represents the various attribute parameters of shortcode, which is essentially an associative array, and $content represents the content in the shortcode tag.

As in the above example, if a call is made within the article, a welcome statement will be output:

[msc title="Welcome"]This is an independent blog Kayo's Melody, welcome to this blog[/msc]
When the article is displayed, WordPress will register all shortcodes, such as [msc] above. If there are attribute parameters and content in the shortcode, WordPress will separate and parse them, and then pass them to the shortcode processing function of the shortcode. After processing The result output by the processing function is displayed in the article instead of the original content of the shortcode.

At this time, the attribute parameters will be parsed and the associative array will be passed to $attr. For example, in the above example, the value of $attr is an associative array as follows:

array( 'title' => '欢迎')
Copy after login

When outputting results, you can directly use the form of $parameter name to output. In the case of the example, the attribute value is output as $title.

6.shortcode_atts

shortcode_atts is a very practical function that can set default values ​​for the attribute parameters you need and delete some unnecessary parameters.

shortcode_atts() contains two parameters $defaults_array and $atts. $attr is the attribute parameter collection. $defaults_array represents the default value of the attribute that needs to be set. For example:

$result = shortcode_atts( array(
 'title' => '新标题',
 'description' => '描述内容'
), $atts );
$attr 依然为

array( 'title' => '欢迎')

Copy after login

The result of $result is

array( 'title' => '新标题', 'description' => '描述标题')
Copy after login

'title' Since there are different values ​​in $defaults_array, 'title' is updated based on this new value, and the value of 'description' is also added. It is worth noting that shortcode_atts() will filter attributes that are not in $defaults_array. If there is an 'ohter' attribute in $attr, then the result of $result will still be the above result, because there is no 'other' in $defaults_array this property. Of course, the value mentioned here is only the default value of the attribute, and the actual output value is still the value filled in when shortcode is called.

7. Further parse attributes and set attribute default values

The

extract() function is used to further parse attributes and set attribute default values. One of its functions is to assign each attribute parameter value to a variable in the form of "$parameter name" and save it (such as $title in the example). It is easy to call. Use this function together with shortcode_atts() to output the results safely. For the specific use of this point, please refer to the example of the first point of this article "1. Function add_shortcode".

In addition, uppercase letters in attribute names will be converted to lowercase letters before being passed to the processing function, so it is recommended to use lowercase letters directly when writing attribute names.

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1127865.htmlTechArticleDetailed explanation of the shortcode shortcode function in WordPress. WordPressshortcode WordPress has added a shortcode (short code) starting from version 2.5. Code) API, similar to BBCode on BBS,...
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 尊渡假赌尊渡假赌尊渡假赌

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
1664
14
PHP Tutorial
1269
29
C# Tutorial
1248
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.

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

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 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 import wordpress templates How to import wordpress templates Apr 20, 2025 am 10:18 AM

WordPress templates quickly create professional websites. The steps to import a template include: select and download the template. Log in to the WordPress dashboard. Select Theme from the Appearance menu. Click "Add New Theme". Click "Upload topic" and select the downloaded template .zip file. Click "Install Now". Click the "Activate" button. Customize the templates through the Customize menu.

See all articles