Como instalar DomTABs en WordPress

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><span class="removed_link" title="”?phpMyAdmin=3e6c4943d9a6t7c8283c#t2″">Nombre para Tab 2</span></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

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(0 votos, promedio: 0)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

22 comentarios en “Como instalar DomTABs en WordPress”

  1. 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» 😉

  2. 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.
    😉

  3. Andrés, no soy adivino … aún 😀

    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?

  4. 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 :

  5. el enlace del CSS no funciona…

    solucionenlo porfaaa

    BUENO ENCONTRE EL ERROR!

    en el enlaces esta escrito hacia

    y el archivo esta en

    LISTO gracias por el tutorial

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

  7. Wordpressionado

    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.

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

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

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

  11. 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 🙂

  12. Hola Fernando

    En las líneas 2 y 3 del código de tu post, me aparece al verlo en mi navegador, dentro de los href, un trozo que dice "phpMyAdmin=3e6c4943d9a6t7c8283c".

    Otra cosa, he encontrado otro plugin similar en jQuery que se llama idTabs, lo podeis ver en http://www.sunsean.com/idTabs/. No sé cuál es la diferencia, cuál es mejor…

    1. Perdona Fernando que haga dos comentarios seguidos, soy un poco atolondrado 🙂 En Support de WodPress he visto comentado un bug de DOMTab y su posible solución, ya que algunos usuarios habían encontrado que el plugin les descolocaba algunas páginas de su plantilla . Lo encontré en http://wordpress.org/support/topic/223420.

  13. Aparte de que me descuadro todo el tema , no me dejaba entra al panel , tube que borrar lo que hice desde el ftp

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido