Si te gusta el sistema de pestañas que cada vez se ve mas en blogs (aquí mismo) aquí tienes el proceso completo para adaptar tu plantilla a este sistema que te permite aunar en poco espacio mucho contenido, de modo ordenado y visualmente muy atractivo.

tabs-ayudawp.png

Para conseguirlo necesitas utilizar un script, y el mas sencillo de implantar es DomTABs que, acompañado de una hoja de estilo, te ayudará a tener este sistema en tu blog.

  1. Descarga el script del sitio oficial o de este otro enlace y descomprímelo en tu ordenador
  2. Sube el fichero domtab.js a la carpeta de tu plantilla de Wordpress.
  3. Descarga la hoja de estilo pbd_domtab_css.zip (clic derecho -> Guardar enlace como) y súbelo también a la carpeta de tu plantilla.
  4. En el archivo header.php de tu plantilla copia el siguiente código antes de la etiqueta </head> :
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />
  5. En el archivo sidebar.php de tu plantilla, o en un widget si los usas, pega el siguiente cóidigo donde quieras que se muestren las pestañas de DomTABs:
    <div class="domtab"> <ul class="domtabs">
    <li><a href="?phpMyAdmin=3e6c4943d9a6t7c8283c#t1“>Nombre para Tab 1</a></li>
    <li><a href=”?phpMyAdmin=3e6c4943d9a6t7c8283c#t2″>Nombre para Tab 2</a></li>
    <li><a href="#t3">Nombre para Tab 3</a></li>
    </ul><div> <a name="t1" id="t1“></a>
    <p>Inserta el contenido de la primera tab aqui, p.ej. el código de un plugin.</p></div>
    <div><a name=”t2″ id=”t2“></a>
    <p>Inserta el contenido de la segunda tab aqui.</p></div>
    <div><a name=”t3″ id=”t3“>
    </a><p>Inserta el contenido de la tercera tab aquí.</p>
    </div> </div>
    

Y ya lo tienes. De hecho puedes añadir mas pestañas solo copiando una línea mas en cada una de las secciones y cambiando la referencia (p.ej. de t3 a t4 y así consecutivamente).

También puedes personalizar los colores y aspecto editando la hoja de estilo, el fichero pbd_domtab.css. Las líneas a cambiar están explicadas al principio del fichero.

También se pueden implantar un sistema de pestañas con otro script, idTabs, que requiere de la instalación de jQuery. Otro día hablamos de el.

