¿Cómo implemento la actualización selectiva con una configuración del personalizador?

Navega tus respuestas
10

Tengo una sección en una plantilla de página en el tema que estoy creando que muestra el contenido en función de una página que el usuario selecciona en el personalizador mediante el control desplegable de páginas. En este momento solo está usando el transporte de actualización predeterminado estándar, pero dado que eso es una especie de recarga de todo el iframe, me preguntaba si era posible usar la nueva función de actualización selectiva. Pero no estoy seguro de cómo implementarlo. Alguien sabe si esto es posible y si es así, ¿cómo hacerlo?

Aquí está el código en la plantilla de mi página que muestra el contenido: 

<?php if ((get_theme_mod( 'intro_page' )) != '') {

$intro_id = get_theme_mod( 'intro_page' );

$intro_header = get_the_title( $intro_id );

$intro_excerpt = get_the_excerpt( $intro_id );

$intro_link = get_the_permalink( $intro_id );

$intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

echo '<h1>' . esc_html($intro_header) . '</h1>' . '<p>' . esc_html($intro_excerpt) . '</p>';

if( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">Learn More</a></p>';
}else{
echo '<p><a class="cta" href="' . esc_url($intro_link) . '">' . esc_html($intro_linktext) . '</a></p>';
}
} ?>

Aquí está el código para la configuración en el personalizador: 

$wp_customize->add_setting( 'intro_page' , array(
'sanitize_callback' => 'absint',
) );

$wp_customize->add_control( 'intro_page', array(
'label'    => __( 'Page to use for intro section', 'veritas' ), 
'section'  => 'intro',
'settings' => 'intro_page',
'type'     => 'dropdown-pages',
'priority' => 1
) );
    
pregunta jetyet47 24.11.2016 - 00:00

1 respuesta

9

Cree una función para generar el código de plantilla actualizado de forma selectiva

(Envolví el código HTML dentro de <div class="cta-wrap"> para que sea más fácil orientar este bloque de marcado en particular) 

function wpse247234_cta_block() {
    if ( ( get_theme_mod( 'intro_page' ) ) != '' ) {
        $intro_id       = get_theme_mod( 'intro_page' );
        $intro_header   = get_the_title( $intro_id );
        $intro_excerpt  = get_the_excerpt( $intro_id );
        $intro_link     = get_the_permalink( $intro_id );
        $intro_linktext = get_post_meta( $intro_id, 'emm_cta_text', true );

        echo '<div class="cta-wrap">';
            echo '<h1>' . esc_html( $intro_header ) . '</h1>' . '<p>' . esc_html( $intro_excerpt ) . '</p>';

            if ( ! get_post_meta( $intro_id, 'emm_cta_text', true ) ) {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">Learn More</a></p>';
            } else {
                echo '<p><a class="cta" href="' . esc_url( $intro_link ) . '">' . esc_html( $intro_linktext ) . '</a></p>';
            }
        echo '</div>';
    }
}

Actualice su plantilla con una llamada a la función que acaba de crear: 

wpse247234_cta_block();

Configurar el personalizador 

function wpse247234_customize_register( $wp_customize ) {

    $wp_customize->add_section( 'intro', array (
            'title'    => __( 'intro', 'text-domain' ),
            'priority' => 999,
    ) );

    $wp_customize->add_setting( 'intro_page' , array(
            'sanitize_callback' => 'absint',
            'transport' => 'postMessage'
    ) );

    $wp_customize->add_control( 'intro_page', array(
            'label'    => __( 'Page to use for intro section', 'text-domain' ), 
            'section'  => 'intro',
            'settings' => 'intro_page',
            'type'     => 'dropdown-pages',
            'priority' => 1
    ) );

    $wp_customize->selective_refresh->add_partial( 'intro_page', array(
        'selector'            => '.cta-wrap',
        'container_inclusive' => true,
        'render_callback'     => 'wpse247234_cta_block',
        'fallback_refresh'    => false, // Prevents refresh loop when document does not contain .cta-wrap selector. This should be fixed in WP 4.7.
    ) );
}
add_action( 'customize_register', 'wpse247234_customize_register' );

Estilizando el elemento a medida que se actualiza

Mientras el parcial se está actualizando, al elemento afectado se le agregará la clase customize-partial-refreshing . Puedes personalizarlo así: 

.cta-wrap.customize-partial-refreshing {
    // styles...
}

Enlaces útiles

respondido por el Dave Romsey 24.11.2016 - 06:07

Lea otras preguntas en las etiquetas

Carpeta de cargas de limpieza, estructura de base de datos de la biblioteca Cómo deshabilitar TinyMCE para que no elimine las etiquetas span