WordPress sidebar, que son y como las utilizo?

noviembre 24, 2016 Post Comment Wordpress Etiquetas:

Hola amigos, hoy os traigo un pequeño tutorial para desarrollar y personalizar nuestro theme de wordpress sidebar.

WordPress Sidebar

¿Qué son y para que se utiliza las WordPress sidebar en nuestro sitio web o blog?

Una WordPress Sidebar, es un espacio que creamos en nuestro theme de WordPress para poder añadir contenido dentro. Normalmente suelen venir varias de estas WordPress sidebar y no siempre vamos a necesitar crear adicionalmente una o varias, eso será según las necesidades de la web a desarrollar.

Añadir una sidebar nueva es fácil, ahora voy a explicar el código y nombrar los archivos a editar, solo vamos a necesitar tener conocimientos básicos de la función de Windows (copiar y pegar)  8-)

wordpress sidebar

Creando una nueva sidebar en nuestro theme

Empecemos con el código, veamos los archivos a editar:

  • functions.php
  • header.php (NOTA: En nuestro caso, editaremos este archivo en el theme de WordPress Sixteen, en tu caso edita el archivo donde quieras añadir tu WordPress sidebar)

Vamos a nuestro panel de WordPress y hacemos clic en “Apariencia>Editor”. Esto nos llevará a nuestros ficheros del tema activo en nuestro WordPress para poder editarlos. En la parte derecha, buscaremos el archivo functions.php haz clic en el. Ya lo tendremos cargado para poder editarlo.

Explicación del código de WordPress sidebar

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Mi primera WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
?>
  • Primera línea, le decimos a WordPress, que empieza el código PHP.
  • Segunda línea, ponemos un IF para comprobar que exista la función de sidebars dinámicas.
  • Tercera línea, definimos el valor de registrar una nueva sidebar.
  • Cuarta línea, definimos el nombre de nuestra sidebar. Para luego localizarla en la sección Widgets y poder saber cual es. También para saber y declarar el código de la página donde incluyamos la sidebar.
  • Quinta, sexta y séptima línea, añadimos el código de lo que se va a mostrar. Para ello usamos las variables “before_widget” y “after_widget“. Indicarán el código que se añadirá antes y después de cada widget. “before_title” y “after_title“, indicarán el código que se mostrará antes y después del título del widget.
  • Octava línea cerramos la función de registrar la nueva sidebar.
  • Novena línea, cerramos el código PHP.

Añadir una nueva WordPress sidebar

Bien, ya tenemos el código para introducir en nuestro archivo fucntions.php. Simplemente copia y pega el código de arriba y pegalo en el archivo functions.php y guarda los cambios.

NOTA: Recuerda editar la cuarta línea y poner el nombre que quieres para tu sidebar. En caso de no hacerlo, por defecto la sidebar se llamará: Mi primera sidebar.

Con esto ya hemos conseguido incluir una nueva sidebar en la sección de Widgets. Para comprobar que todo está bien, vamos hacer clic con el botón derecho en el menú de WordPress. En la sección “Apariencia>Widgets”, comprobamos que la nueva sidebar “Mi primera WordPress sidebar“. (O el nombre que hayas puesto), aparece y podemos incluir widgets dentro de la sidebar.

Añadir dos o mas WordPress sidebar

En el caso, que necesites crear mas de una WordPress sidebar en tu sitio web. Simplemente copia y pega el código que verás mas abajo en tu archivo functions.php. Edita la línea cuarta de cada barra que vayas a añadir, para cambiar el nombre de la sidebar.

Luego comprueba que las sidebars aparecen en la sección Widgets.

Ejemplo de dos WordPress sidebar en el archivo functions.php

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Mi primera WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'Mi segunda WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
?>

Ejemplo de tres WordPress sidebar en el archivo functions.php

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Mi primera WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'Mi segunda WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
register_sidebar(array(
'name' => 'Mi tercera WordPress sidebar',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '',
'after_title' => '',
));
?>

Mostrar mi nueva WordPress sidebar

Vale, ya tenemos nuestra o nuestras sidebar creadas. Una vez hemos comprobado que aparecen en la sección Widgets y podemos añadir widgets dentro de nuestra/s sidebar. Vamos a necesitar añadir el siguiente código donde queramos que aparezcan nuestras nuevas sidebar.

NOTA: Siguiendo el ejemplo que estoy utilizando en este articulo. Vamos a añadir el siguiente código, en el archivo header.php. Del theme de WordPress “Sixteen”. Si estás siguiendo el tutorial directamente en tu theme. Busca el archivo donde quieres añadir tu nueva sidebar o sidebars. Añade el código que verás después de la búsqueda y haz caso omiso a la siguiente instrucción.

Buscamos las siguientes líneas:

[...]
</nav><!-- .main-navigation -->
<?php endif; ?>

<?php if ( has_nav_menu( 'social' ) ) : ?>
[...]

Entre las líneas mencionadas arriba, verás que hay una línea en blanco. Ahí es donde vamos a añadir nuestra primera sidebar. Con el siguiente código, copia y pega! ;-)

NOTA: Deberás buscar donde añadir las sidebar que vayas a crear con el siguiente código. Editando siempre el nombre para cada sidebar a añadir.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Mi primera WordPress sidebar') ) : ?>
<?php endif; ?>

Terminando de configurar nuestras WordPress sidebar

Con esto ya hemos conseguido que “Mi primera WordPress sidebar” aparezca. En este ejemplo, como ya he mencionado al principio del articulo, es para el theme de WordPress, Sixteen. En el ejemplo de arriba, el mejor contenido para añadir en “Mi primera WordPress sidebar” sería un widget de idiomas. Como el qtranslator-x por ejemplo. Ya que la sidebar aparecerá al lado del menú. El contenido de las siguientes sidebar, bien puede ser un bloque de anuncios o si tu theme no incluye sidebar en el footer, puedes crear tus propias sidebar y hacer tu footer más útil.

Para las siguientes sidebar creadas, deberás incluir el código de arriba cambiando el nombre en: […]!dynamic_sidebar(‘Mi primera WordPress sidebar’)[…] por el nombre de la sidebar que hayas creado en el archivo functions.php.

Espero que este artículo te haya ayudado, siéntete libre de comentar o preguntar!