GenerateWP Logo

Shortcodes Generator

Overview

Use this tool to create custom code for Shortcodes with add_shortcode() function.

Usage

  • Fill in the user-friendly form.
  • Click the “Update Code” button.
  • Copy the code to your project.
  • Or save it as a snippet and share with the community.

Examples

If you are still learning how to use this tool, check out the following examples:

Shortcode tag in the content.
e.g. [tag]
The function used in the code.
Self-closing shortcode: [tag]
Enclosing shortcode: [tag]content[/tag]
Enable attributes such as
[tag foo="123" bar="456"].
Use "shortcode_atts_{$shortcode}" filter, to allow shortcode attributes filtering.
Set custom filter name.
Attribute name. Lowercase.
Default value.
e.g. [tag attr_name="default_value"]
Attribute name. Lowercase.
Default value.
Attribute name. Lowercase.
Default value.
Custom code to generate the output.
Should only "return" the text, never produce the output directly.
  Save Snippet 
// Add Shortcode
function custom_shortcode() {

	function copy_text_shortcode($atts, $content = null) {
	    $atts = shortcode_atts(array(
	        'label' => '复制', // 按钮的标签
	    ), $atts, 'copytext');
	
	    $html = '<span id="copy-text" style="display:none;">' . $content . '</span>';
	    $html .= '<button id="copy-btn" onclick="copyText()">' . esc_html($atts['label']) . '</button>';
	    
	    $html .= '<script>
	        function copyText() {
	            var text = document.getElementById("copy-text").innerText;
	            navigator.clipboard.writeText(text).then(function() {
	                alert("文本已复制到剪贴板");
	            }, function(err) {
	                console.error("无法复制文本", err);
	            });
	        }
	    </script>';
	
	    return $html;
	}
	add_shortcode('copytext', 'copy_text_shortcode');
	

}
add_shortcode( 'copyContent', 'custom_shortcode' );