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.zip (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="?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
22 comentarios en “Como instalar DomTABs en Wordpress”
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
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...
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.
Aparte de que me descuadro todo el tema , no me dejaba entra al panel , tube que borrar lo que hice desde el ftp
Escribe un Comentario
Comentarios adicionales gracias BackType
BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.
[#3]
Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.
[#6]
¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).
[#26]
Último mensaje de: JuanM@
En el foro: Plugins
Último mensaje de: soyloque
En el foro: Themes y Diseño
Último mensaje de: medievalia
En el foro: Themes y Diseño
Último mensaje de: medievalia
En el foro: Plugins
Último mensaje de: cafm1981
En el foro: SEO - SEM
Acceder