Repeaterz中继器 - Kirki设置框架

中继器控件使您可以构建可重复的字段块。例如,您可以创建一组字段,其中将包含一个复选框和一个文本字段。然后,用户将能够添加“行”,并且每一行将包含一个复选框和一个文本字段

通过中继器,wordpress开发者门可以轻松的创建多个复用的模块。

中继器控件使您可以构建可重复的字段块。例如,您可以创建一组字段,其中将包含一个复选框和一个文本字段。然后,用户将能够添加“行”,并且每一行将包含一个复选框和一个文本字段。

Repeaterz中继器 -  Kirki设置框架-Npcink

演示:

创建一个转发器控件,其中每行包含2个文本字段:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'repeater',
	'label'       => esc_html__( 'Repeater Control', 'kirki' ),
	'section'     => 'section_id',
	'priority'    => 10,
	'row_label' => [
		'type'  => 'text',
		'value' => esc_html__( 'Your Custom Value', 'kirki' ),
	],
	'button_label' => esc_html__('"Add new" button label (optional) ', 'kirki' ),
	'settings'     => 'my_repeater_setting',
	'default'      => [
		[
			'link_text' => esc_html__( 'Kirki Site', 'kirki' ),
			'link_url'  => 'https://kirki.org/',
		],
		[
			'link_text' => esc_html__( 'Kirki Repository', 'kirki' ),
			'link_url'  => 'https://github.com/aristath/kirki',
		],
	],
	'fields' => [
		'link_text' => [
			'type'        => 'text',
			'label'       => esc_html__( 'Link Text', 'kirki' ),
			'description' => esc_html__( 'This will be the label for your link', 'kirki' ),
			'default'     => '',
		],
		'link_url'  => [
			'type'        => 'text',
			'label'       => esc_html__( 'Link URL', 'kirki' ),
			'description' => esc_html__( 'This will be the link URL', 'kirki' ),
			'default'     => '',
		],
	]
] );

创建一个转发器控件,其中标签具有基于字段输入的动态名称。['row_label']['value']如果从指定字段未返回任何内容,则将使用此命令:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'repeater',
	'label'       => esc_html__( 'Repeater Control', 'kirki' ),
	'section'     => 'section_id',
	'priority'    => 10,
	'row_label' => [
		'type'  => 'field',
		'value' => esc_html__( 'Your Custom Value', 'kirki' ),
		'field' => 'link_text',
	],
	'button_label' => esc_html__('"Add new" button label (optional) ', 'kirki' ),
	'settings'     => 'my_repeater_setting',
	'default'      => [
		[
			'link_text' => esc_html__( 'Kirki Site', 'kirki' ),
			'link_url'  => 'https://kirki.org/',
		],
		[
			'link_text' => esc_html__( 'Kirki Repository', 'kirki' ),
			'link_url'  => 'https://github.com/aristath/kirki',
		],
	],
	'fields' => [
		'link_text' => [
			'type'        => 'text',
			'label'       => esc_html__( 'Link Text', 'kirki' ),
			'description' => esc_html__( 'This will be the label for your link', 'kirki' ),
			'default'     => '',
		],
		'link_url' => [
			'type'        => 'text',
			'label'       => esc_html__( 'Link URL', 'kirki' ),
			'description' => esc_html__( 'This will be the link URL', 'kirki' ),
			'default'     => '',
		],
	]
] );

创建一个最多包含3行的中继器控件:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'repeater',
	'label'       => esc_attr__( 'Repeater Control', 'kirki' ),
	'section'     => 'section_id',
	'priority'    => 10,
	'row_label' => [
		'type'  => 'field',
		'value' => esc_html__( 'Your Custom Value.', 'kirki' ),
		'field' => 'link_text',
	],
	'settings'    => 'my_repeater_setting',
	'fields' => [
		'link_text' => [
			'type'        => 'text',
			'label'       => esc_attr__( 'Link Text', 'kirki' ),
			'description' => esc_attr__( 'This will be the label for your link', 'kirki' ),
		],
	],
	'default'     => [
		[
			'link_text' => esc_attr__( 'Link Text Example', 'kirki' ),
		],
	],
	'choices' => [
		'limit' => 3
	],
] );

用法

<?php
// Default values for 'my_repeater_setting' theme mod.
$defaults = [
  [
    'link_text' => esc_html__( 'Kirki Site', 'kirki' ),
		'link_url'  => 'https://kirki.org/',
	],
	[
		'link_text' => esc_html__( 'Kirki Repository', 'kirki' ),
		'link_url'  => 'https://github.com/aristath/kirki',
	],
];

// Theme_mod settings to check.
$settings = get_theme_mod( 'my_repeater_setting', $defaults ); ?>

<div class="kirki-links">
    <?php foreach( $settings as $setting ) : ?>
        <a href="<?php $setting['link_url']; ?>">
            <?php $setting['link_text']; ?>
        </a>
    <?php endforeach; ?>
</div>

实战:自定义图标

<!--社交图标,调用代码-->
<div class="lifet-header-link">
<?php lifet_link_image_icon();?>
</div>


