Cómo conseguir pestañas en las barras laterales de WordPress

febrero 8, 2010 • Publicado en Software y Hardware
Etiquetas:

Una pregunta muy común que hacen al visitar mi página versa sobre el widget con el que logro el efecto de pestañas de la barra lateral. Supongo que la gente se acostumbró a lograr todo tipo de efectos en WordPress con los agregados, así que dan por sentado que este también es otro plugin, y hasta han llegado a revisar el código HTML de la página tratando de identificarlo. Al final siempre terminan haciendo la misma pregunta: ¿cómo lo hiciste?

Creo que es hora de dar por terminada cualquier especulación e informar a la comunidad en general que este agregado no es un plugin, y créanme que alguna vez traté de programar uno pero desistí en el intento por un problema técnico que no vale la pena especificar y que espero algún día superar. De momento aclaremos que el efecto de pestañas está dentro de la plantilla de mi tema, y el core del algoritmo usa la propiedad display de CSS.

La razón por la cual el algoritmo genera selectores de tipo pestaña es porque en las primeras versiones al solo dejar textos separados por barras muy pocos usuarios alcanzaron a entender que con aquellas palabras se visualizaban las restantes barras laterales.

Al no tratarse de un plugin la instalación es un poco tediosa. No olvide hacer una copia de seguridad del directorio de su tema por si algo sale mal.

  1. Descargue el archivo tabbed y descomprímalo dentro del directorio de su tema.
  2. Abra el archivo functions.php ubicado en el directorio del tema, y elimine cualquier llamado a la función register_sidebar.
  3. Agregue al final del mismo archivo las siguientes líneas de código
    global $sidebars;
    $sidebars = array('Inicio', 'Comentarios', 'Referencias');
    
    if ( function_exists('register_sidebars') ) {
    	for($i=0; $i<count($sidebars); $i++) {
     		register_sidebar(array('name' => $sidebars[$i]));
    	}
    }
  4. Modifique el arreglo sidebars para ajustarlo a sus requerimientos.
  5. Agregue la siguiente línea de codigo a su archivo style.css, justo después de la descripción del tema
  6. @import url("tabs.css");
  7. Modifique el archivo tabs.css según sus necesidades. No sé mucho de estilos de cascada así que en este punto no es mucho lo que puedo ayudar.

¿Alguna idea de cómo convertirlo en un plugin?

Dejar un Comentario