Coding | Customizer-API | Plugin_API

WordPress Customizer: Selective Refresh für eigene Felder aktivieren

fountain 1937384 1920

Wenn Du schon mal die Gelegenheit hattest, das Theme “Twentyseventeen” zu testen, das mit der WordPress-Version 4.7 im Dezember 2016 mitkam (nur bei neuen Installationen, nicht nach Updates), dann fielen Dir vielleicht die kleinen Edit-Buttons an manchen Stellen im Theme-Bereich auf, wenn der Customizer aktiv ist.

partial refresh

Klickt man auf so einen Button, gelangt man im Customizer direkt zu dem Feld, an dem der Inhalt bearbeitet werden kann. Möchste man, dass Widgets auf diese Weise schnell bearbeitet werden können, muss ein Theme dieses Feature unterstützen. Im Theme-Setups dafür mit
add_theme_support( 'customize-selective-refresh-widgets' );
aktivieren.

Ein Klick auf den Edit-Button öffnet den Bereich des Customizers in dem das Feld bearbeitet werden kann, und setzt auch gleich den Fokus darauf.

Auch eigene Felder lassen sich mit diesem Feature ausstatten. Wie das geht, zeigt das Snippet.

add_action( 'customize_register', 'flxm_customizer_setsections' );
function flxm_customizer_setsections( $wp_customize ) {

    $wp_customize->add_setting( 'bottom_info_text', array(
          'capability'  => 'edit_theme_options',
          'default'     => __( 'powered by WordPress', 'theme-texdomain' ),
          'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'bottom_info_text', array(
         'type'     => 'text',
         'section' => 'custom_section', // custom or default section
         'label'     => __( 'Footer Credits', 'theme-texdomain' ),
         'description' => __( 'Footer credits and site info', 'theme-texdomain' ),
    ) );

    $wp_customize->selective_refresh->add_partial( 'bottom_info_text', array(
	'selector'  => '#site-info', /* HTML Element with text inside */
	'render_callback' => 'flxm_bottom_info_text'
    ) );
}

Callback-Function, get the settings field

function flxm_bottom_info_text() {
	get_theme_mod( 'bottom_info_text' ); /* Name of the option to edit */
}

weiter schmökern