WordPress基本短代码功能定义方法和例子示例演示

基本短代码

如何给Wordpress经典编辑器添加短代码功能?下面我们提供Wordpress基本短代码功能定义方法和例子示例演示,要在WordPress经典编辑器中添加短代码功能,你可以通过以下纯代码实现方式来完成。这涉及到创建一个自定义的短代码,并将其注册到WordPress中。

步骤 1: 创建短代码函数

首先,在你的主题的 functions.php 文件中,添加一个函数来定义你的短代码。这个函数将定义短代码的内容和功能。


function my_custom_shortcode($atts, $content = null) {

// 提取短代码属性

$atts = shortcode_atts(

array(

'attribute1' => 'default_value1',

'attribute2' => 'default_value2',

),

$atts,

'my_shortcode'

);

 

// 返回短代码的HTML输出

return '<div class="my-shortcode-class">' . $content . '</div>';

}

add_shortcode('my_shortcode', 'my_custom_shortcode');

步骤 2: 注册短代码

接下来,你需要确保短代码在WordPress中注册并可用。这通常通过在 init 钩子上添加一个动作来实现。


function register_my_shortcodes() {

add_shortcode('my_shortcode', 'my_custom_shortcode');

}

add_action('init', 'register_my_shortcodes');

步骤 3: 在经典编辑器中启用短代码按钮(可选)

如果你希望在经典编辑器中添加一个按钮来方便地插入短代码,你可以使用以下代码。这需要使用WordPress的TinyMCE API。


function add_my_shortcode_button() {

// 检查用户权限

if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {

return;

}

 

// 检查是否启用了经典编辑器

if (get_user_option('rich_editing') == 'true') {

add_filter('mce_external_plugins', 'add_my_tinymce_plugin');

add_filter('mce_buttons', 'register_my_shortcode_button');

}

}

add_action('admin_init', 'add_my_shortcode_button');

 

function add_my_tinymce_plugin($plugin_array) {

$plugin_array['my_shortcode_button'] = get_template_directory_uri() . '/style/js/my-shortcode-button.js';

return $plugin_array;

}

 

function register_my_shortcode_button($buttons) {

array_push($buttons, 'my_shortcode_button');

return $buttons;

}

步骤 4: 创建TinyMCE插件脚本

在主题目录下创建一个 style目录,再在该目录下创建js 文件夹,并在其中创建一个名为 my-shortcode-button.js 的文件。这个文件将定义按钮的行为。


(function() {

tinymce.create('tinymce.plugins.MyShortcodeButton', {

init: function(editor, url) {

editor.addButton('my_shortcode_button', {

title: 'Insert My Shortcode',

icon: 'icon dashicons-before dashicons-shortcode',

onclick: function() {

editor.insertContent('
Your content here
'); } }); }, createControl: function(n, cm) { return null; }, }); tinymce.PluginManager.add('my_shortcode_button', tinymce.plugins.MyShortcodeButton); })();

WordPress基本短代码添加到经典编辑器总结:

将以下代码放入你的主题的 functions.php 文件中,或者放在自己自定义的插件中。


//自定义短代码 begin

 

function my_custom_shortcode($atts, $content = null) {

// 提取短代码属性

$atts = shortcode_atts(

array(

'attribute1' => 'default_value1',

'attribute2' => 'default_value2',

),

$atts,

'my_shortcode'

);

 

// 返回短代码的HTML输出

return '<div class="my-shortcode-class">' . $content . '</div>';

}

add_shortcode('my_shortcode', 'my_custom_shortcode');

 

 

//步骤2

function register_my_shortcodes() {

add_shortcode('my_shortcode', 'my_custom_shortcode');

}

add_action('init', 'register_my_shortcodes');

 

 

 

//步骤3

function add_my_shortcode_button() {

// 检查用户权限

if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {

return;

}

 

// 检查是否启用了经典编辑器

if (get_user_option('rich_editing') == 'true') {

add_filter('mce_external_plugins', 'add_my_tinymce_plugin');

add_filter('mce_buttons', 'register_my_shortcode_button');

}

}

add_action('admin_init', 'add_my_shortcode_button');

 

function add_my_tinymce_plugin($plugin_array) {

$plugin_array['my_shortcode_button'] = get_template_directory_uri() . '/style/js/my-shortcode-button.js';

return $plugin_array;

}

 

function register_my_shortcode_button($buttons) {

array_push($buttons, 'my_shortcode_button');

return $buttons;

}

将以下代码命名为my-shortcode-button.js文件,并放在 https://hao-blog.com/wp-content/themes/SEO/style/ 下的js目录中:


(function() {

tinymce.create('tinymce.plugins.MyShortcodeButton', {

init: function(editor, url) {

editor.addButton('my_shortcode_button', {

title: 'Insert My Shortcode',

icon: 'icon dashicons-before dashicons-shortcode',

onclick: function() {

editor.insertContent('
Your content here
'); } }); }, createControl: function(n, cm) { return null; }, }); tinymce.PluginManager.add('my_shortcode_button', tinymce.plugins.MyShortcodeButton); })();

以上是基本短代码功能的案例演示,如果想了解更多请关注好客站seo研究中心hao-blog.com ,下面我们讲讲wp添加短代码API的专业教程。

添加短代码

您可以使用 Shortcode API 添加您自己的短代码。该过程涉及使用注册$func短代码的回调 $tagadd_shortcode()。

add_shortcode(

string $tag,

callable $func

);

[wporg]是您的新短代码。使用该短代码将触发wporg_shortcode回调函数。


add_shortcode('wporg', 'wporg_shortcode');

function wporg_shortcode( $atts = [], $content = null) {

// do something to $content

// always return

return $content;

}

删除短代码

可以使用 Shortcode API 删除短代码。该过程包括$tag使用remove_shortcode()删除已注册的短代码。

remove_shortcode(
string $tag
);

尝试移除之前,请确保短代码已注册。请为add_action()指定更高的优先级 ,或将其挂接到稍后运行的操作钩子中。

检查短代码是否存在

要检查短代码是否已注册,请使用shortcode_exists()。

基本短代码

使用集成短代码为您的帖子添加丰富的内容,包括标签、警报、进度条等。使用我们简洁的短代码生成器用户界面轻松插入短代码,无需任何编程。

插入短代码

要将短代码插入到您的帖子内容中,请导航到帖子编辑器屏幕,然后单击 WordPress 编辑器工具栏中的短代码图标:

WordPress基本短代码功能定义方法和例子示例演示-SEO技术-网站营销-短视频推广-海外跨境电商-编程开发教程-跨贸出口贸易中心

在经典编辑器中添加短代码功能 - WordPress中的基本短代码按钮图示

 

顶部