wordpress短码shortcode开发

sumcai 2022.04.05

开发步骤

修改文件

文件路径:xxx-theme\admin\codestar-framework\config\shortcoder.php

以添加提示框为例,示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$prefix = 'csf_demo_shortcodes';
CSF::createSection( $prefix, array(
    'title'     => '提示框',
    'view'      => 'normal',
    'shortcode' => 'ri_tips',
    'fields'    => array(
        array(
            'id'     => 'type',
            'type'   => 'select',
            'title'  => '图标大小',
            'options' => array(
                'werror' => '红色错误框',
                'wwarn' => '黄色警告框',
                'wtips' => '蓝色计划框',
                'wnotice' => '绿色提醒框',
			),
        ),
        array(
            'id'     => 'content',
            'type'   => 'textarea',
            'title'  => '输入文本',
            'attributes' => array(
              'style'    => 'width: 100%;'
            ),
        ),
    ),
) );

function ri_tips_code( $atts, $content = null ) {
    $shortcode_atts = shortcode_atts(
        array(
            'type'     => '',
        ),
        $atts,
        'ri_tips'
    );

    $output = '<div class=' . $shortcode_atts['type'] . '>';
    $output .= do_shortcode($content);
    $output .= '</div>';
    return $output;
}

add_shortcode('ri_tips', 'ri_tips_code');

上门代码的显示效果:

image-20220425214459925

点击插入短码,编辑器中将添加[ri_tips type="werror"]测试内容[/ri_tips]

预览显示效果:

image-20220425214727028

字段类型

有很多内置的字段类型,对应不同的内容展现方式,下面一一说明。

border

边框粗细、线性、颜色

1649133008802

spacing

上下左右空白

1649132962301

dimensions

尺寸

1649133112228

checkbox

复选框

1649133502003

1
2
3
4
5
6
array(
    'id'    => 'header_sticky',
    'type'  => 'checkbox',
    'title' => '显示设置',
    'label' => '在手机端开启',
)

radio

单选框

1649133737075

1
2
3
4
5
6
7
8
9
10
11
12
array(
    'id'     => 'icon3',
    'type'   => 'radio',
    'title'  => '显示设置',
    'label'   => '在手机端开启',
    'inline'  => true,
    'options' => array(
        'left'  => '靠左',
        'right' => '靠右',
    ),
    'default'    => 'right',
)

code_editor

代码编辑框

1649133985979

color

调色板

1649134021235

color_group

渐变色板

1649134071782

date

日期

1649134214226

相册

1649134166460

icon

font-awesome

1649134338052

image_select

图片选择

1649134457868

1
2
3
4
5
6
7
8
9
10
11
12
13
14
array(
    'id'     => 'icon1',
    'type'   => 'image_select',
    'title' => '文章页样式',
    'options' => array(
        '1'   => get_stylesheet_directory_uri() . '/static/images/admin/single-1.png',
        '2'   => get_stylesheet_directory_uri() . '/static/images/admin/single-2.png',
        ),
    'default'   => '1',
    'radio'     => true,
    'attributes'   => array(
        'data-depend-id' => 'post_layout',
        ),
)

超链接颜色(普通色、悬浮色)

1649134568146

map

地图

1649134638694

media

媒体

1649134761456

select

1649134961164

1
2
3
4
5
6
7
8
9
10
11
12
13
array(
    'id'     => 'icon3',
    'type'    => 'select',
    'title'   => '选择颜色',
    'options' => array(
        '#dd3333' => '红色',
        '#eeee22' => '黄色',
        '#81d742' => '绿色',
        '#1e73be' => '蓝色',
        '#8224e3' => '紫色',
    ),
    'default' => '#dd3333',
)

slider

滑框

1649135069025

switcher

开关

1649135269132

tabbed

标签页

1649135611290

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
array(
	'id'     => 'icon1',
	'type'  => 'tabbed',
	'title' => '页脚模块设置',
	'tabs'  => array(
		array(
			'title'  => '关于我们',
			'fields' => array(
				array(
					'id'        => 'footer_3_about_title',
					'type'      => 'text',
					'title'     => '标题',
					'attributes'=> array('style'=> 'width: 100%;'),
				),
				array(
					'id'        => 'footer_3_about_desc',
					'type'      => 'textarea',
					'title'     => '描述',
					'attributes'=> array('style'=> 'width: 100%;'),
					'after'     => '如需换行,请使用 br 标签...',
				),
			),
		),
		array(
			'title'  => '快捷导航',
			'fields' => array(
				array(
					'id'        => 'footer_3_menu_title',
					'type'      => 'text',
					'title'     => '标题',
					'attributes'=> array('style'=> 'width: 100%;'),
				),
			),
		),
	),
)

text

文本框

1649135299066

textarea

富文本框

1649135318648

upload

上传文件

1649136104227

heading

subheading

标题

1649136166665

notice

1649136586927

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
array(
	'id'     => 'icon',
	'type'  => 'notice',
	'style' => 'info',
	'content'  => 'style == info',
),
array(
	'id'    => 'icon1',
	'type'  => 'notice',
	'style' => 'success',
	'content'  => 'style == success',
),
array(
	'id'    => 'icon2',
	'type'  => 'notice',
	'style' => 'warning',
	'content'  => 'style == warning',
),
array(
	'id'     => 'icon3',
	'type'  => 'notice',
	'style' => 'danger',
	'content'  => 'style == danger',
)

number

1649136386910

1
.$syntax_language.