Widgets

Widgets

Otro de los elementos esenciales que no pueden faltar en un blog son los widgets. Para contextualizar un poco, hablamos de widget en wordpress como: una parte de wordpress que realizan funciones específicas tales como agregar contenido y estructura adicional en la barra lateral o pie de página.

En el diseño de nuestra página web, se pueden agregar tantos espacios en los que pueden alojarse estos widget como deseemos. A pesar de lo que se podría pensar, no es necesario demasiado código php para habilitarlos en nuestro theme. En éste artículo te enseñaré qué es lo que tienes que hacer para que en la plantilla wordpress que estás desarrollando puedas ubicar widget en prácticamente cualquier parte. ¿Vamos a verlo!.

¿Piensas que incluir tres espacios en los que agregar widget en el footer de tu página web es dificil?. Pues vas a ver en seguida que no.

Lo primero es lo primero. Vamos a registrar los sidebar –los lugares habilitados en nuestra web en donde será posible agregar nuestros widget– en nuestro fichero footer. Para eso comenzamos por abrir nuestro fichero functions.php. En él agregaremos el siguiente código: 

if ( !function_exists('wp5_add_footer_widget')) {
    function wp5_add_footer_widget () {
        
        register_sidebar([
			'name' => __( 'Footer Izquierda', 'wp5' ),
			'id' => 'sidebar-footer-1',
			'description' => __( 'Widget para la izquierda del footer.', 'wp5' ),
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => '</h2>',
		]);

		register_sidebar([
			'name' => __( 'Footer Centro', 'wp5' ),
			'id' => 'sidebar-footer-2',
			'description' => __( 'Widget para el centro del footer.', 'wp5' ),
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => '</h2>',
		]);

		register_sidebar([
			'name' => __( 'Footer Derecha', 'wp5' ),
			'id' => 'sidebar-footer-3',
			'description' => __( 'Widget para la derecha del footer.', 'wp5' ),
			'before_widget' => '<li id="%1$s" class="widget %2$s">',
			'after_widget'  => '</li>',
			'before_title'  => '<h2 class="widgettitle">',
			'after_title'   => '</h2>',
        ]);
        
    }

    add_action ( 'widgets_init', 'wp5_add_footer_widget' );

Creamos una función dentro de la cuál llamaremos a las funciones que provee wordpress para crear los sidebar: register_sidebar. Como ves he creado tres, y a cada uno de ellos se le pasa como argumento un array asociativo con una serie de datos que necesitarás: nombre de tu sidebar ( piensa que debe ser único ), su identificador ( único por obvias razones ), una descripción del mismo, y una serie de entrada en las que irán asociados identificadores y clases de los tag html que envuelven tanto al widget como al rótulo que lo identifica. Para más información, te recomiendo que familiarices con la consulta del codex de wordpress.

Esto ya va tomando forma. Ahora hay que escribir unas pocas líneas de código en el lugar en donde estarán emplazados estos sidebar en nuestro theme. Abrimos el fichero footer ( verás que pueden estar ubicados casi en cualquier lugar de nuestra web; ubicarlas en el pie de página es escogido sólo como ejemplo en éste artículo ).

Escribiremos las siguientes líneas de código:

<div class="row mx-auto" id="widgets-footer">
        <div class="col">
            <?php if ( !function_exists ('dynamic_sidebar') || !dynamic_sidebar ('Footer Izquierda')) ?>
        </div>
        <div class="col">
            <?php if ( !function_exists ('dynamic_sidebar') || !dynamic_sidebar ('Footer Centro')) ?>   
        </div>
        <div class="col">
            <?php if ( !function_exists ('dynamic_sidebar') || !dynamic_sidebar ('Footer Derecha')) ?>
        </div>
    </div>

Creamos tres columnas en cada una de las cuales irá un sidebar en el que se albergarán tantos widgets como queramos o necesitemos. Tan sólo hay que hacer una llamada a la función de wordpress: dynamic_sidebar ([‘nombre-sidebar’]).

¿Te ha parecido dificil?. Simplemente con ésto ya tenemos un lugar en donde alojar nuestros widgets. Personalizarlos y adaptarlos a nuestro diseño ya será tema de otra publicación en mi blog.

Como siempre, termino solicitando vuestros comentarios en mi blog, vuestros consejos, aportaciones, código alternativo y, en fin, vuestras experiencias en el desarrollo de themes wordpress.

No Comments

Post a Comment