Como instalar DomTABs en WordPress

Publicado por Fernando Tellado el 25 Mar, 2008

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

<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" />

1	<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:

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

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

<p>Inserta el contenido de la segunda tab aqui.</p></div>

</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

AVISO: esta publicación es de hace dos 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.