Como hacer una plantilla básica con PHP (templates)

Muchas veces cuando estamos trabajando con diseño front-end nos topamos con la necesidad de crear múltiples archivos para diseñar las diferentes partes de un sitio web, un proceso que es tan simple como crear una pagina de inicio o una pagina base y después duplicarla para modificar lo necesario y obtener una sección extra de nuestra pagina.

Hacer esto tiene un problema y es que si trabajamos con archivos .html tendremos que modificar el contenido de cada uno de los archivos, por ejemplo: Si tenemos 10 secciones de nuestro sitio web y queremos modificar el menú tenemos que modificar los 8 archivos .html . Y esto es un problema, es por eso que tenemos que crear plantillas con las que podamos modificar elementos repetitivos como menús de navegación, sidebars, pies de pagina, etc. De esta forma si queremos modificar el menú en vez de tener que editar 8 archivos, editando solo un archivo se modificara el menú en todas las secciones. A esto se le conoce como plantillas y hoy vamos a aprender a hacer una plantilla básica.

Lo que necesitas antes de comenzar

A partir de ahora cada que trabajes con plantillas tus archivos en vez de ser .html deben ser .php . Asi es vamos a utilizar php, una sola linea de código, pero es php. Y como vamos a trabajar con este lenguaje de programacion necesitamos tener un servidor local.

En este articulo no te enseñare a instalar un servidor local ya que es muy sencillo, basta con descargar el programa y presionar siguiente, siguiente, siguiente, lo típico.

Yo utilizo xampp en windows y es el que te recomiendo, pero existen mas que puedes descargar, como por ejemplo mamp para Mac.

Link XAMPP: https://www.apachefriends.org/es/index.html

Tampoco voy a profundizar mucho en como funciona un servidor local pero te explico rápidamente para que tengas una idea.

Antes los sitios web los creabas en una carpeta cualquiera, bien pudiera ser en el escritorio, en tus documentos, etc. A partir de ahora existe una carpeta especifica en donde deberás poner tus sitios web o al menos los que trabajen con PHP.

Esa ruta en el caso de XAMPP es: C:\xampp\htdocs

Dentro de htdocs van a ir las carpetas de tus sitios web asi que lo único que tienes que hacer es acceder a ese carpeta y dentro crear una para cada uno de tus sitios o proyectos.

Ejecutar el sitio web en el navegador también cambia, anteriormente lo que hacías era dar doble click sobre el archivo html o abrirlo en el navegador, ahora es diferente, como estamos trabajando con archivos PHP tenemos que ir a nuestro navegador y acceder al sitio mediante: http://localhost/tu_sitioweb

Si tienes un archivo llamado index.php lo ejecutara y sera el archivo que abrirá. Así que a partir de ahora es muy importante que recuerdes eso, si trabajas con archivos php tienes que recordar ejecutarlos desde localhost.

Como crear una plantilla básica (template)

Ahora si comencemos a crear una plantilla, primero que nada tienes que tener un sitio web estático, es decir un sitio con archivos html, css y/o javascript. Este sitio como acabamos de ver lo tienes que mover dentro de htdocs para poder acceder a el mediante localhost, una vez dentro de htdocs vamos a cambiarle las extensiones de .html a .php, ten cuidado al cambiarlas porque es posible que te queden algo como index.html.php lo cual esta mal.

Después lo que vamos a hacer es estudiar nuestro sitio web, identificar que partes se repiten en las demás paginas o secciones de nuestro sitio, por ejemplo el menú de navegación, el sidebar, pie de pagina, etc. Depende de cada pagina, por cada seccion que hayas identificado vas a crear un nuevo archivo con el nombre de esa parte por ejemplo con en la mayoría de los sitios el header es el mismo en todas partes vamos a crear un archivo llamado header.php, como el pie de pagina también es el mismo en todos sitios vamos a crear uno llamado footer.php y asi dependiendo de cuantos tengas.

Una vez los tengas lo que vamos a hacer es extraer un pedazo de código del documento original y pegarlo en los nuevos documentos por ejemplo, vamos a extraer el header, lo seleccionamos y lo cortamos. y por ultimo lo pegamos en el archivo header.php.

