WYDBLOG

WydBlog al desnudo I

Antes de comenzar a preparar la programación, debemos tener preparado el layout en donde ubicaremos nuestras tabs para así poder mostrar el contenido deseado. Para ello será necesario descargar el siguiente archivo: [Descargar – 3,04KB] es un archivo comprimido con extensión .rar, dentro encontraremos el domtabs.html, style.css, domtab.js [pagina oficial] y la imagen utilizada de fondo.

• Explicación del CSS
• Explicación Wordpress

Tut: Artículos destacados y Artículos recientes separados en tabs en wordpress

Explicación del CSS: aquellas personas que ya tengan conocimientos de CSS pueden saltearse esta parte, ya que es puramente explicativa y no hace falta leerla para llevar a cabo el tutorial.


Abrimos el archivo style.css, en primer lugar nos encontraremos con un Mini reset:

El reset como lo indica su nombre, sirve para resetear los atributos otorgados por los distintos navegadores al HTML, para lograr que todos lo vean por igual y así evitar que la pagina se vea mal en algún navegador. Cabe aclarar que este es un mini reset, ya que no estamos construyendo una web entera.
Aquí, de la mano de Anieto tenemos un excelente reset css


Dejando de lado el reset, encontramos la primer clase “Tab”, vamos a analizarla:

Al cargar la página por primera vez, el script de las tabs tardara un poco en cargar, por lo tanto es posible que las distintas tabs se vean superpuestas o se desarmen hasta que se cargue el script, para evitar esto le otorgaremos el atributo “overflow:hidden”, gracias a este todo lo que exeda el tamaño de la capa (175px) no se vera.


Dándole clase a la lista que contiene los botones de las tabs:

Si continúan analizando el CSS, verán que los atributos se repiten una y otra vez pero en distinta forma, por lo tanto, únicamente me falta explicar los atributos “float”:

Gracias al atributo float podremos añadirle a la capa distinta flotabilidad, entonces, si una capa pose float:left quiere decir que flotara hacia la izquierda, es muy simple de entenderlo.




Pasemos a lo interesante, “la programación de Wordpress”. En primer lugar les explicare como lograr mostrar los artículos destacados de un blog. Para ello debemos determinar previamente una categoría de nuestro blog para los artículos destacados y averiguar cual es su id (en el panel de tu wordpress puedes hacerlo).
Programación:

(*Nota: se muy poco de php, por lo tanto si me a equivocarme con alguna definición, por favor hágamelo saber)
Explicación: Por medio de la función get_posts y los atributos otorgados entre paréntesis le decimos a wordpress que nos devuelta:

• 5 post
• categoría id 3
• Random (mezclados)
• Todos post (excluyendo a las paginas)

Para mas información sobre esta función pueden dirigirse al Codex de Wordpress:
http://codex.wordpress.org/Template_Tags/get_posts


Abriendo el Loop:

Determinemos como queremos que nos devuelva los datos recogidos:

Primero le decimos que queremos que se encuentren dentro de un elemento de lista li (por este motivo es que al comienzo de la programación se abre una lista ul y al finalizar se cierra. Continuemos leyendo, por medio de la función comments_popup_link pedimos que se nos entregue el numero de comentarios que posee el post. Por ultimo le pediremos que se muestre el título del post con el link permanente.


Por último, para cerrar el loop:

Para mostrar los Artículos recientes, básicamente usaremos el mismo sistema, unicamente cambiaremos un par de atributos en la función get_posts

Tutorial completo [Descarga]
Espero haber servido de algo y haber sido lo mas didáctico posible, aquí les dejo el link al codex de wordpress donde podrán sacarse muchas dudas (a mí me ayuda muchísimo).
Por cualquier duda, consulta… abajo se puede dejar comentarios :)