Carousel Bootstrap administrable con WordPress 4.7

Cuando necesitas hacer un carousel en WordPress 4.7 que sea admistrable hay muy pocos ejemplos donde te comenten exactamente paso a paso..


Publicado: Editado: Estado:

Lo primero a tomar en cuenta antes de iniciar de lleno, es estar familiarizado con Bootstrap, además de lo básico en PHP y un poco de la estructura de Wordpress.

En la ayuda de Bootstrap y nos da un ejemplo de como construirlo el carousel (ver el enlace) sabemos que para que funcione necesita el estilo bootstrap.min.css y los script bootstrap.min.js y jquery.min.js.

politecnia

La Parte Administrable

Lo primero es crear la parte administrable del carousel.

inc/configuracion-bootstrap.php

<?php
function politecnia_customize_register($wp_customize) {
    $politecnia_themename = get_option( 'stylesheet' );
    $politecnia_themename = preg_replace("/\W/", "_", strtolower( $politecnia_themename ) );

    class Renovations_Text_Area_Control extends WP_Customize_Control {
        public $type = 'text_area';
        public function render_content() { ?>
            
                <?php echo esc_html( $this->label ); ?>
                <textarea rows="5" style="width:100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
            
        <?php }
    }

    #Opción Slider
    $wp_customize->add_panel('politecnia_slider_options', array(
        'capabitity' => 'edit_theme_options',
        'priority' => 515,
        'title' => __('Slider', 'politecnia')
    ));

    #Inicio - Opción Activar Slider
    $wp_customize->add_section('politecnia_slider_activate_section', array(
        'priority' => 1,
        'title' => __('Activate slider', 'politecnia'),
        'panel' => 'politecnia_slider_options'
    ));

    $wp_customize->add_setting($politecnia_themename.'[politecnia_activate_slider]', array(
        'default' => 0,
        'type' => 'option',
        'capability' => 'edit_theme_options',
        'sanitize_callback' => 'politecnia_checkbox_sanitize'
    ));

    $wp_customize->add_control($politecnia_themename.'[politecnia_activate_slider]', array(
        'type' => 'checkbox',
        'label' => __('Check to activate slider.', 'politecnia'),
        'section' => 'politecnia_slider_activate_section',
        'settings' => $politecnia_themename.'[politecnia_activate_slider]'
    ));
    #Fin - Opción Activar Slider

    #Inicio - Opción para subir imagenes
    #Aquí en este for se puede modificar según cuantas imagenes desea establecer en el slider
    for ( $i = 1; $i <= 5; $i++ ) {
        #Agregando a la section Slider
        $wp_customize->add_section('politecnia_slider_number_section'.$i, array(
            'priority' => 10,
            'title' => sprintf( __( 'Subida de imagen #%1$s', 'politecnia' ), $i ),
            'panel' => 'politecnia_slider_options'
        ));

        #Agregando la imagen
        $wp_customize->add_setting($politecnia_themename.'[politecnia_slider_image'.$i.']', array(
            'default' => '',
            'type' => 'option',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => 'esc_url_raw'
        ));

        $wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, $politecnia_themename.'[politecnia_slider_image'.$i.']', array(
            'label' => __( 'Subir la imagen del Slider', 'politecnia' ),
            'section' => 'politecnia_slider_number_section'.$i,
            'setting' => $politecnia_themename.'[politecnia_slider_image'.$i.']',
        )));

        #Agregando el Titulo del Slider
        $wp_customize->add_setting($politecnia_themename.'[politecnia_slider_title'.$i.']', array(
            'default' => '',
            'type' => 'option',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => 'wp_filter_nohtml_kses'
        ));

        $wp_customize->add_control($politecnia_themename.'[politecnia_slider_title'.$i.']', array(
            'label' => __( 'Introduzca el título del Slider.', 'politecnia' ),
            'section' => 'politecnia_slider_number_section'.$i,
            'setting' => $politecnia_themename.'[politecnia_slider_title'.$i.']'
        ));

        #Agregando la Descripción del Slider
        $wp_customize->add_setting($politecnia_themename.'[politecnia_slider_text'.$i.']', array(
            'default' => '',
            'type' => 'option',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => 'politecnia_text_sanitize'
        ));

        $wp_customize->add_control(new Renovations_Text_Area_Control($wp_customize, $politecnia_themename.'[politecnia_slider_text'.$i.']', array(
            'label' => __( 'Introduzca la descripción del Slider.', 'politecnia' ),
            'section' => 'politecnia_slider_number_section'.$i,
            'setting' => $politecnia_themename.'[politecnia_slider_text'.$i.']'
        )));

        #Agrendo el nombre del botón (Leer más)
        $wp_customize->add_setting($politecnia_themename.'[politecnia_slider_button_text'.$i.']', array(
            'default' => __( 'Read more', 'politecnia' ),
            'type' => 'option',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => 'wp_filter_nohtml_kses'
        ));

        $wp_customize->add_control($politecnia_themename.'[politecnia_slider_button_text'.$i.']', array(
            'label' => __( 'Introduzca el texto del botón. El valor predeterminado es "Leer más".', 'politecnia' ),
            'section' => 'politecnia_slider_number_section'.$i,
            'setting' => $politecnia_themename.'[politecnia_slider_button_text'.$i.']'
        ));

        #Agregando la url del botón
        $wp_customize->add_setting($politecnia_themename.'[politecnia_slider_link'.$i.']', array(
            'default' => '',
            'type' => 'option',
            'capability' => 'edit_theme_options',
            'sanitize_callback' => 'esc_url_raw'
        ));

        $wp_customize->add_control($politecnia_themename.'[politecnia_slider_link'.$i.']', array(
            'label' => __( 'Introduzca un enlace para redirigir el Slider cuando se haga clic.', 'politecnia' ),
            'section' => 'politecnia_slider_number_section'.$i,
            'setting' => $politecnia_themename.'[politecnia_slider_link'.$i.']'
        ));
    }
    #Fin - Opción para subir imagenes

    function politecnia_radio_select_sanitize( $input, $setting ) {
        $input = sanitize_key( $input );
        $choices = $setting->manager->get_control( $setting->id )->choices;
        return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
    }

    #Validar el tipo de dato Checkbox
    function politecnia_checkbox_sanitize($input) {
        if ( $input == 1 ) {
            return 1;
        } else {
            return '';
        }
    }

    #Validar el tipo de dato Text-area
    function politecnia_text_sanitize($input) {
        return wp_kses_post( force_balance_tags( $input ) );
    }

    #Validar el tipo de dato Color
    function politecnia_color_option_hex_sanitize($color) {
        if ($unhashed = sanitize_hex_color_no_hash($color))
            return '#' . $unhashed;

        return $color;
    }

    function politecnia_color_escaping_option_sanitize($input) {
        $input = esc_attr($input);
        return $input;
    }

    function politecnia_false_sanitize() {
        return false;
    }
}
add_action('customize_register', 'politecnia_customize_register');

La Construcción del Carousel

En archivo inc/slider-bootstrap.php es donde se construye el carousel bootstrap, si pueden observar el código se hace un for para obtener las 5 imagenes, si en la parte administrable se agregan más campos aquí se debe hacer el cambio tambien.

politecnia

Mostrar el Carousel

En el header tenemos unos if ya que si el slider no se desea mostrar en todas las páginas solamente en la principal. Además se puede cambiar a la portada estática o cualquier otro mensaje que se desee.

politecnia

Para hacer funcionar el carousel configurar y agregar las imagenes preferentemente todas del mismo tamaño

politecnia

politecnia

Adjunto la plantilla politecnia_theme e imagenes de prueba carousel-1, carousel-2, carousel-3

Bibliografía

fhttp://getbootstrap.com/javascript/#carousel

Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios

mariogarcia

(Administrador)

Intereses

música, diseño, programación, electrónica, historia, geografía

Puntos: 146 Votos: 113