The loop: Bucle bàsic

El bucle (en anglès The Loop) és el procés de fer cerques de determinats paràmetres a través de certes condicions. Per exemple, és el que ens permet veure un llistat d’entrades. El bucle bàsic té la següent estructura:

[php]

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

[/php]

El que fem a la primera part if(have_post()) amb el condiconal (if) és dir-li a WordPress que només si existeix algun post(have_post) faci el que ve després, per tant, li diem a WordPress que miri si hi ha alguna entrada disponible.

Després amb el while(have_post()) li diem que mentres hi hagi entrades seleccioni cada un dels post the_post().

Ara veurem quina forma té el bucle sencer:

[php]

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
A questa part anirà el codi que s’excutarà mentres have_post() sigui verdader, és a dir, si hi ha entades.
<?php endwhile; else: ?>
Codi que s’executarà si no hi ha entrades. Have_post() no verdader.
<?php endif; ?>
Fi del bucle

[/php]

Ara veurem un exemple:

[php]

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<small>Publicat el <?php the_time(‘j/m/Y’) ?> per <?php the_author_posts_link() ? </small>
<?php the_excerpt(); ?>

<?php endwhile; else: ?>
<p>No hi ha entrades</p>
<?php endif; ?>
[/php]

Bàsicament és el mateix que haviem dit però afegin codi com per exemple aquest que es troba a dins del while:

[php]
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<small>Publicat el <?php the_time(‘j/m/Y’) ?> per <?php the_author_posts_link() ? </small>
<?php the_excerpt(); ?>
[/php]

Aquí podem trobar noves funcions de WordPress:

Altres funcions que són interessants poden ser the_tags() si volem mostrar les etiquetes o the_category() per mostrar la categoria d’un entrada.

Per tancar el loop, anomenem aquest codi:

[php]

<?php endwhile; else: ?>
<p>No hi ha entrades</p>
<?php endif; ?>

[/php]

Aquest loop es farà servir moltes vegades a WordPress i depenent del nom del arxiu es mostraran diferents resultats. Per exemple, per al cas de ser executat el loop en una plantilla de categoria category.php, buscarà els últims missatges d’aquesta categoria específica. El mateix cas es donarà a la plantilla d’arxiu per data date.php, arxiu per autor author.php, etc…

Per triar quin arxiu farà servir en cada moment WordPress utlitza un sistema e jerarqui de plantilles. Aquesta jerarqui està explicada en aquesta imatge.

Template_Hierarchy

Com es pot veure a la imatge si WordPress a de mostrar una informació concreta buscarà l’arxiu necessari per fer-ho, Si no el troba en buscara un altre seguint la jerarqui fins arribar a l’arxiu index.php. D’aquesta manera podem fer petits canvis al loop en cada un d’aquests arxius per mostrar la informació que sigui més rellevant en cada moment.

Hi ha més informació sobre el tema a aquest enllaç

Ara per veure el funcionament del loop crearem l’arxiu archive.php pel nostre tema de worpress amb el següent codi:

[php]

<?php get_header(); ?>

<div id="wrapper"><?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="entrada llistat">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php the_time(‘F jS, Y’) ?> | <?php the_author() ?>
</div><!– end of entrada –>

<?php endwhile; else: ?>
<h2>No hi ha entrades</h2>
<?php endif; ?>

</div><!– end of wrapper–>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

[/php]

I els estils corresponents:

[css]

/*LOOP*/

#wrapper {margin-left:20px;margin-top:20px;float:left;width:606px;}

.entrada {float:left;margin-bottom:20px;padding: 5px;width:596px;}

.llistat {border-bottom: 1px solid #7b7b7b;}
[/css]

També crearem els arxius anomenats single.php i page.php amb el mateix contigut que archive.php però canviant the_excerpt() per the_content() per que es mostri tot el contingut de la entrada.

Per veure el resultat, crearem 3 entrades, Noticia 1, 2 i 3, que tinguin títol, contingut, resum, etiquetes i assignar-los a la categoria Noticies. Al vilualitzar les entrades veurem com es mostren, si mostrem la categoria també veurem que ens mostra el resum i no el contingut de l’entrada.

També podem canviar a l’arxiu single.php el the_author() per the_author_posts_link(). I veurem el resultat.

Per diferenciar les entrades de les pàgines eliminarem el the_time(‘F jS, Y’) i the_author() i mirarem el resultat a una pàgina creada d’exemple.

Exercicis:

  • Afegir les etiquetes i les categories a l’arxiu d’entrades
  • Crear un arxiu per que al mostrar un llistat d’entrades ordenades per categories on es vegi el títol, el resum i categoria de l’entrada
  • Crear un arxiu per que al mostrar un llistat d’entrades ordenades per autor on es vegi el títol, el resum i l’autor de l’entrada
  • Crear un arxiu per que al mostrar un llistat d’entrades ordenades per etiqueta on es vegi el títol, el contingut i les etiquetes de l’entrada

A part afegirem una mica més d’estils per millorar l’aparença general del tema:

[css]

/*BASICS*/

img {border: none;}

h1, h2, h3, h4, h5, h6 { padding-bottom: 5px; color: #808080; letter-spacing: -1px; line-height: 1em; font-weight: normal; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #808080; }

h1 { font-size: 30px; }

h2 { font-size: 24px; }

h3 { font-size: 22px; }

h4 { font-size: 18px; }

h5 { font-size: 16px; }

h6 { font-size: 14px; }

p { padding-bottom: 10px; line-height: 24px; }

strong { font-weight: bold; color: #1c1c1c; }

cite, em, i { font-style: italic; }

a { text-decoration: none; color: #00b7f3; }

a:hover { color: #000;}

table, td, tr {font: normal 12px "arial", Sans-serif;line-height:18px;}

td {padding:5px;}

th {font: bold 13px "arial", Sans-serif;line-height:18px;padding: 5px;}

form {margin:0px;padding:0px;}

ul{font: normal 12px "arial", Sans-serif;list-style:circle;padding:0px; margin:0px;}

[/css]

A la propera classe tractarem les consultes (Query_post).

Podeu descarregar els arxius de la classe aquí:

[download id=”591″]