中继器控件使您可以构建可重复的字段块。例如，您可以创建一组字段，其中将包含一个复选框和一个文本字段。然后，用户将能够添加“行”，并且每一行将包含一个复选框和一个文本字段
通过中继器，wordpress开发者门可以轻松的创建多个复用的模块。
中继器控件使您可以构建可重复的字段块。例如，您可以创建一组字段，其中将包含一个复选框和一个文本字段。然后，用户将能够添加“行”，并且每一行将包含一个复选框和一个文本字段。
- 代码来源：Stylizer主题
- 官方文档：Docs
演示：
创建一个转发器控件，其中每行包含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,
),
)
) );
