WordPress Shortcode Quick Guide: Easily embed HTML components without coding

WordPress shortcodes provide a convenient way for authors to insert HTML components into rendered pages without writing code. These short codes can be created in plugin code or placed in the theme's functions.php file.

Key advantages of short code:

• Simplify HTML embedding: Easily add complex HTML content without writing HTML code directly.
• Parameterized customization: Customize the output of short codes through parameters to achieve flexible personalized settings.
• Nesting function: Supports short code nesting to build more complex page functions.
• Improve efficiency:Simplify content management and improve content creation efficiency.

It is recommended to create a short code quick lookup table containing various examples, especially when dealing with complex features, which will make content management more convenient and user-friendly.

Short code creation location:

Generally, short codes created for custom plugins should be placed in the plugin code itself. However, you can also place the shortcode definition in the theme's functions.php file. A more practical way is to create a separate shortcodes.php file and then include it in functions.php using the following statement:

include('shortcodes.php');

The first "Hello World" shortcode:

Short code definition includes:

1. A function that returns HTML code string;
2. Call of the WordPress add_shortcode() hook that binds the shortcode text definition to the function.

The most basic example:

// "Hello World" 短代碼
function shortcode_HelloWorld() {
  return '<p>Hello World!</p>';
}
add_shortcode('helloworld', 'shortcode_HelloWorld');

Save the file and enter [helloworld] in the page or article. Visit the page and you will see that it has been replaced with the "Hello World!" paragraph.

Short code parameters:

Short codes can have optional parameters, such as:

<code>[sitemap title='網(wǎng)頁列表', depth=3]</code>

parameter is passed as an array to the shortcode function as the first parameter. The complete code for generating a page hierarchy sitemap:

// sitemap 短代碼
function shortcode_GenerateSitemap($params = array()) {

  // 默認參數(shù)
  extract(shortcode_atts(array(
    'title' => '站點地圖',
    'id'    => 'sitemap',
    'depth' => 2
  ), $params));

  // 創(chuàng)建站點地圖
  $sitemap = wp_list_pages("title_li=&depth=$depth&sort_column=menu_order&echo=0");
  if ($sitemap) {
    $sitemap =
      ($title ? "<h2>$title</h2>" : '') .
      '<ul>' . $sitemap . '</ul>';
  }

  return $sitemap;
}
add_shortcode('sitemap', 'shortcode_GenerateSitemap');

shortcode_atts() Function assigns default values ??to parameters when needed. The PHP extract() function then converts each array value into actual variables $title, $id, and $depth. (If you are using PHP 5.4 or later, you can replace [...] with the shorter array(...) syntax.) Add [sitemap] shortcodes to any article or page and change the parameters as needed, such as [sitemap depth=5].

Nested BBCode shortcode:

BBCode (blockboard code) is a lightweight tag format that uses [方括號] to represent commands, just like standard shortcodes. This allows shortcodes to contain text content or be nested with each other. Suppose your page requires reference and common call to action buttons. Creating a single shortcode is impractical, especially if the button can be used alone or embedded in a reference. We may need HTML like this:

include('shortcodes.php');

This can go wrong when the editor is very familiar with HTML. Fortunately, short codes provide an easier way, such as:

// "Hello World" 短代碼
function shortcode_HelloWorld() {
  return '<p>Hello World!</p>';
}
add_shortcode('helloworld', 'shortcode_HelloWorld');

The content between the tags is passed as the second parameter to the shortcode function. We can create two shortcode functions:

<code>[sitemap title='網(wǎng)頁列表', depth=3]</code>

Please note the use of the do_shortcode($content) function, which applies further shortcodes to the content when it exists. Short codes are easy to implement and can be changed or enhanced quickly. I suggest creating a short code quick lookup table with examples so that the editor can refer to when complex features are needed.

(Some of the article is sponsored by SiteGround. Thank you for your support for the partners who made SitePoint possible.)

The above is the detailed content of How to Create Custom WordPress Shortcodes for Your Editors. For more information, please follow other related articles on the PHP Chinese website!