开发步骤
修改文件
文件路径：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');
上门代码的显示效果：
点击插入短码，编辑器中将添加[ri_tips type="werror"]测试内容[/ri_tips]
预览显示效果：
字段类型
有很多内置的字段类型，对应不同的内容展现方式，下面一一说明。
border
边框粗细、线性、颜色
spacing
上下左右空白
dimensions
尺寸
checkbox
复选框
1
2
3
4
5
6
array(
'id' => 'header_sticky',
'type' => 'checkbox',
'title' => '显示设置',
'label' => '在手机端开启',
)
radio
单选框
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
代码编辑框
color
调色板
color_group
渐变色板
date
日期
gallery
相册
icon
font-awesome
image_select
图片选择
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',
),
)
link_color
超链接颜色(普通色、悬浮色)
map
地图
media
媒体
select
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
滑框
switcher
开关
tabbed
标签页
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
文本框
textarea
富文本框
upload
上传文件
heading
subheading
标题
notice
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
1
.$syntax_language.