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 no y show-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;
}