NETTUTS ha publicado un artículo bastante claro y explicativo en el que nos muestra como mostrar el contenido de nuestro blog usando un sistema de tabs, al que dotaremos de dinamismo con jQuery.
En este artículo, pretendo hacer una traducción propia (osea que me saldré del guión seguro) para los que no tengan mucha idea de Inglés y desarrollo web.
Paso 1: ¿Donde he de modificar el theme?
Para empezar a tocar el código de un theme de WordPress, os voy a recomendar unos artículos antiguos en los que explico los puntos más importantes a tener en cuenta para que los pasos siguientes no sean un problema.
- Si no haces un theme es por que no quieres
- El Loop de WordPress en Acción
- query_posts(), personalizando nuestros blogs
Paso 2: Modificar la estructura HTML
Una vez tomado contacto con la estructura de un theme de WordPress ya podemos ponernos manos a la obra y empezar a darle forma a nuestro diseño.
Generalmente un theme de WordPress contiene la funcionalidad necesaria para mostrar el contenido en el fichero index.php alojado en la carpeta wp-content/themes/TU_THEME/.
Si tu theme no tiene este fichero seguro que dentro de él te indicará de donde está incluyendo la funcionalidad.
Veamos la estructura HTML que queremos montar para mostrar nuestro HTML.
<div id="tabsAndContent">
<ul id="tabsNav">
<li><a href="#recentArticles">Recent Articles</a></li>
<li><a href="#monthlyArchives">Monthly Archives</a></li>
<li><a href="#searchArea">Search</a></li>
</ul>
<ul id="tabContent">
<li id="recentArticles">
<ul>
<!-- WP_QUERY GOES HERE -->
</ul>
</li>
<li id="monthlyArchives">
<ul>
<!-- WP_ARCHIVES GOES HERE -->
</ul>
</li>
<li id="searchArea">
<!-- WP SEARCH GOES HERE -->
</li>
</ul>
</div> <!-- div#tabsAndContent -->Como podemos ver, vamos a usar una estructura de listas para mostrar nuestro contenido.
Paso 3: Integrar funcionalidades de WordPress
Ahora ya tenemos el HTML que necesitamos, pero así ahora no estamos mostrando nada absolutamente, tendremos que darle un poco de contenido para que tenga algo de sentido todo este cambio 😀
<div id="tabsAndContent">
<ul id="tabsNav">
<li><a href="#recentArticles">Recent Articles</a></li>
<li><a href="#monthlyArchives">Monthly Archives</a></li>
<li><a href="#searchArea">Search</a></li>
</ul>
<ul id="tabContent">
<li id="recentArticles">
<ul>
<?php $recent = new WP_Query("showposts=5");
while($recent->have_posts()) : $recent->the_post();?>
<li>
<a href="<?php the_permalink();?>" title="Link to <?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</li>
<li id="monthlyArchives">
<ul>
<?php wp_get_archives('type=monthly&limit=5'); ?>
</ul>
</li>
<li id="searchArea">
<form method="get" id="searchForm" action="<?php bloginfo('home'); ?>">
<p>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" />
<input type="submit" id="searchSubmit" value="Search!" />
</p>
</form>
</li>
</ul>
</div> <!-- div#tabsAndContent -->Con este código hemos definido las 3 tabs con un contenido bastante necesario en todo blog.
- 5 últimos posts (únicamente Título)
- Archivo de los últimos 5 meses
- Formulario de busqueda.
Ahora empieza a tener algo nuestro nuevo proyecto, aunque aún le falta algo de diseño para que la gente no se asuste al ver tanto texto.
Paso 4: Estilizando el contenido
En este paso, el CSS va a tomar una especial relevancia ya que nos va a permitir darle un aspecto elegantea nuestro contenido.
/*------TABS------*/
#container{
width: 600px;
margin: 0 auto;
}
h1{
font-size: 1.3em;
text-transform: uppercase;
color: #949494;
letter-spacing: 1px;
}
#tabsAndContent ul, #tabsAndContent li{
padding: 0
}
ul#tabsNav{
float: left;
width: 200px;
list-style: none;
}
ul#tabsNav li{
background: url(images/tabsNavBg.png) no-repeat center #a8a8a8;
}
ul#tabsNav li:hover{
background: url(images/tabsNavHover.png) no-repeat center #eee;
}
ul#tabsNav li.active{
background: url(images/tabsNavActive.png) no-repeat center #fff;
}
ul#tabsNav li.active a{
color: #303030;
}
ul#tabsNav li a{
padding: 1em 15px;
margin: 0 0 1em 0;
display: block;
width: 170px;
text-decoration: none;
color: #7e7e7e;
font: 11px/20px Georgia;
text-transform: uppercase;
}
ul#tabsNav a:hover{
color: #0a0a0a
}
ul#tabContent{
margin: 1em 0 0;
background: url(images/tabContent.png) no-repeat top right#fff;
min-height: 180px;
width: 350px;
float: left;
list-style: none;
padding: 0 25px;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#tabContent>li{
width: 350px;
list-style: none;
padding: 0 25px 20px 0;
}
#tabContent li ul li{
list-style: none;
}
#tabContent li ul li a{
display: block;
border-bottom: 1px solid #e7e7e7;
padding: 10px 0;
}
#tabContent li ul li a:hover{
background: url(images/tabContentHover.png) no-repeat center bottom;
}
form{
padding: 30px;
}
form input{
background: url(images/searchInputBg.png) repeat-x #ddd;
border: 2px solid #cbc6c9;
border-right: 0;
padding: 5px;
margin-right: 0;
color: #fff;
font: 16px Georgia, "Times New Roman", Times, serif;
}
#searchSubmit{
border-left: 0;
border-right: 2px solid #cbc6c9;
margin-left: 0;
position: relative;
left: -3px;
color: #00416c;
}
#searchSubmit:hover{
background: url(images/tabContentHover.png) no-repeat center;
color: #003459;
cursor: pointer;
}Si queremos que el diseño sea perfecto, os recomiendo que useis las imagenes que NETTUTS publican en su artículo.
Paso 5: Ocultando y darle dinamismo a nuestro código
Así tenemos todo más o menos colocado, el contenido tiene un poco más de estructura y nos permite leerlo más fácilmente. Pero así y todo necesitamos poder añadirle una funcionalidad muy necesaria, que es la de poder seleccionar una opción u otra para ver el contenido si necesidad de tener que tener todo el contenido visible.
$('#tabContent>li:gt(0)').hide();
$('#tabsNav li:first').addClass('active');
$('#tabsAndContent #tabsNav li').bind('click', function() {
$('li.active').removeClass('active');
$(this).addClass('active');
var target = $('a', this).attr('href');
$(target).slideDown(400).siblings().slideUp(300);
return false;
});Como podemos ver, en la primera línea, ocultamos a los usuarios con Javascript todas las opciones excepto la primera, dejando los 5 primeros posts como primer contenido que el usuario verá al entrar a la página.
Seleccionado las opciones podremos cambiar el contenido visible en nuestra página. Un resultado realmente intesante para tener en cuenta para nuestros diseños.
Podeis ver una demo que la gente de NETTUTS han montado para ilustrar su artículo.
5 comentarios, 1 referencias
+
#