web-dev-qa-db-fra.com

Entrées multiples dans un contrôle Customizer

Disons que j’ai un seul contrôle personnalisé, mais que ce contrôle a 2 entrées qui nécessitent une sauvegarde, par exemple:

  • Type et valeur de la monnaie
  • Taille et unité de mesure
  • Nom et prénom
  • Texte et style
  • Image et taille de l'image
  • Famille de police et poids de la police

Comment pourrais-je le faire? Je vois qu’il existe une option de configuration lors de la création d’un contrôle, mais aucune documentation n’indique comment il est utilisé, et le seul exemple en cours de réalisation dans la nature est Easy Google Fonts, qui n’explique pas comment, et est difficile à lire. Est-il possible d'imbriquer des contrôles et des sections?

Jusqu'à présent, tous les tutoriels et la documentation que j'ai trouvés parlent d'un contrôle avec une seule entrée html, aucun ne mentionne les contrôles qui ont plusieurs entrées/paramètres, bien que cela ait été suggéré par l'API.

customization
14
Tom J Nowell

Ce plugin montre comment faire. À noter, les étapes impliquées sont:

  • Enregistrez chaque réglage pour mettre à jour/changer
  • Lors de la création du contrôle, passez un tableau comme argument de paramètre.
  • Lors du rendu des entrées, passez la clé de paramètres pour lier et valeur
  • La clé settings n'est pas le nom du paramètre, mais les indices du tableau, par exemple. 0, 1, 2
  • Accédez aux paramètres enregistrés dans une commande via $this->settings

Voici le code:

<?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 );
    }
}
15
Tom J Nowell