<?php
//功能代码

//社交图标
if ( ! function_exists( 'lifet_link_image_icon' ) ) :
	function lifet_link_image_icon() {

		$links = get_theme_mod('lifet-links', array());
		if ( !empty( $links ) ) {
			echo '<ul class="lifet-links">';	
			foreach( $links as $item ) {
				
				// Build each separate html-section only if set
				if ( isset($item['lifet-title']) && !empty($item['lifet-title']) ) 
					{ $title = 'title="' .esc_attr( $item['lifet-title'] ). '"'; } else $title = '';
				if ( isset($item['lifet-link']) && !empty($item['lifet-link']) ) 
					{ $link = 'href="' .esc_url( $item['lifet-link'] ). '"'; } else $link = '';
				if ( isset($item['lifet-target']) && !empty($item['lifet-target']) ) 
					{ $target = 'target="_blank"'; } else $target = '';
				if ( isset($item['lifet-icon']) && !empty($item['lifet-icon']) ) 
					{ $icon = 'class="fa ' .esc_attr( $item['lifet-icon'] ). '"'; } else $icon = '';
				if ( isset($item['lifet-color']) && !empty($item['lifet-color']) ) 
					{ $color = 'style="color: ' .esc_attr( $item['lifet-color'] ). ';"'; } else $color = '';
				
				// Put them together
				if ( isset($item['lifet-title']) && !empty($item['lifet-title']) && isset($item['lifet-icon']) && !empty($item['lifet-icon']) && ($item['lifet-icon'] !='fa-') ) {
					echo '<li><a rel="nofollow" class="lifet-tooltip" '.$title.' '.$link.' '.$target.'><i '.$icon.' '.$color.'></i></a></li>';
				}
			}
			echo '</ul>';
		}
		
		}
endif;



//设置节

//Lifet主题设置
//使用kirki设置框架

if ( ! class_exists( 'Kirki' ) ) {
    return;
}


//初始化
Kirki::add_config( 'lifet', array(
    'capability'    => 'edit_theme_options',
    'option_type'   => 'theme_mod',
) );

//添加面板
Kirki::add_panel( 'lifet_panel', array(
    'priority'    => 10,
    'title'       => esc_html__( 'Lifet主题设置', 'lifet' ),
    'description' => esc_html__( '开始一段精彩时光', 'lifet' ),
) );



    //添加社交图片节
	Kirki::add_section( 'lifet_section_link_img', array(
        'title'          => esc_html__( '社交图片', 'lifet' ),
        'description'    => esc_html__( '顶部社交图片', 'lifet' ),
        'panel'          => 'lifet_panel',
        'priority'       => 160,
	) );




	//选择图标
	Kirki::add_field( 'lifet-theme', array(
		'type'			=> 'repeater',
		'label'			=> esc_html__( '选择社交图标', 'lifet' ),
		'description'	=> esc_html__( '在这里选择社交图标', 'lifet' ),
		'section'		=> 'lifet_section_link_img',
		'tooltip'		=> esc_html__( '图标名:', 'lifet' ) . ' <a href="https://fontawesome.com/icons?d=gallery&s=brands&m=free" target="_blank"><strong>' . esc_html__( '所有图标', 'lifet' ) . ' </strong></a>',
		'row_label'		=> array(
			'type'	=> 'text',
			'value'	=> esc_html__('社交图标', 'lifet' ),
		),
		'settings'		=> 'lifet-links',
		'default'		=> '',
		'fields'		=> array(
			'lifet-title'	=> array(
				'type'			=> 'text',
				'label'			=> esc_html__( '标题', 'lifet' ),
				'description'	=> esc_html__( '例如:QQ', 'lifet' ),
				'default'		=> '',
			),
			'lifet-icon'	=> array(
				'type'			=> 'text',
				'label'			=> esc_html__( '图标名', 'lifet' ),
				'description'	=> esc_html__( '类似这样: fa-qq ', 'lifet' ) . ' <a href="https://fontawesome.com/icons?d=gallery&s=brands&m=free" target="_blank"><strong>' . esc_html__( '查看图标', 'lifet' ) . ' </strong></a>',
				'default'		=> 'fa-',
			),
			'lifet-link'	=> array(
				'type'			=> 'link',
				'label'			=> esc_html__( '图标链接', 'lifet' ),
				'description'	=> esc_html__( '图标对应的链接', 'lifet' ),
				'default'		=> 'http://',
			),
			'lifet-color'	=> array(
				'type'			=> 'color',
				'label'			=> esc_html__( '图标颜色', 'lifet' ),
				'description'	=> esc_html__( '图标的展示颜色', 'lifet' ),
				'default'		=> '',
			),
			'lifet-target'	=> array(
				'type'			=> 'checkbox',
				'label'			=> esc_html__( '新窗口打开', 'lifet' ),
				'default'		=> false,
			),
		)
		
	) );
WP开发

Kirki - wordpress设置框架

2020-5-17 7:29:05

WP开发

怎么引入jquery.js? - wordpress开发

2020-5-19 23:23:25

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索