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).

8 comentarios:

  1. Dios!
    He andado todo el internet en búsqueda de esto !
    Gracias!

    ResponderEliminar
    Respuestas
    1. Gracias, me alegra saber que te ha servido de ayuda. Un saludo.

      Eliminar
  2. hola juan, y si lo quiero colocar a la izquierda

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  3. Hola, las líneas de código agregadas en functions.php exactamente en qué ubicación del documento debo agregarlas? Al final?

    ResponderEliminar
    Respuestas
    1. Hola Oscar; puedes colocarlo donde creas más conveniente... aunque normalmente suele estar definido justo después de "Default Main Nav Function".

      Saludos.

      Eliminar
  4. Hola, donde debo colocar el codigo en sidebar.php? gracias

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?