EN: Warning: This post is over two years old, so it's possible that the views, opinions, links or instructions reflected on it do not correspond with the way I think now or the way things currently work. I have evolved (and so have the World and the Internet), so it might be advisable to just take this entry for a glimpse into the (my) past. :)

ES: Atención: Este artículo tiene más de dos años de antigüedad, de modo que los puntos de vista, opiniones e instrucciones que se vierten en él pueden no corresponder con cómo pienso ahora o cómo funcionan las cosas en la actualidad. He evolucionado (y también lo han hecho el mundo e Internet), así que probablemente lo más recomendable sería entender esta entrada como un simple reflejo del (de mi) pasado. :)

Inclusiones PHP
Por Calítoe.:. (Cristina MJ)

Publicado por primera vez en Maestros del Web.

Mediante este tutorial aprenderemos a usar PHP (sin tener por qué saber programar en PHP) para optimizar nuestro sitio y facilitar su actualización cada vez que queramos hacer cambios.

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:

  1. Obtendremos menos páginas para editar/subir al servidor. Todo el contenido estará en un único archivo.
  2. Con este tutorial en concreto obtendremos URLs más cortas, del tipo index.php?poemas en lugar de index.php?z=poemas.php
  3. 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.
  4. 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.

Antes
Después

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 aquí.

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):

index.php
[php]<?php
//Copia el código que va a repetirse 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.php y pie.php 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.php’);
if(!$_SERVER[‘QUERY_STRING’]) { ?>
//Borra este comentario y pega aquí el código de tu página principal (sin la cabecera ni el pie, obviamente). 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 código 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 código 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 código 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 código 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 código de uno de los apartados de tu sitio (sin la cabecera ni el pie, obviamente).
<? }
include(‘pie.php’); ?>[/php]

Lee el código anterior 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. Las partes comunes con otras páginas se han marcado en negrita:

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="application/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> &amp; <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>

Copiamos entonces esas partes en negrita y las pegamos en los archivos cabecera.inc y pie.inc respectivamente:

cabecera.inc
[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">[/html]

pie.inc
[html]<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> &amp; <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> [/html]

Puede usarse la extensión .inc para archivos que se van a incluir, pero si accedemos a un archivo .inc directamente en el navegador se mostrará como texto simple, de modo que no es muy conveniente poner nada confidencial en ese tipo de archivos. También podemos usar la extensión .html si nos apetece, o .php para más seguridad.

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]<?php
//Copia el código 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><p>.
<? } elseif ($_SERVER[‘QUERY_STRING’] == "yo") { ?>
<h1>Sobre mí</h1>
</p><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’); ?> [/php]

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:

[html]<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">[/html]

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) e insertarlo de este modo:

direcc.inc
[php]<?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’);?>[/php]

¡Listo!