Creeu un nou fitxer anomenat index.php. El fitxer index.php és un dels dos fitxer bàsics per conformar una estructura mínima, però funcional, d'un tema de Wordpress.

El fitxer index.php és bastant flexible. Acostuma a incloure totes les referències a la capçalera, a la columna lateral, al peu de pàgina, al contingut central, a l'arxiu dels articles, al resultat d'una cerca, al missatge d'error, etc. La incorporació d'aquests continguts ve també per mitjà d'unes funciones pròpies de Wordpress:

• Si voleu incloure la capçalera (header.php), feu ús de la funció get_header().
• Si voleu incloure la columna lateral (sidebar.php), feu ús de la funció get_sidebar().
• Si voleu incloure el peu de pàgina (footer.php), feu ús de la funció get_footer().

Escriviu al fitxer index.php les tres funcions de Wordpress que incorporaran la capçalera, la columna lateral i el peu de pàgina.

<?php get_header(); ?>  
 
<?php get_sidebar(); ?> 
 
<?php get_footer(); ?>  

És a dir, cada vegada que feu una petició al bloc, l'arxiu index.php representarà el contingut dels fitxers -per aquest ordre- de header.php, sidebar.php i footer.php.

Abans que copieu la divisió o regió central de l'arxiu index.html, veieu a continuació una de les parts fonamentals de qualsevol tema de Wordpress: el bucle o loop en anglès.

¿Què és el loop? Aquesta expressió fa referència a la representació de cadascun dels articles del bloc mitjançant una iteració. Cada funció pròpia de Wordpress que es trobi dins d'aquesta iteració retornarà un valor adequat al context del contingut de l'article. Per exemple, la funció the_title(), dins de la iteració, retornarà el valor del títol de cadascun dels articles.

El algoristme que defineix el loop dels articles és ben senzill:

Si hi han articles:

Mentre hi han articles:

Mostra article n

Final del bucle Mentre
Si no hi han articles

Mostra un missatge d'error/ajuda

Final del condicional Si

Ara cal que veieu la traducció d'aquest algoristme al llenguatge PHP en combinació amb les funcions específiques de Wordpress. Comenceu per la part d'inici del codi del loop:

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

1. if és una expressió pròpia del llenguatge PHP i té com a objectiu avaluar una condició entre els parèntesis. La condició ve representada per la funció de Wordpress have_post(), és a dir, avalua si hi han articles publicats.
2. Si hi han articles, començarà a executar-se el bucle (representat per l'expressió de PHP, while)). Aquest bucle s'anirà executant tantes vegades com articles tingui el bloc. Cada article en la iteració estarà associat al valor de la funció the post().
3. Un cop entrat en aquesta part de la iteració, és el moment que incorporeu l'estructura específica de l'article, però amb les corresponents modificacions perquè la iteració els representi correctament a la web. Veieu un senzill exemple on mostrarà el títol i el contingut de l'article:
   

   <h2><?php the_title(); ?></h2>
   <p><?php the_content(); ?></p>

4. Per finalitzar la itreració, cal que afegiu l'expressió de PHP, endwhile:
   

   <?php endwhile; ?></php>

Abans que comenci el loop, hi ha un condicional que avalua si existeixen o no entrades o articles per mostrar a la pàgina en funció de la petició de l'usuari/ària. Si afegiu després del loop la següent clàusula:

<?php else; ?>

podreu determinar quin tipus de missatge voleu proporcionar a la web en cas que no hi han articles o que no s'han trobat articles a partir d'una determina cerca.

<?php endwhile; else: ?>
  <h2>Oh! no el trobo!</h2>
<?php endif; ?>

<?php if (have_posts()) : ?>
 
// contingut de la iteració de les entrades del bloc
 
<?php else : ?>
 
// missatge d'error/advertiment/ajuda 
 
<?php endif; ?>

Veieu una primera versió de l'arxiu index.php:

<?php
/**
 * @package WordPress
 * @subpackage D227
 */
 
get_header(); ?>
 <div id="central"> <!-- inici de la columna central -->
 <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   <div class="article"> <!-- inici article -->
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
   </div> <!-- final article -->
   <?php endwhile; ?>
   <?php else: ?>
  <h2>Oh! no el trobo!</h2>
<?php endif; ?>
</div> <!-- final de la columna central -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Recordeu que aquesta versió no conté els blocs que formen l'estructura de l'article. Veieu a continuació com fer-ho.

La estructura de l'article està format -com ja recordeu- per tres blocs:

* El primer bloc correspon a la data de publicació de l'entrada.
* El segon bloc correspon al contingut de l'entrada (capçalera i contingut)
* El tercer bloc correspon al descriptors i als comentaris de l'entrada

Incorporeu a l'arxiu index.php la següent modificació del primer bloc:

<div class="primer_bloc">
  <p><?php the_time('d'); ?>
  <span class="mes"><?php the_time('F'); ?></span>
  </p>
</div>

Apareix la funció pròpia de Wordpress the_time()¹⁾. Aquesta funció s'encarrega de mostrar en pantalla la data de publicació de l'entrada. Per mostrar el dia de la data de publicació passeu l'argument 'd' com a paràmetre; per mostrar el mes, 'F'.

El segon bloc conté el títol (capçalera de segon nivell, element h2) i el contingut (paràgraf, element p). Incorporeu la següent estructura:

<div class="segon_bloc">
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link"><?php the_title(); ?></a></h2>
  <?php the_content(); ?>
</div>

Fixeu-vos que hem eŀliminat la referència a la imatge (aquesta la podeu incloure dins del contingut de l'article) i incorporat l'enllaç permanent de l'article, a través de la funció the_permalink(), associada a la capçalera de segon nivell.

El tercer i últim bloc està format pels descriptors i un enllaç permanent a l'entrada del bloc. Manteniu la primera part -els descriptors-, però reemplaceu l'enllaç permanent per l'acció de comentar l'article.

<div class="tercer_bloc">
 <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>
 <p><?php comments_popup_link('Sense comentaris &#187;', '1 Comentari &#187;', '% Comentaris &#187;'); ?></p>
</div>

La primer funció, the_tags²⁾, mostra un enllaç al descriptor o descriptors de l'entrada. Aquesta funció permet personalitzar la sortida. Veieu el seu ús:

 <?php the_tags( $abans, $separador, $després ); ?> 

Per tant, per aconseguir la mateixa estructura que vàreu definir a l'arxiu index.html -una llista d'enllaços-, cal passar els següents arguments a la funció:

<?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>

Pel que fa a l'acció de comentar l'entrada del bloc s'ha fet ús de la funció comments_popup_link()³⁾ que mostrarà en pantalla l'enllaç a l'espai de comentaris de l'entrada. Aquesta funció permet personalitzar la sortida d'aquest enllaç al definir tres tipus de text diferents en relació al nombre de comentaris:

• Sense comentaris (primer argument)
• Un comentari (segon argument)
• Molts comentaris (tercer argument)

<?php comments_popup_link('Sense comentaris &#187;', '1 Comentari &#187;', '% Comentaris &#187;'); ?>

Per a lcaixa que engloba l'article:

.article {
	width: 640px;
	background-color: #fff;
	position: relative;
	margin-bottom: 25px;
  	-webkit-box-shadow: 10px 10px 5px #afafaf;
  	-moz-box-shadow: 10px 10px 5px #afafaf;
}

Per a les capçaleres de segon nivell de l'entrada:

.segon_bloc h2 a { /*<<*/
	font-family: "Times New Roman", serif;
	font-size: 34px;
	font-style: italic;
	color: #00abef;
	margin-bottom: 10px;
	line-height:1.5;
	font-weight:normal;
        text-decoration: none;
}
 
.segon_bloc h2 a:hover {
	color: #6f6c61; /*<<*/
}

Per al contingut de l'entrada:

.segon_bloc {
	padding-top: 25px;
	padding-left: 25px;
	padding-right: 25px; /*<<*/
}
 
.segon_bloc p {
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #3c3c3c;
	line-height:1.5;
	padding-bottom: 15px; /*<<*/
}

per a la caixa de la data de publicació:

.primer_bloc {
	position: absolute;
	top:25px;
	left: -50px;
	width: 50px;
	height: 50px;
	background-color: #00abef;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
 
.primer_bloc p {
	color: #fff;
    margin-top: 4px;
	font-family: Arial, sans-serif;
	font-size: 28px;
    line-height: 1;
	text-align: center;
	text-shadow: 0px 0px 3px#fff;
}
 
.primer_bloc a {
	color: #fff;
	text-decoration: none;
}
 
.mes {
	display: block;
	font-size: 12px;
}

Aquí disposeu d'una captura de la presentació en el navegador Mozilla Firefox 3.5 d'una entrada del bloc amb els canvis de millora del full d'estil. Fixeu-vos que s'han incorporat propietats de CSS3, per tant, només es veuran amb els navegadors Mozilla Firefox 3.5, Safari 4.x i Opera 10.