Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Como hacer un sidebar de WordPress personalizado

Estas en el tema de Como hacer un sidebar de WordPress personalizado en el foro de WordPress en Foros del Web. Tutorial para crear tu propio sidebar WordPress, crea un sidebar personalizado, para poder integrarlo en header, footer o cualquier lugar de tu WordPress, dándole formato ...
  #1 (permalink)  
Antiguo 10/05/2013, 15:27
 
Fecha de Ingreso: mayo-2013
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 6 años, 3 meses
Puntos: 2
Información Como hacer un sidebar de WordPress personalizado

Tutorial para crear tu propio sidebar WordPress, crea un sidebar personalizado, para poder integrarlo en header, footer o cualquier lugar de tu WordPress, dándole formato mediante CSS y pudiendo añadir Widgets desde tu panel de control.

Como crear tu propio sidebar WordPress personalizado?, Hace poco me encontré con la necesidad de tener que crear un sidebar personalizado para un cliente, en concreto necesitaba un lugar debajo de un slider donde poder colocar 5 campos personalizados, una forma de hacerlo era simplemente colocando un nuevo div con los 5 campos, pero el cliente no iba a tocar el código HTML así que la solución perfecta era configurarle un sidebar desde donde el pudiera modificar, añadir y eliminar campos desde su propio panel de control. Busqué tutoriales sobre el tema, pero ninguno daba con la solución completa, así que me decidí a hacerlo desde “0″, aquí os lo dejo paso a paso. Espero que lo disfrutéis!.

PASO 1:
Abrimos el archivo “functions.php”, es el lugar donde vamos a definir nuestro sidebar, para ello tenemos que incluir el siguiente código.

Código PHP:
Ver original
  1. /** Sidebar personalizada SIDEBAR PERSONALIZADO */
  2. if(function_exists('register_sidebar')){
  3.     register_sidebar(array(
  4.         'name' => 'Detalles_vuelo',
  5.         'before_widget' => '<div class="clase_personalizada">',
  6.         'after_widget' => '</div>',
  7.         'before_title' => '<h7>',
  8.         'after_title' => '</h7>',
  9.     ));
  10. }

Definimos el campo name, con el nombre que le queramos dar a nuestro nuevo sidebar, será el nombre que veremos aparecer junto a nuestros otros sidebar

Definimos before widget, con la que va a ser el aspecto de nuestro sidebar, en este caso la definimos con una clase personalizada llamada clase_personalizada, en el caso de que queráis utilizar la clase por defecto que viene en vuestro theme tenéis que poner en el campo

Código PHP:
Ver original
  1. "widget %1$s"
El campo after_widget, se deja tal y como está para dar paso a diferentes widgets que queramos ir añadiendo.

El campo before_title, es como podéis ver el formato que le queremos dar a nuestro titulo en el widget y lo mismo con after_title.

PASO 2:
Creamos un nuevo archivo php, en este caso podemos llamarlo sidebar_personalizado.php, y tan solo tenemos que colocar este código y guardarlo.

Código PHP:
Ver original
  1. <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Detalles_vuelo') ) : ?> <?php endif; ?>;


PASO 3:
Creamos nuestra clase personalizada en la hoja de estilos que por defecto utilice nuestro theme, casi siempre es style.css, y sobre todo darle el mismo nombre que va el código del paso 1.

Código HTML:
Ver original
  1. <div class="clase_personalizada"></div>
Aprovechamos también para crear nuestro div personalizado, que es donde irá nuestro sidebar wordpress.

Guardamos todo en el servidor y ya lo tenemos casi listo para poder implementar nuestro sidebar wordpress personalizado.

PASO 4:
Por último buscamos el archivo PHP donde queramos alojar nuestro nuevo sidebar, nuestro nuevo sidebar puede ser horizontal horizontal o vertical, cuando tengamos localizado el lugar colocamos el siguiente código.

Código HTML:
Ver original
  1. <div id="detalles-vuelo"><?php get_sidebar('personalizado') ?></div>

El código get_sidebar iría dentro de nuestro div personalizado y veréis que “personalizado” es la llamada a nuestro archivo que hemos creado en el paso 2, y que hemos llamado sidebar_personalizado.

Y ya está, a disfrutar experimentando ya que esta forma de personalizar nuestro WordPress nos va a dar un montón de alas para hacer aún más dinámico y personalizable.

Podéis ver el tutorial original en mi web //"http://morrisongarden.com/sidebar-wordpress-personalizado/

Última edición por morrisongarden; 10/05/2013 a las 15:30 Razón: modificar url

Etiquetas: sidebar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 4 personas




La zona horaria es GMT -6. Ahora son las 14:20.