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.
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.
- Descarga el script del sitio oficial o de este otro enlace y descomprímelo en tu ordenador
- Sube el fichero domtab.js a la carpeta de tu plantilla de Wordpress.
- Descarga la hoja de estilo pbd_domtab.css (clic derecho -> Guardar enlace como) y súbelo también a la carpeta de tu plantilla.
- En el archivo header.php de tu plantilla copia el siguiente código antes de la etiqueta </head> :
PHP:
-
<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" />
-
- 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:
PHP:
-
<div class="domtab"> <ul class="domtabs">
-
<li><a href="#t1“>Nombre para Tab 1</a></li>
-
<li><a href=”#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
También te puede interesar:
Bitacoras
RSS
Funciona de...
Blog EntreBlogs
Ayuda WordPress
Bocabit
Buscando Libertad
CiberPrensa
Comparativa de Bancos
Verdadera Seducción
Soy Plastic
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?
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
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”
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.
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?
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/
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 :\
Está roto el enlace a pbd_domtab.css
eperezchica, acabo de bajarlo y va bien
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
Pues no, te aseguro y prometo que está donde he puesto yo
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
http://ayudawordpress.com/descargas/domtabs/pbd_domtab.css
Saludos!
.
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.
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.
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 =)
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.
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
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