中繼器控件使您可以構(gòu)建可重復(fù)的字段塊。例如，您可以創(chuàng)建一組字段，其中將包含一個復(fù)選框和一個文本字段。然后，用戶將能夠添加“行”，并且每一行將包含一個復(fù)選框和一個文本字段
通過中繼器，wordpress開發(fā)者門可以輕松的創(chuàng)建多個復(fù)用的模塊。
中繼器控件使您可以構(gòu)建可重復(fù)的字段塊。例如，您可以創(chuàng)建一組字段，其中將包含一個復(fù)選框和一個文本字段。然后，用戶將能夠添加“行”，并且每一行將包含一個復(fù)選框和一個文本字段。
- 代碼來源：Stylizer主題
- 官方文檔：Docs
演示：
創(chuàng)建一個轉(zhuǎn)發(fā)器控件，其中每行包含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' => '',
],
]
] );創(chuàng)建一個轉(zhuǎn)發(fā)器控件，其中標簽具有基于字段輸入的動態(tài)名稱。['row_label']['value']如果從指定字段未返回任何內(nèi)容，則將使用此命令：
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' => '',
],
]
] );創(chuàng)建一個最多包含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>實戰(zhàn)：自定義圖標
<!--社交圖標，調(diào)用代碼-->
<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;
//設(shè)置節(jié)
//Lifet主題設(shè)置
//使用kirki設(shè)置框架
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主題設(shè)置', 'lifet' ),
'description' => esc_html__( '開始一段精彩時光', 'lifet' ),
) );
//添加社交圖片節(jié)
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 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 target="_blank"><strong>' . esc_html__( '查看圖標', 'lifet' ) . ' </strong></a>',
'default' => 'fa-',
),
'lifet-link' => array(
'type' => 'link',
'label' => esc_html__( '圖標鏈接', 'lifet' ),
'description' => esc_html__( '圖標對應(yīng)的鏈接', '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,
),
)
) );