Aquí un ejemplo de la parte del header que corte de mi index.php

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Inicio</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<header>
		<div class="wrapp">
			<div class="logo">
				<a href="#"><img src="img/logotipo.jpg" alt="FalconMasters"></a>
			</div>
			<nav>
				<ul>
					<li><a href="index.php">Inicio</a></li>
					<li><a href="blog.php">Blog</a></li>
					<li><a href="acerca_de.php">Acerca de</a></li>
					<li><a href="contacto.php">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>

Ahora falta la parte mas importante relacionar el header.php con el index.php, esto es muy fácil y lo logramos con una simple linea de código.

<?php include('header.php'); ?>

Con esta linea estamos de alguna manera importando el código de header.php a nuestro index.php.

Lo que resta es hacer lo mismo para las demás partes del sitio, el sidebar y pie de pagina simplemente copiando la anterior linea de código en las demás partes y remplazando obviamente el archivo header.php por el archivo que necesitemos importar.

De esta manera vas a tener todo tu sitio dividido por partes y si creas mas archivos simplemente los relacionas con include() y cuando quieras modificar una parte general simplemente modificas un solo archivo.

Por ultimo decirte que este tipo de template/plantilla es muy básico, pero de momento te servirá para trabajar mas cómoda y fácilmente tus sitios web.

Para los que me piden el código de la plantilla que utilice en el video aquí tienen:

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Inicio</title>
	<link rel="stylesheet" href="estilos.css">
</head>
<body>
	<header>
		<div class="wrapp">
			<div class="logo">
				<a href="#"><img src="img/logotipo.jpg" alt="FalconMasters"></a>
			</div>
			<nav>
				<ul>
					<li><a href="index.html">Inicio</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="acerca_de.html">Acerca de</a></li>
					<li><a href="contacto.html">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<section class="main">
		<div class="wrapp">
			<div class="mensaje">
				<h1>Bienvenido!</h1>
			</div>

			<div class="articulo">
				<article>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<br/>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<br/>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<br/>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in
					reprehenderit in voluptate velit esse Ut enim ad minim veniam, quis nostrud 
					exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</article>
			</div>

			<aside>
				<div class="widget">
					<h3>Articulos Relacionados</h3>
					<ul>
						<li><a href="#">Lorem ipsum dolor sit amet</a></li>
						<li><a href="#">Ut enim ad minim</a></li>
						<li><a href="#">Excepteur sint occaecat</a></li>
						<li><a href="#">Reprehenderit in voluptate</a></li>
						<li><a href="#">Duis aute irure dolor in reprehenderit</a></li>
					</ul>
				</div>
			</aside>
		</div>
	</section>
	<footer>
		<div class="wrapp">
			<p>FalconMasters.com</p>
		</div>
	</footer>
</body>
</html>

Código CSS:

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:0px;
	padding:0px;
}

body {
	background:#f2f2f2;
	color:#333;
	font-family:Arial, helvetica, sans-serif;
}

a {
	text-decoration: none;
	color:#F24C27;
}

.wrapp {
	max-width: 1000px;
	width:80%;
	margin:auto;
	overflow: hidden;
}

header {
	width: 100%;
	height: 83px;
	padding:20px 0;
	background: #fff;
	overflow: hidden;
}

.logo {
	width: 43px;
	float: left;
}

.logo img {
	width:100%;
	vertical-align: top;
}

nav {
	float: right;
}

nav ul li {
	display: inline-block;
	margin:0px 5px;
}

nav ul li a {
	display: block;
	background: #f2f2f2;
	color: #037E8C;
	padding:10px 20px;
	text-decoration: none;
	border-radius:3px;
	transition:all 300ms ease;
}

nav ul li a:hover {
	color: #fff;
	background: #F24C27;
}

.mensaje {
	background:#F24C27;
	padding:20px;
	color:#fff;
	margin:20px 0;
	border-radius:5px;
}

.articulo {
	float: left;
	width: 70%;
	padding:0px 20px 20px 0px;
}

aside {
	float: left;
	width: 30%;
	background:#024959;
	color:#fff;
	padding:20px;
	border-radius:5px;
}

.widget ul {
	margin-left:20px;
}

.widget ul li {
	margin:10px 0;
	width: 100%;
}

.widget ul li a {
	color:#fff;
}

.widget ul li a:hover {
	text-decoration: underline;
}

footer {
	width: 100%;
	background:#333;
	padding:20px 0;
	color:#fff;
}

footer p {
	text-align:center;
}

Si no has entendido alguna parte aquí tengo un tutorial que te servirá para entender como funcionan y como crear plantillas.