Banyak Input dalam Kontrol Penyesuai

Katakanlah saya memiliki kontrol khusus tunggal, tetapi kontrol ini memiliki 2 input yang memerlukan penyimpanan, misalnya:

• Jenis dan nilai mata uang
• Ukuran dan satuan pengukuran
• Nama pertama dan terakhir
• Teks dan gaya
• Gambar dan ukuran gambar
• Keluarga font & berat font

Bagaimana saya melakukannya? Saya melihat ada opsi pengaturan ketika membuat kontrol, tetapi tidak ada dokumentasi untuk menyarankan bagaimana itu digunakan, dan satu-satunya contoh yang dilakukan di alam bebas adalah Easy Google Fonts, yang tidak memiliki penjelasan tentang bagaimana hal itu dilakukan, dan sulit dibaca. Apakah mungkin untuk membuat sarang kontrol dan bagian?

Sejauh ini, semua tutorial dan dokumentasi yang saya temukan membahas tentang kontrol dengan satu input html, tidak ada yang menyebutkan kontrol yang memiliki banyak input / pengaturan, meskipun disarankan oleh API.

Plugin ini menunjukkan cara melakukannya. Dari catatan, langkah-langkah yang terlibat adalah:

• Daftarkan setiap pengaturan untuk memperbarui / mengubah
• Saat membuat kontrol, berikan array sebagai argumen pengaturan
• Saat memberikan input, masukkan kunci pengaturan untuk menautkan dan memberi nilai
• Kunci pengaturan bukan nama pengaturan, tetapi indeks array, misalnya 0, 1, 2
• Akses pengaturan yang terdaftar ke kontrol melalui $this->settings

Berikut kodenya:

<?php
/*
Plugin Name: TJN Typography Control Demo
Author: Tom J Nowell
Version: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

add_action( 'customize_register', 'tjn_customize_register' );
function tjn_customize_register( $wp_customize ) {
    if ( ! isset( $wp_customize ) ) {
        return;
    }
    if ( class_exists( 'WP_Customize_Control' ) ) {

        class Toms_Control_Builder extends WP_Customize_Control {

            public $html = array();

            public function build_field_html( $key, $setting ) {
                $value = '';
                if ( isset( $this->settings[ $key ] ) )
                    $value = $this->settings[ $key ]->value();
                $this->html[] = '<div><input type="text" value="'.$value.'" '.$this->get_link( $key ).' /></div>';
            }

            public function render_content() {
                $output =  '<label>' . $this->label .'</label>';
                echo $output;
                foreach( $this->settings as $key => $value ) {
                    $this->build_field_html( $key, $value );
                }
                echo implode( '', $this->html );
            }

        }

        $section = new TJN_Customizer_Section( $wp_customize, 'test', 'Test', 11 );
        $field = new TJN_Customizer_Field( 'testfield','','Test Control' );
        $field->add_to_section( $wp_customize, $section );
    }
}


class TJN_Customizer_Section {
    public $name='';
    public $pretty_name='';
    public function __construct( WP_Customize_Manager $wp_customize, $name, $pretty_name, $priority=25 ) {
        $this->name = $name;
        $this->pretty_name = $pretty_name;

        $wp_customize->add_section( $this->getName(), array(
            'title'          => $pretty_name,
            'priority'       => $priority,
            'transport'      => 'refresh'
        ) );
    }

    public function getName() {
        return $this->name;
    }
    public function getPrettyName() {
        return $this->pretty_name;
    }
}

class TJN_Customizer_Field {

    private $name;
    private $default;
    private $pretty_name;

    public function __construct( $name, $default, $pretty_name ) {
        $this->name = $name;
        $this->default = $default;
        $this->pretty_name = $pretty_name;
    }

    public function add_to_section( WP_Customize_Manager $wp_customize, TJN_Customizer_Section $section ) {

        $wp_customize->add_setting( $this->name, array(
            'default'        => $this->default,
            'type'           => 'theme_mod',
            'capability'     => 'edit_theme_options'
        ) );
        $wp_customize->add_setting( 'moomins', array(
            'default'        => $this->default,
            'type'           => 'theme_mod',
            'capability'     => 'edit_theme_options'
        ) );
        $wp_customize->add_setting( 'papa', array(
            'default'        => $this->default,
            'type'           => 'theme_mod',
            'capability'     => 'edit_theme_options'
        ) );

        $control = new Toms_Control_Builder(
            $wp_customize, $this->name, array(
            'label'    => $this->pretty_name,
            'section'  => $section->getName(),
            'settings'   => array (
                $this->name,
                'moomins',
                'papa'
            )
        ) );

        $wp_customize->add_control( $control );
    }
}