Zyrex

Repetor w Customizerze WordPressa

Aby stworzyć własną kontrolkę repetora w Customizerze WordPressa, trzeba przejść kilka kroków:

1. Zarejestruj nową sekcję i ustawienie w Customizerze za pomocą funkcji add_section() i add_setting()
2. Stwórz nową klasę dziedziczącą po WP_Customize_Control, która będzie reprezentować Twoją kontrolkę repetora.
3. W tej klasie, zdefiniuj metodę render_content(), która będzie odpowiedzialna za wyświetlenie interfejsu użytkownika dla kontrolki repetora. Możesz użyć HTML i JavaScript, aby stworzyć przyciski do dodawania i usuwania elementów, listy z elementami oraz pola formularza dla każdego elementu.
4. Zarejestruj nową kontrolkę w Customizerze za pomocą funkcji add_control() i podając jako argument obiekt twojej nowej klasy.

Przykład:

class My_Customize_Repeater_Control extends WP_Customize_Control {
    public $type = 'repeater';

    public function render_content() {
        // Renderuj tutaj zawartość kontrolki, używając HTML i JavaScript
        // stwórz interfejs do dodawania i usuwania elementów,
        // wyświetl listy elementów i pól dla każdego elementu.
    }
}

add_action( 'customize_register', 'my_customize_register' );
function my_customize_register( $wp_customize ) {
    // Zarejestruj nową sekcje
    $wp_customize->add_section( 'my_section', array(
        'title'    => __( 'My Section', 'my_theme' ),
        'priority' => 120,
    ) );
    
    // Zarejestruj nowe ustawienie
    $wp_customize->add_setting( 'my_repeater', array(
        'default' => array(),
        'type'    => 'option',
        'transport' => 'refresh',
    ) );
    
    // Zarejestruj nową kontrolę repeatera
    $wp_customize->add_control( new My_Customize_Repeater_Control( $wp_customize, 'my_repeater', array(
        'label'    => __( 'My Repeater', 'my_theme' ),
        'section'  => 'my_section',
        'settings' => 'my_repeater',
    ) ) );
}

Uwaga: Przykład jest tylko ilustracyjny i nie jest kompletny, ponieważ nie zawiera kodu HTML i JavaScript potrzebnego do stworzenia interfejsu użytkownika.

Aby stworzyć interfejs użytkownika dla kontrolki repetora w Customizerze, trzeba użyć HTML i JavaScript. Poniżej przedstawiam przykład kodu, który można użyć jako punkt wyjścia:

class My_Customize_Repeater_Control extends WP_Customize_Control {
    public $type = 'repeater';

    public function render_content() {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <button class="button add-repeater-row" type="button"><?php _e( 'Add Item' ); ?></button>
        </label>
        <ul class="repeater-container"></ul>
        <input type="hidden" <?php $this->link(); ?>>
        <script>
            jQuery(document).ready(function($) {
                // Dodaj wiersz przekaźnika po kliknięciu przycisku „Dodaj element”.
                $('.add-repeater-row').on('click', function() {
                    var container = $(this).siblings('.repeater-container');
                    var index = container.children().length;
                    var template = '<li>' +
                                       '<input type="text" name="my_repeater[' + index + ']" value="">' +
                                       '<button class="button remove-repeater-row" type="button">Remove</button>' +
                                   '</li>';
                    container.append(template);
                });
                // Usuń rząd repeatera po kliknięciu przycisku „Usuń”.
                $('.repeater-container').on('click', '.remove-repeater-row', function() {
                    $(this).parent().remove();
                });
            });
        </script>
        <?php
    }
}

Kod HTML tworzy etykietę, przycisk „Dodaj element” i listę z elementami. Kod JavaScript obsługuje przycisk „Dodaj element” i „Usuń element”, dodając i usuwając elementy z listy. Wartości wprowadzone przez użytkownika są przechowywane w polu ukrytym, które jest połączone z ustawieniem Customizera za pomocą funkcji $this->link().

Uwaga: Kod powyższy jest tylko przykładem i może wymagać dostosowania do potrzeb konkretnego projektu.