Crear una barra lateral o sidebar en WordPress

Crear una barra lateral o sidebar en WordPress

Se le llama barra lateral o sidebar en WordPress al espacio donde es posible insertar widgets dentro de una página web. El ejemplo más habitual de esto lo encontramos en los blogs, que suelen disponer de una columna en un lado donde insertar la últimas entradas, las categorías o cualquier otra información que pueda ayudar a la navegación por el contenido.

Sin embargo, aunque a estos espacios se les llame sidebars o barras laterales, no necesariamente tienen que ir en un lateral de la web. Esto es un término que hace propio WordPress y que puede ubicarse en cualquier zona de nuestra web durante la etapa de diseño para su posterior programación.

Bien sea porque queremos hacer una modificaciones a una web ya online, bien porque queremos realizar el desarrollo de un tema de WordPress a medida, para crear un nuevo área de este tipo, debemos ir al archivo de funciones functions.php de nuestro tema activo y registrarla utilizando el siguiente código.

// Registramos dos sidebars para añadir widgets
add_action( 'widgets_init', 'theme_slug_widgets_init' );

function theme_slug_widgets_init() {
	register_sidebar( array(
		 'name' => __( 'Sidebar blog', veteasabertu ),
		 'id' => 'blog-sidebar-right',
		 'class' => 'sidebar-blog',
		 'before_widget' => '<div class="nuestra-clase">',
		 'after_widget' => '</div>',
		 'before_title' => '<h3>',
		 'after_title' => '</h3>',
	));
	register_sidebar(array(
		 'name' => __( 'Footer izquierda', veteasabertu ),
		 'id' => 'footer-sidebar-left',
		 'class' => 'sidebar-blog',
		 'before_widget' => '<div class="nuestra-clase">',
		 'after_widget' => '</div>',
		 'before_title' => '<h3>',
		 'after_title' => '</h3>',
	 ));
 }

Con el código anterior hemos habilitados dos nuevas zonas de sidebar completamente funcionales en el apartado de widgets de nuestro WordPress. El siguiente paso será imprimir la barra lateral en el lugar deseado, bien haciendo uso del archivo sidebar.php en caso que la vayamos a reutilizar en varias plantillas, bien insertando el script direcatamente en el sitio deseado. Esto ya es una cosa que dependerá del diseño a desarrollar. En cualquier caso deberíamos usar algo como lo siguiente.

if ( is_active_sidebar( 'blog-sidebar-right' ) ) :
	dynamic_sidebar( 'blog-sidebar-right' );
endif; 

Si deseas ampliar información sobre este tema puedes consultar la documentación técnica de WordPress sobre los Sidebars.

Deja una respuesta

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