kirki是一款简单高效的定制器开发工具。本文将问你介绍添加它的控件的一些示例供你参考。
首先，添加控件之前，先添加面板与组件
//添加面板
Kirki::add_panel(‘panel_id’, array(
‘priority’ => 10,
‘title’ => ‘五弟主题选项’,
‘description’ => ‘主题选项的相关描述’,
));
//添加组件
Kirki::add_section(‘section_id’, array(
‘title’ => ‘通用’,
‘description’ => ‘通用组件的相关描述’,
‘panel’ => ‘panel_id’,
‘priority’ => 160,
));
下面是控件的一些示例，这些示例都添加到组件section_id中了。
示范代码如下：
//添加滑块
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘slider’,
‘settings’ => ‘custom_excerpt_length’,
‘label’ => ‘摘要长度’,
‘section’ => ‘section_id’,
‘default’ => 100,
‘choices’ => [
‘min’ => 0,
‘max’ => 200,
‘step’ => 1,
],
));
//添加背景控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘Background’,
‘settings’ => ‘background_setting’,
‘label’ => ‘背景控件’,
‘description’ => ‘背景控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => [
‘background-color’ => ‘rgba(20,20,20,.8)’,
‘background-image’ => ”,
‘background-repeat’ => ‘repeat’,
‘background-position’ => ‘center center’,
‘background-size’ => ‘cover’,
‘background-attachment’ => ‘scroll’,
],
‘transport’ => ‘auto’,
‘output’ => [
[
‘element’ => ‘body’,
],
],
));
//添加复选框
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘checkbox’,
‘settings’ => ‘checkbox_setting’,
‘label’ => ‘复选框控件’,
‘description’ => ‘复选框控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => true,
));
//添加代码控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘code’,
‘settings’ => ‘code_setting’,
‘label’ => ‘代码控件’,
‘description’ => ‘代码控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ”,
‘choices’ => [
‘language’ => ‘css’,
],
));
//添加颜色控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘color’,
‘settings’ => ‘color_setting_hex’,
‘label’ => ‘颜色控件’,
‘description’ => ‘颜色控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ‘#0008DC’,
));
//添加图标控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dashicons’,
‘settings’ => ‘dashicons_setting’,
‘label’ => ‘图标控件’,
‘section’ => ‘section_id’,
‘default’ => ‘menu’,
));
//添加日期控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘date’,
‘settings’ => ‘date_setting’,
‘label’ => ‘日期控件’,
‘description’ => ‘日期控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ”,
));
//添加CSS尺寸控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dimension’,
‘settings’ => ‘dimension_setting’,
‘label’ => ‘CSS尺寸控件’,
‘description’ => ‘CSS尺寸控件的相关描述,请输入CSS的数值,比如10px、1rem’,
‘section’ => ‘section_id’,
‘default’ => ’10px’,
‘choices’ => [
‘accept_unitless’ => true,
],
));
//控制宽度和高度的控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dimensions’,
‘settings’ => ‘setting_dimensions_1’,
‘label’ => ‘控制宽度和高度的控件’,
‘description’ => ‘控制宽度和高度的控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => [
‘width’ => ‘100px’,
‘height’ => ‘100px’,
],
));
//控制padding的控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dimensions’,
‘settings’ => ‘setting_dimensions_2’,
‘label’ => ‘控制padding的控件’,
‘description’ => ‘控制padding的控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => [
‘padding-top’ => ‘1em’,
‘padding-bottom’ => ’10rem’,
‘padding-left’ => ‘1vh’,
‘padding-right’ => ’10px’,
],
));
//控制最小和最大的宽高的控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dimensions’,
‘settings’ => ‘setting_dimensions_3’,
‘label’ => ‘控制最小和最大的宽高的控件’,
‘section’ => ‘section_id’,
‘default’ => [
‘min-width’ => ‘100px’,
‘max-width’ => ‘500px’,
‘min-height’ => ’50px’,
‘max-height’ => ’10em’,
],
‘choices’ => [
‘labels’ => [
‘min-width’ => ‘最小宽度’,
‘max-width’ => ‘最大宽度’,
‘min-height’ => ‘最小高度’,
‘max-height’ => ‘最大高度’,
],
],
));
//添加下拉页面控件,返回值是页面ID值
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘dropdown_pages’,
‘settings’ => ‘dropdown_pages_setting’,
‘label’ => ‘下拉页面控件’,
‘section’ => ‘section_id’,
‘default’ => 42,//填写页面ID
‘priority’ => 10,
));
//添加文本编辑器控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘editor’,
‘settings’ => ‘editor_setting’,
‘label’ => ‘文本编辑器控件’,
‘description’ => ‘文本编辑器控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ”,
));
//添加通用控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘generic_custom’,
‘settings’ => ‘generic_custom_setting’,
‘label’ => ‘通用控件’,
‘description’ => ‘通用控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ”,
‘choices’ => [
‘element’ => ‘input’,
‘type’ => ‘password’,
‘style’ => ‘background-color:black;color:red;’,
‘data-foo’ => ‘bar’,
],
));
/**
* 添加图片控件，默认返回URL链接
* 也可以返回图片的ID值，或者返回数组
* */
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘image’,
‘settings’ => ‘image_setting_url’,
‘label’ => ‘图片控件’,
‘description’ => ‘图片控件的描述，默认返回URL链接’,
‘section’ => ‘section_id’,
‘default’ => ”,
//解除下面的注释，则返回图片的ID值
/* ‘choices’ => [
‘save_as’ => ‘id’,
], */
//解除下面的注释,则返回数组
/* ‘choices’ => [
‘save_as’ => ‘array’,
], */
));
//添加网址控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘url’,
‘settings’ => ‘url_setting’,
‘label’ => ‘网址控件’,
‘section’ => ‘section_id’,
‘default’ => ‘https://www.555d.cn’,
‘priority’ => 10,
));
//添加多重复选框控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘multicheck’,
‘settings’ => ‘multicheck_setting’,
‘label’ => ‘多重复选框控件’,
‘section’ => ‘section_id’,
‘default’ => [ ‘option-1’, ‘option-3’, ‘option-4’ ],
‘priority’ => 10,
‘choices’ => [
‘option-1’ => ‘选项1’,
‘option-2’ => ‘选项2’,
‘option-3’ => ‘选项3’,
‘option-4’ => ‘选项4’,
‘option-5’ => ‘选项5’,
],
));
//添加多色控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘multicolor’,
‘settings’ => ‘multicolor_setting’,
‘label’ => ‘多色控件’,
‘section’ => ‘section_id’,
‘priority’ => 10,
‘choices’ => [
‘link’ => ‘link颜色’,
‘hover’ => ‘hover颜色’,
‘active’ => ‘active颜色’,
],
‘alpha’ => true,
‘default’ => [
‘link’ => ‘#0088cc’,
‘hover’ => ‘#00aaff’,
‘active’ => ‘#00ffff’,
],
));
//添加数字控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘number’,
‘settings’ => ‘number_setting’,
‘label’ => ‘数字控件’,
‘section’ => ‘section_id’,
‘default’ => 42,
‘choices’ => [
‘min’ => -10,
‘max’ => 80,
‘step’ => 1,
],
));
//添加调色板控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘palette’,
‘settings’ => ‘palette_setting’,
‘label’ => ‘调色板控件’,
‘section’ => ‘section_id’,
‘default’ => ‘green’,
‘choices’ => array(
‘a200’ => Kirki_Helper::get_material_design_colors( ‘A200’ ),
‘blue’ => Kirki_Helper::get_material_design_colors( ‘blue’ ),
‘green’ => [ ‘#E8F5E9’, ‘#C8E6C9’, ‘#A5D6A7’, ‘#81C784’, ‘#66BB6A’, ‘#4CAF50’, ‘#43A047’, ‘#388E3C’, ‘#2E7D32’, ‘#1B5E20’, ‘#B9F6CA’, ‘#69F0AE’, ‘#00E676’, ‘#00C853’ ],
‘bw’ => [ ‘#000000’, ‘#ffffff’ ],
),
));
//添加收音机控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘radio’,
‘settings’ => ‘radio_setting’,
‘label’ => ‘收音机控件’,
‘description’ => ‘收音机控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ‘red’,
‘priority’ => 10,
‘choices’ => [
‘red’ => ‘红色’,
‘green’ => ‘绿色’,
‘blue’ => ‘蓝色’,
],
));
//添加中继器控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘repeater’,
‘settings’ => ‘repeater_setting’,
‘label’ => ‘中继器控件’,
‘section’ => ‘section_id’,
‘priority’ => 999,
‘default’ => [
[
‘link_text’ => ‘五弟主题链接’,
‘link_url’ => ‘https://www.555d.cn’,
‘link_target’ => ‘_self’,
‘checkbox’ => false,
],
[
‘link_text’ => ‘五弟主题介绍’,
‘link_url’ => ‘https://www.555d.cn/theme-info’,
‘link_target’ => ‘_blank’,
‘checkbox’ => true,
],
],
‘fields’ => [
‘link_text’ => [
‘type’ => ‘text’,
‘label’ => ‘文字链接’,
‘description’ => ‘文字链接的描述’,
‘default’ => ”,
],
‘link_url’ => [
‘type’ => ‘text’,
‘label’ => ‘url地址’,
‘description’ => ‘url的相关描述’,
‘default’ => ”,
],
‘link_target’ => [
‘type’ => ‘select’,
‘label’ => ‘链接打开方式’,
‘description’ => ‘相关描述’,
‘default’ => ‘_self’,
‘choices’ => [
‘_blank’ => ‘新窗口打开’,
‘_self’ => ‘当前窗口打开’,
],
],
‘checkbox’ => [
‘type’ => ‘checkbox’,
‘label’ => ‘一个复选框控件’,
‘default’ => false,
],
],
));
//添加选择器控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘select’,
‘settings’ => ‘select_setting’,
‘label’ => ‘选择器控件’,
‘description’ => ‘选择器控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ‘option-3’,
// ‘multiple’ => 2,//开启此项则是多选
‘choices’ => [
‘option-1’ => ‘选项1’,
‘option-2’ => ‘选项2’,
‘option-3’ => ‘选项3’,
‘option-4’ => ‘选项4’,
‘option-5’ => ‘选项5’,
],
));
//添加可分类控件控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘sortable’,
‘settings’ => ‘sortable_setting’,
‘label’ => ‘可分类控件’,
‘section’ => ‘section_id’,
‘default’ => [ ‘option3’, ‘option1’, ‘option4’ ],
‘priority’ => 10,
‘choices’ => [
‘option1’ => ‘选项1’,
‘option2’ => ‘选项2’,
‘option3’ => ‘选项3’,
‘option4’ => ‘选项4’,
‘option5’ => ‘选项5’,
‘option6’ => ‘选项6’,
],
));
//添加可分类控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘date’,
‘settings’ => ‘date_setting’,
‘label’ => ‘日期控件’,
‘description’ => ‘日期控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ”,
));
//添加开关控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘switch’,
‘settings’ => ‘switch_setting’,
‘label’ => ‘开关控件’,
‘description’ => ‘开关控件的相关描述’,
‘section’ => ‘section_id’,
‘default’ => ‘on’,
‘choices’ => [
‘on’ => ‘开启’,
‘off’ => ‘关闭’,
],
));
//添加文本控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘text’,
‘settings’ => ‘text_setting’,
‘label’ => ‘文本控件’,
‘section’ => ‘section_id’,
‘default’ => ‘文本控件的相关描述’,
‘priority’ => 10,
));
//添加文本域控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘textarea’,
‘settings’ => ‘textarea_setting’,
‘label’ => ‘文本域控件’,
‘section’ => ‘section_id’,
‘default’ => ‘文本域控件的相关描述’,
));
//添加切换控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘toggle’,
‘settings’ => ‘toggle_setting’,
‘label’ => ‘切换控件’,
‘section’ => ‘section_id’,
‘default’ => ‘1’,
‘priority’ => 10,
));
//添加排版控件
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘typography’,
‘settings’ => ‘typography_setting’,
‘label’ => ‘排版控件’,
‘description’ => ‘排版控件的相关描述’,
‘section’ => ‘section_id’,
‘priority’ => 10,
‘transport’ => ‘auto’,
‘default’ => [
‘font-family’ => ‘Roboto’,
‘variant’ => ‘regular’,
‘font-style’ => ‘normal’,
‘color’ => ‘#333333’,
‘font-size’ => ’14px’,
‘line-height’ => ‘1.5’,
‘letter-spacing’ => ‘0’,
‘text-transform’ => ‘none’,
‘text-decoration’ => ‘none’,
‘text-align’ => ‘left’,
],
‘output’ => [
[
‘element’ => ‘body’,
],
],
));
//添加上传控件,它与图片控件类似,但它可以上传更多文件类型
Kirki::add_field(‘fivebro_theme’, array(
‘type’ => ‘upload’,
‘settings’ => ‘upload_setting’,
‘label’ => ‘上传控件’,
‘description’ => ‘上传控件的相关描述’,
‘section’ => ‘section_id’,
));
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容