Mostrar los posts en el theme de Wordpress : el loop

Vamos a crear el fichero index.php y single.php, los que nos serviran como punto de entrada al theme, desde los que incluiremos el header, sidebar y footer y donde mostraremos los posts.

El fichero index.php es el punto de entrada para la portada del post. En el se mostraran todos los posts mediante una tecnica denominada “el Loop”.

El loop no es más que un bucle que va imprimiendo los posts en pantalla mientras que hayan posts.
Este es el código de nuestro fichero index.php, te recomiendo que te bajes el código del enlace del final y lo copies en tu editor favorito, ya que mejorará bastante la legibilidad.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

     <?php get_header(); ?>
 
    <?php get_sidebar(); ?>
 
    <div id=”mainContent”>
 
    <?php if (have_posts()) :?>
 
    <?php $postCount=0; ?>
 
    <?php while (have_posts()) : the_post();?>
 
    <?php $postCount++;?>
 
    <div class="entry">
 
    <div class="entrytitle entry-<?php echo $postCount ;?>">
 
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace Permanente a <?php the_title(); ?>"><?php the_title(); ?></a></h2>
 
    <h3><?php the_category(', ') ?> <?php the_time('F jS, Y') ?></h3>
 
    </div>
 
    <div class="entrybody">
 
    <?php the_content('Lee el resto de esta entrada »'); ?>
 
    </div>
 
    <div class=”entrymeta”>
 
    <div class="postinfo">
 
    <img src="<?php bloginfo('template_url') ?>/images/user.gif" width="16" height="16" alt="Author" /> <?php the_author_posts_link(); ?>
 
    <img src="<?php bloginfo('template_url') ?>/images/comment.gif" width="16" height="16" alt="Comment RSS" /> <?php comments_popup_link('No hay Comentarios', '1 Comentario', '% Comentarios', 'commentmeta'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
    </div>
    </div>
    </div>
    <?php endwhile; ?>
 
    <div class="navigation">
 
    <div class="alignleft"><?php next_posts_link('« Entradas Anteriores') ?></div>
 
    <div class="alignright"><?php previous_posts_link('Entradas Siguientes »') ?></div>
    </div>
 
    <?php else : ?>
    <h2>Not Found</h2>
 
    <div class="entrybody">Disculpa, pero estás buscando algo que no esta aquí.</div>
    <?php endif; ?>
    <!– end #mainContent –>
    </div>
    <?php get_footer(); ?>
    <!– #endContainer–>
    </div>
    </body>
    </html>

Puedes descargarte el código del fichero index.php , o verlo como imagen.

Lo primero que hacemos es llamar a las funciones get_header y get_sidebar , que es como hacer un include de header.php y sidebar.php.

Después creamos el div con id “mainContent” y que será donde inluyamos nuestros posts.

Antes de comenzar el loop se hace una comprobación, no hace falta investigar mucho para entender lo que hace la linea

1

 if(have_posts)

Por lo tanto, si hay posts, comienza el loop.

Recorremos todos los posts con el bucle while, la funcion have_posts devuelve trae si hay posts para recorrer y la funcion the_post(),carga en memoria todos datos del post actual, por lo tanto, a partir de ahora , todas las funciones de Wordpress que usemos usarán los datos del post actual cargado mediante the_post().

Puedes encontrar más información sobre el loop en este post del blog de Andrés Nieto

$postCount hace de contador para poder aplicar estilos alternos o algo similar.

Metemos cada post en un div con clase “entry” y dentro de este div hacemos otro para el título del post con clase entrytitle y ademas le aplicamos una clase con nombre entry-NumeroDelPost, por lo tanto podremos asignar estilos especiales a los posts creando clases en nuestra hoja de estilos como entry-1 , entry-2, etc…

Dentro de la clase entrytitle,creamos el título del post con este código :

1

<h2><a href="<?php the_permalink();?>" rel="bookmark" title="Enlace Permanente a <?php the_title(); ?> ;"></a></h2>

La función the_permalink() genera el enlace al post actual cargado en memoria mediante the_post.

La función the_title() imprime el título del post actual.

Cerramos el div entrytitle y creamos un nuevo div con clase entrybody. Aquí imprimiremos el contenido de la entrada.

El código que va dentro de entrybody es este :

 <?php the_content('Lee el resto de esta entrada »'); ?>

La función the_content imprime el contenido de la entrada y admite como parámetro el texto que tendrá el enlace leer más.

Lo siguiente será imprimir información sobre el autor de la entrada y un enlace a los comentarios.

Este es código que lo hace :

<div class="entrymeta">
<div class="postinfo">
 
                                   <img src="<?php bloginfo('template_url');?>/images/user.gif" alt="Author" height="16" width="16" />
 
                                   <img src="<?php bloginfo('template_url');?>/images/comment.gif" alt="Comment RSS" height="16" width="16" />  </div>
</div>

Creamos un div con clase entrymeta y dentro otro con clase postinfo.

Dentro del div postinfo imprimimos una imagen, yo uso una con un muñeco con forma de persona. Y acto seguido llamamos a la función the_author_posts_link(), la cual imprime un enlace que abre todos los posts del autor.

Después imprimimos otra imagen para los comenatarios y después usamos la funcion comments_popup_link , cuyos tres primeros parámetros de entrada son el mensaje mostrado cuando no hay comentarios, el mensaje cuando solo hay un comentario y e mensaje cuando hay varios comentarios , usando % como comodín que se sustituye por el numero de comentarios. Después usamos la funcion edit_post_link que imprime , en caso de que seas administrador un enlace para editar el post.

Después de esto cerramos el loop con :

<?php endwhile; ?>

Y por último mostramos los enlaces de navegación :

2
3
4
5

<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Entradas Anteriores') ?></div>
<div class="alignright"><?php previous_posts_link('Entradas Siguientes »') ?></div>
</div>

Dentro del div con clase navigation imprimimos el enlace para ir a la pagina de atrás mediante la función php next_posts_link y mediante previous_posts_link imprimimos los de la página siguiente.

Después de esto,con <?php else : ?> generamos la salida para el caso de que no hayan posts, este else corresponde al primer if(have_posts()).

Por último cerramos el el if, y llamamos al pie de página mediante la funcion get_footer(), que es como hacer un include de footer.php, que crearemos más tarde.

Y para finalizar cerramos todas las etiquetas html.

Ya tenemos nuestro punto de entrada para la portada del theme y hemos visto como funciona el loop de Wordpress. Lo siguiente es crear el fichero single.php y el fichero archives.php.