Continuando con este tutorial para incorporar “TABS” o pestañas a nuestro sitio web, ahora vamos a aprender a incorporarlos a WordPress, que pasos debemos seguir y que hay que tener en cuenta. Antes de comenzar es necesario que revisen el primer tutorial de esta serie para que tengan una idea de lo que me refiero con algunos términos.
Para incorporarlos a nuestra plantilla debemos seguir lo siguientes pasos,
Dentro de la edición de este archivo añadimos las siguientes líneas entre las etiquetas <head> y </head>
<script src="http://code.jquery.com/jquery-latest.js">
<!--mce:0-->
</script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
<!--mce:1-->
</script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
<!--mce:2-->
</script>
<script type="text/javascript">
<!--mce:3-->
</script>
A este archivo le tenemos que añadir las líneas de código de CSS del tutorial anterior, lo mejor es que ingresen su hoja de estilos propias, verán que no es muy difícil editarla. Pero en caso deseen practicar, aquí tienen el ejemplo que tienen que añadir al final del archivo style.css
.estilo {
margin:0 0 15px 0;
padding:0;
width:310px;
}
.ui-tabs-nav{
margin:0;
padding:0;
list-style:none;
}
.ui-tabs-nav li {
margin:0 2px 0 0;
padding:0 5px 0 5px;
float:left;
height:30px;
border-top:1px #3399FF solid;
border-right:1px #3399FF solid;
border-left:1px #3399FF solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:30px;
text-transform:uppercase;
}
.ui-tabs-nav li:hover {
background:#EBEBEB;
color:#333333;
}
.ui-tabs-nav li:hover a {
color:#333333;
}
.ui-tabs-nav li {
background:#FFFFFF;
}
.ui-tabs-nav li a {
color:#336699;
text-decoration:none;
}
.ui-tabs-panel {
margin:0;
padding:5px;
float:none;
clear:both;
border:#3399FF solid 1px;
width:298px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.ui-tabs-panel ul {
margin:0;
padding:0 0 0 15px;
}
.ui-tabs-panel ul li {
margin:0 0 5px 0;
}
.ui-tabs-panel a {
color:#336699;
text-decoration:none;
}
.ui-tabs-panel a:hover {
color:#3399FF;
text-decoration:underline;
}
.ui-tabs-hide {
margin:0;
padding:5px;
float:none;
clear:both;
display:none;
border:#3399FF solid 1px;
width:298px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.ui-tabs-hide ul {
margin:0;
padding:0 0 0 15px;
}
.ui-tabs-hide ul li {
margin:0 0 5px 0;
}
.ui-tabs-hide a {
color:#336699;
text-decoration:none;
}
.ui-tabs-hide a:hover {
color:#3399FF;
text-decoration:underline;
}
- Lo siguiente, es editar el archivo
sidebar.php (Barra lateral) para poder añadir nuestros “widgets” en código bruto PHP (que más adelante verán) ya que al usar esta sidebar con pestañas no pueden usar el sistema de WordPress para añadir “widgets” a sus recuadros con pestañas.
Dentro de la edición de este archivo, tenemos que añadir las siguientes líneas de código, si lo deseamos visualizar en la parte superior de nuestra plantilla lo tenemos que añadir antes de la siguiente línea de código:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>Pero si lo desea visualizar en la parte inferior, lo tenemos que poner antes del final del sidebar, es decir, antes de la última etiqueta </div>. La líneas de código a añadir son las siguientes:
<div id="EJEMPLO" class="estilo">
<ul>
<li><a href="#tab-1">Título 1</a></li>
<li><a href="#tab-2">Título 2</a></li>
</ul>
<div id="tab-1">
Aquí el contenido</div>
<div id="tab-2">
Aquí el contenido</div>
</div>Debemos recordar mantener la estructura que se mencionó en el tutorial anterior para así evitar que nuestro código no funcione.
<script type="text/javascript">
$(document).ready(function(){
$("#EJEMPLO > ul").tabs();
});
</script>Repito, debemos repetir, tantas veces sea necesario.
Luego de realizar todas esas modificaciones, nuestro widget con pestañas se mostrará en nuestra barra lateral de WordPress. A continuación, les daré una lista de funciones en PHP que llamarán algunos widgets sin la necesidad de llamarlos a través de nuestro panel de administración de WordPress:
<?php
//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
<?php
//Mostrar archivo
wp_get_archives('type=monthly');
?>
<?php
//Ultimos 10 posts
get_archives('postbypost', 10);
?>
<?php
//Blogroll
wp_list_bookmarks('title_before=<span style="display:none;">&title_after=</span>&title_li=&category_before=&category_after=');
?>En caso, tengas alguna duda acerca de este tutorial, déjanos un comentario y recuerda que respecto a la edición de la barra lateral, cada barra lateral es distinta en cada plantilla así que ten cuidado.
