Crear un Sidebar en WordPress

¿Qués es un 'Sidebar'? Es un área predefinida en nuestra plantilla o template de WordPress que contiene diferentes Widgets.

Podemos crear tantos Sidebars como requiera nuestra página. Supongamos que está compuesta por:

  • Cabecera
  • Contenido
  • Columna lateral
  • Pié de página

Vamos a crear un Sidebar en la columna lateral de nuestra página. Abrimos el archivo 'functions.php' y añadimos las siguientes líneas de código:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' => 'Mi Sidebar',
'id' => 'mi-sidebar',
'before_widget' => '<div id="widget" class="widget">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}

'name': es el nombre que le damos a nuestro Sidebar para identificarlo en el panel de administración de 'Widgets'.

'id': es el nombre identificador de nuestro sidebar y el cual necesitaremos para añadirlo en nuestra plantilla.

before_wideget y after_widget: define las etiquetas de apertura y cierre que separan los distintos Widgets dentro de nuestro Sidebar.

before_title y after_title: define las etiquetas de apertura y cierre que separa el título y el contenido de cada Widget.

Al acceder a 'Widgets' en el panel de administración de tu WordPress, verás tu nuevo Sidebar, donde podrás añadir diferentes Widgets con tan sólo arrástralos:

neo 2.0 - Crear un Sidebar en WordPress

Por último, abrimos el archivo 'sidebar.php' y pegamos la siguiente línea de código para mostrar nuestro Sidebar y sus Widgets en la columna lateral de nuestra página:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mi-sidebar') ) : ?><?php endif; ?>

Si quisiéramos añadir nuestro Sidebar a la cabecera o pié de página, tendríamos que editar los archivos 'header.php' (cabecera) o 'footer.php' (pie de página).

Comentarios

Anónimo ha dicho que…
Dios!
He andado todo el internet en búsqueda de esto !
Gracias!
jiestevez ha dicho que…
Gracias, me alegra saber que te ha servido de ayuda. Un saludo.
MIGUEL ha dicho que…
hola juan, y si lo quiero colocar a la izquierda
jiestevez ha dicho que…
Hola Miguel; la posición del sidebar vendrá definida en tu plantilla o template.

Si en tu plantilla está definido para que aparezcan los distintos widgets de un sidebar en una columna en el lateral derecho (como en este blog), deberás editarla para que aparezca en el lado izquierdo; para lo cual tendrás que modificar los archivos .php y la hoja de estilos CSS.
Oscar Félix Limas ha dicho que…
Hola, las líneas de código agregadas en functions.php exactamente en qué ubicación del documento debo agregarlas? Al final?
jiestevez ha dicho que…
Hola Oscar; puedes colocarlo donde creas más conveniente... aunque normalmente suele estar definido justo después de "Default Main Nav Function".

Saludos.
Anónimo ha dicho que…
Hola, donde debo colocar el codigo en sidebar.php? gracias
jiestevez ha dicho que…
Hola; coloca el código justo al principio del archivo sidebar.php.

Yo suelo utilizar esta plantilla como base http://goo.gl/SZuV4f para crear mis propias plantillas. Puedes fijarte en cómo están estructurados los diferentes archivos. Espero que te sirva.

Saludos.

Entradas populares de este blog

Enlaces tipo ancla con desplazamiento animado con jQuery