Mostrar u ocultar secciones a través del personalizador de WordPress

Seguimos avanzando en la creación de un propio tema de WordPress desde cero. En la anterior entrada https://raulperez.tieneblog.net/primeros-pasos-con-theme-customization-api-de-wordpress/, vimos como añadir una sección a través del personalizador de WordPress programando con la Theme Customization API.

Hoy vamos a ver como ofrecer al usuario la opción de mostrar u ocultar estas secciones a través del personalizador de WordPress.

Por ejemplo, vamos a suponer que queremos ofrecer al usuario la posibilidad de mostrar u ocultar la sección que añadimos en el post anterior https://raulperez.tieneblog.net/primeros-pasos-con-theme-customization-api-de-wordpress/ . Recuperamos el código

$wp_customize->add_section( 'primera_seccion' , array(
'title' => __( 'Primera Seccion', 'textdomain' ),
'panel' => 'servicios',
'priority' => 1,
'capability' => 'edit_theme_options',
));

//Campo de texto
$wp_customize->add_setting( 'campo_texto', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
));

$wp_customize->add_control('campo_texto', array(
'label' => __( 'Ejemplo input', 'textdomain' ),
'section' => 'primera_seccion',
'priority' => 1,
'type' => 'text',
));

//Campo textarea
$wp_customize->add_setting( 'campo_textarea', array(
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
));

$wp_customize->add_control('campo_textarea', array(
'label' => __( 'Ejemplo textarea', 'textdomain' ),
'section' => 'primera_seccion',
'priority' => 1,
'type' => 'textarea',
));

 

Bien, a partir de aquí vamos añadir un setting y un control.

// add the setting for the hidden primera seccion
$wp_customize->add_setting( 'mostrar-primera-seccion' );

// add the control for the hidden primera seccion
$wp_customize->add_control( 'mostrar-primera-seccion', array(
'label' => 'Mostrar la primera sección?',
'section' => 'primera_seccion',
'settings' => 'mostrar-primera-seccion',
'type' => 'radio',
'choices' => array(
'show-primera-seccion-off' => 'no',
'show-primera-seccion-on' => 'yes',
) ) );

 

Ahora añadimos una función, que va a recoger a través de get_theme_mod(), la opción que seleccione el usuario en los radio buttons., la cual devolverá show-primera-seccion-off si selecciona noshow-primera-seccion-on si selecciona yes. Y a través de de la función add_filter(), añadiremos ese valor como clase al body

function wpcustom_show_primera_seccion( $classes ) {

$show_primera_seccion = get_theme_mod( 'mostrar-primera-seccion' );
$classes[] = $show_primera_seccion;

return $classes;
}
add_filter('body_class', 'wpcustom_show_primera_seccion');

 

Para que el body pille estas clases hay que añadirle la función body_class();

<body <?php body_class(); ?>>

 

Por último creamos una clase para ocultar la sección si es que el usuario así lo ha seleccionado

body.show-primera-seccion-off  #primera_seccion{

display: none;

}

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *