PHP nos ayuda en nuestra tarea de construcción de páginas web. Se inventó para eso, pero no es necesario saber programar para usarlo. Si sabemos copiar y pegar, este tutorial nos arreglará un poco la vida.
Las ventajas son muchas:

  • Obtendremos menos páginas para editar/subir al servidor. Todo el contenido estará en un único archivo.
  • Con este tutorial en concreto obtendremos URLs más cortas, del tipo index.php?poemas en lugar de index.php?z=poemas.php
  • Las partes que siempre se repiten (cabecera y pie) se almacenarán en archivos separados, de modo que sólo habrá que construirlos o modificarlos una vez y luego se mostrarán en el navegador en todas las páginas gracias a las inclusiones.
  • Las páginas se cargarán más rápido gracias a la menor cantidad de código. Este método emplea una única línea de PHP para cada sección de nuestro sitio, de manera que apenas hay nada que editar, lo tendremos todo listo en cuestión de minutos.

Yo aprendí a hacer esto con Codegrrl y lo uso prácticamente en todos mis sitios, así que me he basado en su tutorial para facilitarles la tarea a los hispanohablantes que empiezan el mundo de la construcción de sitios web.

Primer paso: comprobar que tenemos PHP instalado en el servidor

Antes de aprender a efectuar inclusiones con PHP deberemos asegurarnos de que el servidor en el que van a estar alojadas nuestras páginas tiene instalado PHP. Si ya estamos seguros, podemos saltarnos este paso. Si no disponemos de un servidor de tales características, podemos encontrar una lista de servidores gratuitos que soportan PHP.

Si no estamos seguros si en nuestro servidor podemos hacer experimentos con PHP, podemos hacer la prueba siguiente: abrimos el Bloc de notas u otro editor de texto similar y escribimos en él “Funciona, ¡genial!”; guardamos el archivo como “test.php”; lo subimos al servidor y abrimos en el navegador ese archivo.

Si podemos ver “Funciona, ¡genial!” es que PHP funciona en nuestro servidor. Si no, desafortunadamente este tutorial no nos servirá para mucho.
Pero bueno, partamos entonces suponiendo que sí podemos jugar con PHP en nuestro servidor.

Comenzamos

Mostraré cómo emplear esta técnica mediante ejemplos.
Digamos que ya tenemos una página personal con seis secciones: “bienvenida” “sobre mí”, “mi poesía” “mis fotos” “enlaces” y “créditos”.
Abrimos todas esas páginas en un editor de textos y luego creamos un nuevo archivo también en el editor de textos (tendremos un montón de ventanas/pestañas abiertas, pero eso da cierto aire “profesional”, así que lo disfrutamos).

Copiamos entonces el siguiente código en el archivo nuevo y lo guardamos como index.php (o cualquier otro nombre, siempre y cuando la extensión sea .php):


<?
//Copia el HTML que se repita en todas las páginas del sitio, esto es: la cabecera y el pie de la página. Guárdalos en archivos separados y nómbralos cabecera.inc y pie.inc respectivamente.
//Ambos se incluirán automáticamente cada vez que se acceda a las secciones del sitio, de modo que sólo tendrás que modificar esos dos archivos cada vez que quieras modificar la interfaz (layout).
include('cabecera.inc');
if(!$_SERVER['QUERY_STRING']) { ?>

//Borra este comentario y pega aquí el HTML de tu página principal. Esta sección es la que se verá por defecto cuando se acceda a index.php.
<? } elseif ($_SERVER['QUERY_STRING'] == "apartado1") { ?>

//Borra este comentario y pega aquí el HTML de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? } elseif ($_SERVER['QUERY_STRING'] == "apartado2") { ?>

//Borra este comentario y pega aquí el HTML de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? } elseif ($_SERVER['QUERY_STRING'] == "apartado3") { ?>

//Borra este comentario y pega aquí el HTML de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? } elseif ($_SERVER['QUERY_STRING'] == "apartado4") { ?>

//Borra este comentario y pega aquí el HTML de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? } elseif ($_SERVER['QUERY_STRING'] == "apartado5") { ?>

//Borra este comentario y pega aquí el HTML de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? }  
include('pie.inc');?>

Lee el código y busca las líneas que empiezan por //. Son comentarios y explican qué tienes que hacer o cambiar. Cambia el texto entre comillas (“apartado1”, “apartado2”, etc.) para que se adapte a las secciones de tu sitio. Hay que tener en cuenta que el archivo donde escribamos todo esto tiene que tener la extensión .php, si no, no funcionará.

Adaptación

Adaptemos entonces este código a nuestro “sitio personal de ejemplo”:
Empezamos por localizar las partes de HTML que se repiten al principio y al final de todos nuestros archivos. Tomemos como ejemplo la hipotética página fotos.html. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>
  <title>Mi sitio güeb</title>
  <link rel="stylesheet" href="estilo.css" type="text/css" />
  <script type="text/javascript" src="external.js"></script>
  <meta http-equiv="imagetoolbar" content="no" />
  <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
  </head>
<body>

<div id="general">
  <div id="cabecera"><h1>Mi sitio gúeb</h1></div>

 <div id="menu">
  <h3>Menú</h3>
  <ul>
  <li><a href="yo.html">Sobre mí</a></li>
  <li><a href="poemas.html">Mi poesía</a></li>
  <li><a href="fotos.html">Mis fotos</a></li>
  <li><a href="enlaces.html">Enlaces</a></li>
  <li><a href="creditos.html">Créditos</a></li>
  <li><a href="index.html">Inicio</a></li>
  </ul>
  </div>
<div id="contenido">
  <h1>Fotos</h1>
  <p>No viajo mucho, pero cuando tengo esa oportunidad, hago muchas fotos. Aquí están las de mis últimos viajes:</p>
<p>
  <img src="imagenes/foto1.jpg" alt="Foto 1" width="500" height="300" />
  <img src="imagenes/foto2.jpg" alt="Foto 2" width="500" height="300" />
  <img src="imagenes/foto3.jpg" alt="Foto 3" width="500" height="300" />
  </p>
  </div>
<div id="footer">
  Construido por <strong>C</strong> inspirada por mi webcolega <a href="http://www.dominiodehache.ext/">H</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS válido</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML válido</a>. <a href=" http://es.creativecommons.org/licencia/">Algunos derechos reservados</a>.
  </div></div>
</body>
</html>

cabecera.inc


<head>
  <title>Mi sitio güeb</title>
  <link rel="stylesheet" href="estilo.css" type="text/css" />
  <script type="text/javascript" src="external.js"></script>
  <meta http-equiv="imagetoolbar" content="no" />
  <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<div id="general">
  <div id="cabecera"><h1>Mi sitio gúeb</h1></div>
<div id="menu">
  <h3>Menú</h3>
  <ul>
  	<li><a href="yo.html">Sobre mí</a></li>
  	<li><a href="poemas.html">Mi poesía</a></li>
  	<li><a href="fotos.html">Mis fotos</a></li>
  	<li><a href="enlaces.html">Enlaces</a></li>
  	<li><a href="creditos.html">Créditos</a></li>
  	<li><a href="index.html">Inicio</a></li>
  </ul>
  </div>
<div id="contenido">

pie.inc


</div>

	<div id="footer">
Construido por <strong>C</strong> inspirada por mi webcolega <a href="http://www.dominiodehache.ext/">H</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS válido</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML válido</a>. <a href=" http://es.creativecommons.org/licencia/">Algunos derechos reservados</a>.
	</div>

</div>


</body>

</html>

Suele usarse la extensión .inc para archivos que se van a incluir, pero también podemos usar la extensión .html o .php si nos apetece. Si vemos un archivo .inc directamente en el navegador se mostrará como texto simple, así que no es muy conveniente poner nada confidencial en ese tipo de archivos.

Vamos ahora a ocuparnos del contenido: copiamos la parte relevante de cada archivo .html que tengamos abierto (es decir: todo menos la cabecera y el pie) y lo pegamos en los lugares reservados a cada sección.


<?php
//Copia el HTML que se repita en todas las páginas del sitio, esto es: la cabecera y el pie de la página. Guárdalos en archivos separados y nómbralos cabecera.inc y pie.inc respectivamente.
//Ambos se incluirán automáticamente cada vez que se acceda a las secciones del sitio, de modo que sólo tendrás que modificar esos dos archivos cada vez que quieras modificar la interfaz (layout).
include('cabecera.inc');
if(!$_SERVER['QUERY_STRING']) { ?>
<h1>¡Hola!</h1>
<p>Bienvenidos a mi sitio. Encantada de recibiros<p>.
<? } elseif ($_SERVER['QUERY_STRING'] == "yo") { ?>
<h1>Sobre mí</h1>
<p>Me llamo C.:. tengo N años y vivo en X. <br />Las cosas que más me gustan en este mundo son A y B. <br />Reconozco que no me gustan demasiado ni M ni T ni V, pero bueno, así es la vida etc.</p>
<? } elseif ($_SERVER['QUERY_STRING'] == "poemas") { ?>
<h1>Poemas</h1>
<p>En mis ratos libres escribo poesía. <br />He aquí una selección de los poemas que más les gustan a mis amigos: etc.</p>
<? } elseif ($_SERVER['QUERY_STRING'] == "fotos") { ?>
<h1>Fotos</h1>
<p>No viajo mucho, pero cuando tengo esa oportunidad, hago muchas fotos. Aquí están las de mis últimos viajes:</p>

<p>
<img src="imagenes/foto1.jpg" alt="Foto 1" width="500" height="300" />
<img src="imagenes/foto2.jpg" alt="Foto 2" width="500" height="300" />
<img src="imagenes/foto3.jpg" alt="Foto 3" width="500" height="300" />
</p>
<? } elseif ($_SERVER['QUERY_STRING'] == "enlaces") { ?>
<p>Me gusta visitar las páginas de mis colegas en la Red. Comparto con vosotros mis enlaces:</p>
	<ul>
	<li><a href="http://un.colega.ext">Colega 1</a></li>
	<li><a href="http://otro.amigo.ex">Amigo 2</a></li>
	<li><a href="http://enlace.ext">Interesante 3</a></li>
	</ul>
<? } elseif ($_SERVER['QUERY_STRING'] == "creditos") { ?>
<p>Yo misma he diseñado y confeccionado el sitio gracias a cosas que he aprendido en >><a href="http://www.maestrosdelweb.com">Maestros del Web</a>, etc. 

</p>
<? }  
include('pie.inc'); ?>

He escrito “creditos” sin tilde a propósito porque desgraciadamente el código no funciona si se incluyen caracteres especiales del español: conque sólo letras simples y números.
Podemos añadir tantas líneas “elseif” como queramos según el número de secciones del sitio, y darles cualquier nombre siempre y cuando no se repitan ni tengan caracteres especiales.

Para acceder a cada sección de modo que se muestren en páginas diferentes, no hay más que enlazarlas de este modo index.php?nombreseccion, con lo que tengáis entre comillas en el código en lugar de nombresección.
Si se usa el código del ejemplo, las URL que tendremos que poner en el menú de navegación serán estas:

  • Sobre mí: index.php?yo
  • Mis poemas: index.php?poemas
  • Mis fotos: index.php?fotos
  • Páginas amigas: index.php?enlaces
  • Créditos: index.php?creditos

La página de bienvenida, la que aparece por defecto, es index.php, como ya sabemos.
De esta forma, al final nuestro archivo cabecera.inc del ejemplo tendrá este aspecto:


<head>
  <title>Mi sitio güeb</title>
  <link rel="stylesheet" href="estilo.css" type="text/css" />
  <script type="text/javascript" src="external.js"></script>
  <meta http-equiv="imagetoolbar" content="no" />
  <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="general">
  <div id="cabecera"><h1>Mi sitio gúeb</h1></div>
<div id="menu">
  <h3>Menú</h3>
  <ul>
  <li><a href="index.php?yo ">Sobre mí</a></li>
  <li><a href="index.php?poemas">Mi poesía</a></li>
  <li><a href="index.php?fotos ">Mis fotos</a></li>
  <li><a href="enlaces.html">Enlaces</a></li>
  <li><a href="creditos.html">Créditos</a></li>
  <li><a href="index.html">Inicio</a></li>
  </ul>
  </div>
  <div id="contenido">

Para sitios más largos, con secciones principales y subsecciones dentro de ellas es más conveniente dividir el sitio entre varios archivos correspondientes a las secciones principales e incluir las subsecciones por medio de los "elseif".

De este modo evitaremos encontrarnos con un index.php gigantesco para el que necesitaremos mover la barra de desplazamiento varios kilómetros para encontrar las partes que queremos editar.
En mis sitios plurilingües uso ese sistema: un archivo php con sus respectivas subsecciones para cada lengua: esp?yo – esp.php?poemas // fra.?moi – fra.php?poems // por.php?eu –por.php?poemas.

Nota:

Se suele pensar que las inclusiones se utilizan únicamente para controlar cabeceras y pies. Lo cierto es que se pueden usar para incluir el contenido de cualquier archivo en cualquier archivo PHP. Por ejemplo, si queremos insertar un formulario de contacto en algunas secciones, guardamos el formulario en un archivo separado (por ejemplo,
direcc.inc y lo incluimos de este modo:


<?php include('cabecera.php');?>
  <h1>Hola a todos</h1>
  <p>Hoy hablaremos de las propiedades físicas de la naranja ibérica. Blah, blah.</p>
  <p>Si quieres sugerir temas escríbenos utilizando el siguiente formulario:</p>
  <?php include('direcc.inc');?>
  <p>La próxima semana hablaremos del tomate de la llanura y la zanahoria africana.</p>
<?php include('pie.php');?>