Vía | Pro Blog Design

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    19 comentarios en “Como instalar DomTABs en Wordpress”

  1. Jack The Ripper (78 comentarios) dijo:

    Lo único por el que no he puesto esta pestaña es porque no es bueno para google, al ser un script no puede seguir las pestañas.

    ¿Es correcto?

  2. Luis (19 comentarios) dijo:

    Wow que gran post, esta genial ahora si que de ser cierto lo que dice jack the ripper seria el unico pero a este script

  3. Dr. Blog (24 comentarios) dijo:

    Es posible Jack, pero ¿para que quieres que Google indexe contenidos que YA tienes en otros sitios?. A fin de cuentas el sidebar es una ayuda de navegación por contenidos “existentes” ;)

  4. Andrés (20 comentarios) dijo:

    Maldito. Ahora publicas este post… luego de que me pase todo el fin de semana, con noches incluidas tratando de saber sobre esta función y como aplicarla a mi blog.
    ;)

  5. Fernando Tellado (1845 comentarios) dijo:

    Andrés, no soy adivino … aún :D

    La verdad es que lo tenía programado para la semana que viene pero adelanté la publicación por el interés que hay en estas cosas.

    Por cierto ¿lo conseguiste poner en el blog al final?

  6. Andrés (20 comentarios) dijo:

    Coloqué otra aplicación: Fun with Sidebar Tabs, la puedes ver en mi blog. Esta sin embargo no se personaliza. La que muestras aquí me gusta más.
    Para la mía incluso tuve que optimizar la plantilla para adaptarla al uso de widgets.
    Acá como hice esto ultimo:
    http://www.bitacoravirtual.cl/2008/03/24/actualizando-la-plantilla-para-el-uso-de-widgets/

  7. Sergio (19 comentarios) dijo:

    Hola, ando tratando e instalarlo pero no me acaba de ir bien, tengo este theme y por lo que parece ya viene algo con el jquery, pero no logro hacerlo ir, ni con el por defecto ni con el vuestro :\

  8. eperezchica (3 comentarios) dijo:

    Está roto el enlace a pbd_domtab.css

  9. Fernando Tellado (1845 comentarios) dijo:

    eperezchica, acabo de bajarlo y va bien :roll:

  10. JhonSmith (3 comentarios) dijo:

    el enlace del CSS no funciona…

    solucionenlo porfaaa

    BUENO ENCONTRE EL ERROR!

    en el enlaces esta escrito hacia
    http://ayudawordpress.com/descargas/domtabs/pbd_domtabs.css
    y el archivo esta en
    http://ayudawordpress.com/descargas/domtabs/pbd_domta.css

    LISTO gracias por el tutorial

  11. Fernando Tellado (1845 comentarios) dijo:

    Pues no, te aseguro y prometo que está donde he puesto yo :D

  12. Janzo (3 comentarios) dijo:

    Estoy intentando implementarlo en mi blog, tiene muy buena pinta.
    Por cierto que en el enlace al fichero css se te ha colado una s y no se encuentra el fichero, de suerte que se me ha ocurrido probar sin la s :D
    http://ayudawordpress.com/descargas/domtabs/pbd_domtab.css

    Saludos!

  13. Janzo (3 comentarios) dijo:

    .

  14. Janzo (3 comentarios) dijo:

    Mmmm… nada más me muestra enlaces o texto simple si pongo algún script o código de wordpress (por ejemplo para mostrar el tagcloud) no me aparece nada.

  15. Wordpressionado (6 comentarios) dijo:

    A mi tampoco me va, es más, se me cambia toda la estructura del blog, se me va todoa la derecha, a la barra, las categorías, el adsense..,sólo me sale una línea: tab 3 o algo así, pero no hace nada. Yo uso el tema unstandard que modificó Fernando.

  16. di3 (1 comentarios) dijo:

    idem a Wordpressionado…
    me pasa lo mismo, me encantaria pero no puedo.

    pregunto, si tal vez es por donde se pongan los files?
    seria bueno un tutorial.

    gracias =)

  17. Perro Callejero (40 comentarios) dijo:

    Me encantaron las tabs, y creo que las voy a usar en el Perro Callejero, ahorran mucho espacio, algo muy bueno en los sidebars de estos días.

    Por cierto, el truco para que funcionen es muy simple: respetar la estructura del contenido que se muestra en el ejemplo.

  18. Cesar (29 comentarios) dijo:

    Me pasa como a los que comentaron antes, segui el ejemplo al pie, epro al agregar el código a la sidebar se desarme todo el theme…. me voy para el foro

  19. Cesar (29 comentarios) dijo:

    Disculpas pero se me vencio el tiempo de edicion, por eso el doble comentario. Ya logre hacer andar las dichosas tabs.

    Porque no me andaba? en primer lugar malinterpreté el lugar al cual subir los archivos, “la carpeta de tu plantilla de Wordpress” se refiere a la carpeta de tu theme activado en tu blog (no a donde se encuentra la instalacion de wordpress, como hice yo :p )

    2do al no andar el enlace del .css subia la que viene en el .zip de domtab (obviamente modificaba la llamada antes del header, en vez de pdb_domtab.css ponia domtab.css ) pero lo mismo no funcionaba y se me desarmaba por completo el blog.
    Pueden bajarse la correcta hoja de estilo desde http://www.problogdesign.com/uploads/pbd_domtab.css

    Después ya funciono correctamente :)

Escribe un Comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Subir

Expertos en WordPress
Euribor
Hardware. Software. Ocio & Multimedia. Humor. Internet. Videojuegos.Noticias
Participa en el Debate
  • Jh®: Windows Live Writer… ese es el que uso!
  • Dark_Tairon: espero con ansias que digas que tal funcion para actulizar mi instalacion, por...
  • lander: tengo un problema , luego de instalar el plug in en wp y configurar las opciones de las...
  • Hades87: @ferticidio pero le peudes deshabilitar el estilo desde el mismo WLW y se e bien, yo es...
  • ferticidio: WLW usaba en el antiguo theme, ahora como no me carga bien el estilo, y no puedo ver...
Noticias Breves
  • Si quieres aprender como hacer multitud de diseños distintos para WordPress no te pierdas esta estupenda recopilación de 26 tutoriales de diseño de blogs WordPress.

    [#3]

  • Acaba de salir a la luz la nueva versión de WordPress para iPhone 1.3, con soporte completo para el firmware de iPhone 3.0. Va de cojones estupendamente. Altamente recomendable esta actualización, que tienes en iTunes.

    [#1]

  • Me avisa Kike Alonso de un nuevo plugin que permite que los comentarios que dejen tus amigos de Friendfeed al respecto de un post de tu sitio WordPress aparezcan también en tu post como comentarios normales, algo realmente interesante pues permite, con algunos clientes de escritorio e iPhone, comentar en blogs sin dejar de usar la aplicación de mensajería.

    [#6]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H