Bloque I

12:26 25/04/2017 1/1 Bloque I
Tabla de Contenidos
1. Introducción .................................................................................................................................. 1
1.1. Estructura del Curso ............................................................................................................. 2
2. Creación del Entorno de Desarrollo .......................................................................................... 4
2.1. Instalación de XAMPP ........................................................................................................... 4
2.2. Instalación de WordPress .................................................................................................. 11
3. Estructura de un Tema de WordPress .................................................................................... 23
4. Jerarquía de Plantillas ............................................................................................................... 30
4.1. header.php ........................................................................................................................... 31
4.2. footer.php ............................................................................................................................. 37
4.3. index.php .............................................................................................................................. 38
4.4. Plantillas de página: 404.php ........................................................................................... 40
Actividad 1 ....................................................................................................................................... 42
Parte I. Instalación, Configuración y Estructura ....................................................................... 43
José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

12:26 25/04/2017 1/43 Bloque I
1. Introducción
WordPress ha pasado de ser desde su aparición en 2003 una plataforma open source para crear
blogs, a ser un potente y configurable gestor de contenidos que puede presumir de ser el CMS más
utilizado en Internet, de acuerdo a las estadísticas de Built With.
De hecho, desde su versión 3 (en el momento de escribir este manual ha salido ya la versión 4.7.4),
se proporciona al desarrollador/a web una enorme flexibilidad al poder crear diseños a medida,
estructuras de datos personalizadas, permitiendo crear sitios web, plataformas para blogs, o
aplicaciones web más complejas. De hecho la flexibilidad que nos proporciona a día de hoy permite
utilizarlo como framework PHP. A modo de ejemplo, simplemente comentar que entre las
innumerables webs construidas con WordPress, algunas más o menos llamativas pueden ser:
Sitio Oficial de The Rolling Stones

Portal Web de la BBC para América
Sitio Oficial de Justin Bieber
Web de Ferrovial
Sitio Oficial del Grupo Renault
Web de Hojiblanca
Sitio Web Oficial de Turismo de Finlandia
Web Internacional de Mercedes Benz
Si representamos una estructura simplificada de una aplicación web, podemos comprobar las partes
en las que aparece WordPress, reduciendo nuestra carga de trabajo de desarrollo y permitiéndonos
aprovechar las aportaciones realizadas por la comunidad (seguridad, documentación, reutilización del
código, etc.):

12:26 25/04/2017 2/43 Bloque I
Figura 1. Estructura simplificada de los elementos que conforman una aplicación web.
La puesta en marcha de una aplicación con WordPress va a aligerar mucho el código que tenemos
que generar, ya que por ejemplo, el propio WordPress se va a encargar de realizar los accesos a la
base de datos de manera segura: nos limitaremos a utilizar las funciones que tiene definidas
WordPress. También nos va a permitir gestionar los usuarios de manera sencilla, añadir ficheros de
estilos, ficheros Javascript, con el objetivo de enviar al cliente un fichero HTML que enlace las hojas de
estilos y los ficheros JS necesarios, y todo ello como he indicado antes, escribiendo relativamente
poco código PHP.
1.1. Estructura del Curso
Durante este curso iremos abordando cada una de las partes del proceso de diseño explicando las
tareas que se han de realizar y el por qué de ellas. A continuación podéis ver un esquema del proceso
que seguiremos:
Convertir una página estática HTML+CSS en un tema dinámico de WordPress. A partir

del diseño gráfico inicial construiremos una versión estática del mismo (con HTML y CSS) y lo
convertiremos en un tema (dinámico) de WordPress. En este punto también trataremos las
diferentes páginas del tema, la jerarquía de plantillas y el bucle de WordPress.
Crear un Custom Post Type. Mediante los Custom Post Type (CPT) conseguimos que
WordPress supere las limitaciones de un mero CMS para gestionar blogs y nos permita
gestionar cualquier tipo de contenido a medida. Concretamente en este curso crearemos el sitio

12:26 25/04/2017 3/43 Bloque I
web de un festival de cine.

Consultas a la Base de Datos. A medida que vamos generando contenido, los usuarios de
nuestra aplicación pueden necesitar acceder a dicho contenido, por lo que necesitaremos
proporcionarles un acceso a la base de datos (aprovechando las funciones de WordPress).
Crear e integrar plugins. Otro de los aspectos más potentes que presenta WordPress es el
hecho de que se pueden añadir funcionalidades sin tener que modificar los ficheros de nuestra
instalación. Existe una enorme cantidad de plugins gratuitos y de pago. En esta parte del curso,
además, crearemos un plugin propio.
Despliegue de la aplicación. Desplegar una aplicación de WordPress es un proceso muy
sencillo, pero nos va a permitir pulir algunos aspectos de nuestro diseño y además integrar el
Google Search Engine.
Gestión de usuarios. Aunque no todas las aplicaciones web necesitan tener usuarios dados
de alta (aparte, obviamente del administrador), veremos como permitir, de manera segura, que
los usuarios se den de alta en nuestra aplicación, con un perfil tan limitado como queramos.
Siguiente: 2. Creación del Entorno de Desarrollo
From:
http://www.joseramonruiz.eu/ - José Ramón Ruiz .eu
Permanent link:
http://www.joseramonruiz.eu/doku.php?id=curso_wp:parte_1:1
Last update: 12:19 25/04/2017

12:26 25/04/2017 4/43 Bloque I
2. Creación del Entorno de Desarrollo
El objetivo final de cualquier aplicación web suele ser su despliegue bien en Internet o bien en una
intranet, sin embargo para ir confeccionando paso a paso nuestra aplicación y realizar las pruebas
necesarias de una manera cómoda y ágil, trabajaremos de modo local; al final del curso, cuando
tengamos nuestra aplicación finalizada la desplegaremos en un servidor de acceso público.
WordPress necesita al menos dos servicios para funcionar adecuadamente (ver requisitos):
Un servidor PHP 7 (como por ejemplo Apache)

Una base de datos MySQL 5.6/MariaDB 10.0 o superior
No obstante, es posible trabajar con PHP 5.2.4+ y MySQL 5.0+, pero en ese caso debemos asumir los
riesgos de seguridad que implican las versiones obsoletas.
Quizá la herramienta de desarrollo más sencilla que nos proporciona estos dos servicios de manera
local sea XAMPP, además de estar disponible tanto para Windows, como para MAC, como para
GNU/Linux.
De todas maneras si durante la realización del curso preferís utilizar otra herramienta de
desarrollo podéis hacerlo sin ningún problema.
2.1. Instalación de XAMPP
IMPORTANTE. Si vais a hacer una instalación sobre GNU/Linux, quizá sea buena idea que examinéis
las indicaciones sobre LAMP proporcionadas en el capítulo de despliegue.
La instalación de XAMPP es un proceso bastante sencillo que no debe de dar ningún problema, pero
no está de más revisar los aspectos más importantes.
En primer lugar, según la plataforma con la que estemos trabajando descargaremos de la página
oficial la versión adecuada del ejecutable de XAMPP.
Una vez descargado e iniciado el proceso de instalación el programa puede advertirnos de un posible
fallo debido a restricciones en el acceso a ciertas rutas del sistema (en sistemas Windows).
Figura 2. Advertencia de posible error en el acceso a ciertas rutas del sistema.
Tras aceptar se iniciará el asistente (figura 3), y a continuación se nos preguntará acerca de los

12:26 25/04/2017 5/43 Bloque I
servicios que queremos instalar (figura 4). Únicamente dejaremos marcadas las casillas
correspondientes a:
MySQL
Apache
PHP
phpMyAdmin
Figura 3. Inicio del asistente de instalación.

12:26 25/04/2017 6/43 Bloque I
Figura 4. Servicios que instalaremos sobre XAMPP.
En la siguiente ventana seleccionaremos la ruta en la que instalaremos XAMPP, en mi caso dejaré la

ruta por defecto, si vais a utilizar otras rutas, tened en cuenta la advertencia mostrada en la figura 2.
Figura 5. Selección de la ruta de instalación.

12:26 25/04/2017 7/43 Bloque I
Las siguientes imágenes (figuras 6, 7 y 8) muestran las diferentes pantallas que va generando la
aplicación durante el proceso de instalación.
Figura 6. Información de Bitnami.

12:26 25/04/2017 8/43 Bloque I
Figura 7. Confirmación del inicio de la instalación.
Figura 8. Proceso de instalación.
Cuando el proceso de instalación se halle más avanzado, el sistema nos informará (en sistemas
Windows) de que el firewall bloqueó al servidor Apache el acceso a ciertas redes. Para las pruebas
que vamos a realizar podemos dejar marcada la casilla por defecto y permitir a dicho servicio acceder
a redes privadas (figura 9).

12:26 25/04/2017 9/43 Bloque I
Figura 9. Notificación de bloqueo del acceso del firewall.
Finalmente la instalación habrá acabado, y se nos mostrará la pantalla de la figura 10, en la que se
nos pregunta si queremos lanzar el programa. Si no lo lanzamos en ese momento podremos abrirlo
siempre que queramos a través del acceso que se habrá creado en el sistema.
Figura 10. Finalización de la instalación.
Tras abrir XAMPP aparecerá el panel de control de la figura 11. En ese panel solamente tendremos
12:26 25/04/2017 10/43 Bloque I
que pulsar los botones 'start' correspondientes a los servicios 'Apache' y 'MySQL' para arrancar los
servicios.
Figura 11. Panel de control de XAMPP.
Si todo ha funcionado correctamente se nos indicará en la parte inferior del panel de control. Al igual
que en el caso de Apache, es posible que el firewall bloquee esta vez a MySQL, si es así bastará con
autorizar el acceso a redes privadas (figura 12).

12:26 25/04/2017 11/43 Bloque I
Figura 12. Mensaje de advertencia del firewall.
En este punto ya tenemos un servidor Apache y una base de datos MySQL funcionando, ahora es el
momento de instalar WordPress.
2.2. Instalación de WordPress
Para instalar WordPress necesitamos descargarlo desde su página web. Para ello tenemos varias
opciones, pero las dos más sencillas son las siguientes:
1. Descargar la última versión estable que siempre (independientemente de la versión) se

encontrará en la misma ruta: https://wordpress.org/latest.zip (esto es especialmente cómodo si
realizamos la descarga desde la consola de un servidor con comandos como wget, pero eso lo
veremos más adelante). Hay que tener en cuenta que esta versión está en inglés.
2. Descargar la última versión en español. Buscando en https://es.wordpress.org encontramos el
enlace de descarga de la última versión estable en este momento: la 4.7.4
Independientemente de la opción que hayamos escogido, descargaremos el fichero (en formato zip o
en fomato tar.gz) y lo descomprimiremos dentro de la carpeta htdocs que se hallará en la ruta en la
que hemos instalado XAMPP (figura 13), en mi caso C://XAMPP/htdocs.

12:26 25/04/2017 12/43 Bloque I
Figura 13. Ubicación del directorio htdocs.
Ahí crearemos una carpeta llamada por ejemplo wordpress, y será donde descomprimiremos todo el
contenido del fichero zip descargado desde la página de WordPress (figura 14).

12:26 25/04/2017 13/43 Bloque I
Figura 14. Instalación de WordPress.
Para comprobar que todo ha funcionado bien, y seguir con el proceso, abriremos un navegador y
accederemos a la siguiente dirección:
http://localhost/wordpress
Recordad que estamos trabajando de manera local. Al acceder a la anterior dirección, se nos indica
que vamos a comenzar el proceso de configuración.

12:26 25/04/2017 14/43 Bloque I
Figura 15. Pantalla de bienvenida de WordPress.
Antes de continuar necesitaremos crear la base de datos que utilizará WordPress. Para ello
utilizaremos phpMyAdmin, el cual lo hemos instalado con XAMPP. Accedemos mediante el
navegador a la siguiente ruta:
http://localhost/phpMyAdmin

12:26 25/04/2017 15/43 Bloque I
Figura 16. Interfaz de phpmyadmin.
Crearemos una nueva base de datos haciendo clic en 'Nueva' (ver recuadro rojo en la figura 16).
Podemos ponerle cualquier nombre, en este caso yo he optado por llamar a la base de datos
wordpress. En cuanto al tipo de cotejamiento (codificación de los datos) seleccionaremos
ut8_general_ci para evitar problemas con ciertos caracteres.

12:26 25/04/2017 16/43 Bloque I
Figura 17. Creación de la base de datos wordpress.
Tras pulsar el botón Crear podemos observar que ya tenemos creada la base de datos wordpress.
Figura 18. Base de datos creada.
Volvamos ahora a http://localhost/wordpress. Como podemos ver, tras pulsar en ¡Vamos a ello!
en la pantalla inicial se nos solicitan varios datos para poder continuar con la configuración (figura

12:26 25/04/2017 17/43 Bloque I
19).
1. En primer lugar se nos solicita el nombre de la base de datos que acabamos de crear. En este
caso wordpress.
2. Un nombre de usuario de la base de datos con privilegios de creación/edición de tablas. En
este caso, al tratarse de la base de datos puesta en marcha con el MySQL de XAMPP, el usuario
es root.
3. La contraseña del usuario anterior. En este caso por defecto la contraseña está vacía, por lo que
dejaremos ese campo en blanco.
4. La dirección del servidor MySQL, en este caso al tratarse del mismo equipo es localhost.
5. Finalmente pregunta por el prefijo de la tabla. Este prefijo se añadirá a todas las tablas de
WordPress que se creen para esta aplicación. La utilidad del prefijo radica en que si tenemos
dos aplicaciones de WordPress utilizando la misma base de datos puede haber problemas
porque cada una necesitará una tabla, por ejemplo, para almacenar los usuarios y en ambos
casos se llamará users. De esta manera, al proporcionarle a cada aplicación un prefijo distinto,
podremos tener una tabla llamada wp_users para una de las aplicaciones WordPress, y una
tabla llamada wp2_users para otra de las aplicaciones. En este caso dejaremos el valor por
defecto wp_
Figura 19. Configuración del acceso de WordPress a la base de datos.
Tras la introducción de estos datos ya podemos seguir el proceso pulsando en 'Enviar'.

12:26 25/04/2017 18/43 Bloque I
Si el acceso a la base de datos ha sido correcto, se nos mostrará el mensaje de la figura 20.
Figura 20. Acceso correcto a la base de datos.
En el siguiente paso de la instalación se nos solicita la siguiente información:
1. Nombre del sitio. Podéis poner el que queráis pero lo recomendable es que guarde alguna
relación con el contenido que generaremos.
2. Nombre del usuario. Este será el usuario administrador para gestionar el sitio. Posteriormente
podremos crear más usuarios con distintos perfiles.
3. Contraseña del administrador (en caso de pérdida podemos cambiarla fácilmente a través
de phpMyAdmin).
4. Un correo electrónico para realizar labores de administración, como enviar un enlace para
restablecer la contraseña en caso de olvido, o alertar de posibles ataques contra el sitio.
Aunque en este caso al ser una instalación local su importancia es menor.
5. Finalmente se nos pregunta si queremos que el sitio esté visible para los buscadores de
Internet. En un sitio en producción esta casilla debería estar desmarcada ya que probablemente
nos interese que nuestra aplicación aparezca en los buscadores, sin embargo como estamos
trabajando en un entorno de desarrollo marcaremos esta casilla para que no aparezca en los
resultados de las búsquedas cuando la despleguemos al final del curso. De todas maneras este
valor es configurable posteriormente si decidimos pasar el sitio a producción.

12:26 25/04/2017 19/43 Bloque I
Figura 21. Parámetros de configuración para la instalación de WordPress.
Una vez finalizada la instalación (figura 22), ya podemos acceder a la aplicación generada por defecto
(figura 23) en http://localhost/wordpress.

12:26 25/04/2017 20/43 Bloque I
Figura 22. Instalación correcta de WordPress.
Figura 23. Front-end de la aplicación instalada.
Si queremos acceder al back-end (o zona de administración) escribiremos en la barra de navegación:

12:26 25/04/2017 21/43 Bloque I
http://localhost/wordpress/wp-login.php
como se puede observar en la figura 24, introduciendo el nombre del usuario y contraseña que hemos
creado en el paso anterior.
Figura 24. Introducción de credenciales.
Ahora ya tenemos WordPress listo para poder ir creando nuestra aplicación a medida.

12:26 25/04/2017 22/43 Bloque I
Figura 25. Back-end de la aplicación instalada.
Anterior: 1. Introducción | Siguiente: 3. Estructura de un Tema de WordPress
From:
Permanent link:
Last update: 12:20 25/04/2017

12:26 25/04/2017 23/43 Bloque I
3. Estructura de un Tema de WordPress
Ahora que ya tenemos WordPress instalado y configurado vamos a desarrollar nuestra primera
aplicación. En esta ocasión vamos a realizar un sitio web sencillo de un festival de cine, en el
que entre otras funcionalidades tendremos:
1. Una página de inicio que muestre aleatoriamente 6 de las películas que se proyectan en el
festival (y que habremos dado de alta previamente en la base de datos)
2. Una página de búsqueda que nos permita encontrar una o varias películas que cumplan con los
requisitos que definamos.
3. Acceso a la ficha de cada película.
4. Un back-end que permita cómodamente a un usuario con privilegios dar de alta nuevas
películas.
5. Una zona de registro donde se podrán dar de alta usuarios y votar por la película que más les
haya gustado.
En este ejemplo, como se ha indicado, vamos a desarrollar la web de un festival de cine,

pero pensad que las funcionalidades anteriores son inmediatamente extrapolables, por
ejemplo, a una web que contenga un portfolio de proyectos, a una tienda online, etc.
Todas estas funcionalidades vienen definidas en lo que WordPress denomina un 'tema' (en inglés
theme). El tema define completamente tanto la parte frontal, como la parte de administración, la
estructura y formato de los datos, etc.
Para empezar a construir la primera aproximación a nuestro tema necesitaremos crear una serie
de ficheros dentro de nuestra instalación de WordPress. Vayamos al directorio donde tenemos
instalado XAMPP. Ahí teníamos un directorio llamado htdocs, dentro del cual habíamos creado una
carpeta a la que denominamos wordpress donde habíamos descomprimido todo el paquete .zip. Si
ahora accedemos a la carpeta wp-content veremos que existe una subcarpeta denominada themes
(ver figura 25).

12:26 25/04/2017 24/43 Bloque I
Figura 25. Carpeta donde se almacenan los diferentes temas instalados.
Si accedemos a themes, veremos que (dependiendo de la versión instalada) existen varias carpetas.
En este caso twentyfourteen, twentyfifteen y twentysixteen, o lo que es lo mismo, los
temas oficiales de WordPress correspondienes a los años 2014, 2015 y 2016.

12:26 25/04/2017 25/43 Bloque I
Figura 26. Temas instalados.
De hecho estos temas se pueden seleccionar desde el back-end de nuestra aplicación en el menú
'Apariencia'→'Temas'
Figura 27. Selección de Temas.
De todas maneras, como hemos visto anteriormente, no nos interesan los temas pre-instalados, sino
que desarrollaremos uno de cero para construir nuestra aplicación.

12:26 25/04/2017 26/43 Bloque I
Comenzaremos creando una carpeta vacía a la que llamaremos, por ejemplo, festival (recordad
que os había propuesto realizar el sitio web de un festival de cine).
Figura 28. Creación de la carpeta que albergará nuestro tema.
Dentro de la carpeta festival crearemos un fichero que debe llamarse style.css. La obligación
de utilizar esta nomenclatura se debe a las normas que utiliza WordPress para buscar y estructurar
los temas. De hecho este fichero es el que define el tema.
Dentro de ese fichero he escrito las siguientes líneas:
@charset "UTF-8";
/*Theme Name: Festival

Theme URI: www.joseramonruiz.eu
Author: José Ramón Ruiz Rodríguez
Description: Tema para mostrar cómo se construye un sitio con WordPress
*/
Obviamente podéis cambiar el valor de los campos.
Como habréis adivinado, este fichero css va a ser el que utilizará WordPress para almacenar los
estilos de nuestro tema.
IMPORTANTE: Este curso no trata sobre CSS ni sobre HTML, por lo que en lugar de tratar
de hacer un frontal vistoso, responsivo, etc, he preferido mantener un estilo sencillo para
que no os perdáis en el código. Para ampliar sobre los estilos y las propiedades CSS os
recomiendo el excelente curso de nuestro compañero Alejandro Amat Desarrollo web con
CSS3 y HTML5
En la siguiente ruta de GitHub podéis encontrar el fichero css completo que he utilizado style.css.
Como podéis ver se limita a utilizar algunos colores, márgenes, espaciados y alguna triquiñuela que
no es relevante. Si no domináis CSS o no disponéis de mucho tiempo no pasa nada, podéis utilizar el
fichero que os paso tal cual, si queréis utilizar durante el curso alguna modificación o reescribirlo de
cero por mi no hay ningún inconveniente, pero como os he dicho en el párrafo anterior en este curso
nos centraremos en las funcionalidades de WordPress como framework PHP.

12:26 25/04/2017 27/43 Bloque I
Una vez que ya tenemos creada la carpeta festival y dentro de ella el fichero style.css vamos a
ir construyendo la interfaz de nuestra aplicación. Partiremos de un diseño previo que puede ser
realizado con alguna herramienta de prototipado. De hecho, el flujo de trabajo habitual podemos
verlo en la siguiente figura: a partir de un diseño elaboramos una versión estática que nos sirve para
confeccionar el tema de WordPress.
Figura 29. Flujo de diseño de un tema WordPress.
La landing page de nuestra aplicación podría tener una apariencia similar a la siguiente
(posteriormente iremos desgranando el resto de páginas que contendrá nuestro WordPress):

12:26 25/04/2017 28/43 Bloque I
Figura 30. Imagen con el diseño de la portada de nuestra aplicación.
Como he comentado con anterioridad, al no ser HTML el objetivo de este curso, os proporcionaré el
marcado completo (estático) que nos permite convertir el diseño mostrado en la imagen anterior en
una página web. Esa página web escrita en HTML y CSS es la que convertiremos en el tema dinámico.
Los ficheros que nos permiten crear la versión estática se pueden descargar de GitHub en el siguiente
enlace. Como podéis ver se trata de una réplica del diseño propuesto y consta de tres ficheros:
El fichero index.html principal.

El fichero style.css, donde se da forma al contenido.
Dentro de una carpeta CSS, el fichero bootstrap.min.css, ya que utilizaremos alguna de las
facilidades que nos ofrece el framework CSS Bootstrap para ahorrarnos trabajo al maquetar los
elementos en la página web.
y dos ficheros extra que usaremos posteriormente:
El fichero film.html (contiene la estructura de la ficha de cada película).

El fichero buscar.html (contiene la plantilla de la página de búsquedas).
Como podéis comprobar se trata de un marcado y un estilo bastante simples con el único fin de
estructurar la información.
Ya tenemos hechas las dos primeras partes del proceso de desarrollo (diseño de la apariencia del
tema y su 'traducción' a HTML+CSS), en la siguiente sección empezaremos a utilizar las herramientas
que nos proporciona WordPress para hacer dinámico y flexible nuestro diseño estático actual.
Anterior: 2. Creación del Entorno de Desarrollo | Siguiente: 4. Jerarquía de Plantillas

12:26 25/04/2017 29/43 Bloque I
From:
Permanent link:
Last update: 05:34 25/04/2017

12:26 25/04/2017 30/43 Bloque I
4. Jerarquía de Plantillas
Cuando WordPress decide mostrar información al usuario, se apoya en una sofisticada jerarquía de
plantillas, aunque realmente los únicos dos ficheros imprescindibles para la creación del tema son,
por un lado style.css, que como vimos en el apartado anterior posee la propia definición del tema,
e index.php, el cual va a ser la plantilla que utilice WordPress si no puede encontrar una plantilla
que se ajuste mejor al contenido (más adelante veremos qué significa esto con más detalle). Además
de esos dos ficheros básicos de plantilla podemos crear plantillas para mostrar páginas, categorías,
etiquetas, posts, etc.
Veamos un ejemplo sencillo de cómo funcionaría la jerarquía de plantillas. Supongamos que en

nuestra aplicación estamos almacenando en la base de datos productos de una tienda, y hemos
creado un tipo llamado producto (con todos sus atributos, como por ejemplo su nombre, la
descripción, una imagen, el precio, etc.). Si queremos que WordPress nos muestre la ficha
correspondiente a un producto concreto para realizar la visualización utilizará la plantilla llamada
single-producto.php, si no la encuentra utilizará la plantilla llamada single.php y si tampoco la
encuentra, finalmente utilizará la plantilla index.php. Por tanto en nuestra labor de diseño
necesitaremos crear las plantillas que WordPress vaya a necesitar para poder visualizar la
información de la aplicación de manera adecuada.
En la siguiente imagen podéis ver una simplificación de las plantillas que utilizará WordPress para
mostrar la información. La jerarquía completa la podéis ver en el impresionante mapa visual enlazado
al códex publicado por http://ayudawp.com.

12:26 25/04/2017 31/43 Bloque I
Figura 31. Jerarquía de plantillas (versión simplificada).
Además de esas plantillas, WordPress también utiliza ciertos ficheros para crear secciones del tema y
utilizarlos en sus propias plantillas. Los más utilizados son:
header.php: en este fichero se puede incluir cualquier cosa que esté por encima del
contenido. Probablemente incluirá las declaraciones HTML, la sección <head>, y las primeras
etiquetas del <body>, como pueden ser el nombre del sitio, la barra de navegación, etc.
Veremos que para llamar a este fichero e integrarlo en otra plantilla (como por ejemplo en
index.html) se utiliza la funcion get_header().
footer.php: de manera análoga al caso anterior, se utiliza para introducir todo lo que estará
por debajo del área de contenido, como por ejemplo el pie de página, el cierre de las etiquetas
body y html, etc. Para llamar a este fichero e integrarlo en otra plantilla se utiliza la función
get_footer();
4.1. header.php
Vamos a empezar a utilizar las herramientas de WordPress para construir nuestro tema. Si
inspeccionamos los ficheros proporcionados index.html, film.html y buscar.html, podremos
comprobar que tienen dos zonas comunes:
la cabecera, y
el pie de página.

12:26 25/04/2017 32/43 Bloque I
Veamos el código común de la parte superior:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content='II Festival de Cine Ínsula de
Barataria'/>
<title>II Festival de Cine Ínsula de Barataria</title>
<meta name='robots' content='noindex,follow' />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

<link rel='stylesheet' href='css/bootstrap.min.css' type='text/css'
media='all' />
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
</head>
<body>
<div class="contenido">
<header>
<div class="row">
<h1 class="col-md-7 col-xs-12"><a href="#">II Festival de Cine
Ínsula de Barataria</a></h1>
<div class="col-md-5">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Buscar Películas</a></li>
<li><a href="#">Sección Oficial</a></li>
</ul>
</div>
</div>
<div class="row">
<a href="#">Iniciar sesión</a>
</div>
<a href="#">Registrarse</a>
</div>
</div>
</div>

12:26 25/04/2017 33/43 Bloque I
</header>
Este código se corresponde a la parte superior del interfaz (y también a las declaraciones del tipo de
html, enlaces a las hojas de estilo, etc.), y que será común a todas las páginas de nuestra aplicación.
IMPORTANTE: Si no estáis habituados a trabajar con Bootstrap, u otro framework CSS, os

puede sorprender el uso de clases como row o col-md-X. Sin entrar en muchos detalles,
podemos decir que Bootstrap organiza el contenido en filas (rows) y dentro de ellas
podemos definir el tamaño que tendrá cada bloque según el dispositivo. Por ejemplo col-
md-5 indica que en pantallas de ordenador convencionales, ese bloque ocupará 5
doceavos de la anchura total. col-xs-6 significa que ocupará 6 doceavos (esto es, la
mitad) de la anchura total del elemento padre cuando se muestre en pantallas pequeñas
(teléfonos móviles de baja resolución o en orientación retrato). Podéis obtener más
información en la traducción del manual oficial que ha realizado Javier Eguiluz.
Figura 32. Cabecera de la aplicación.
Antes de guardar este código como header.php, podemos hacerlo más dinámico con unas pocas
modificaciones utilizando las funciones que nos proporciona WordPress.
En primer lugar vayamos a la línea donde se declara el <title> (recordad que es donde se declara
el nombre del documento).
<title>II Festival de Cine Ínsula de Barataria</title>
Como vemos el título es estático, está escrito manualmente, si el nombre del sitio cambiara,
tendríamos que actualizarlo manualmente en todos aquellos sitios en los que apareciera. En lugar de
eso utilizaremos la función bloginfo('name'), la cual nos proporciona el nombre del sitio que
hayamos configurado durante la instalación, o que modifiquemos en el panel de administración.

12:26 25/04/2017 34/43 Bloque I
Figura 33. Modificación del nombre del sitio web.
Por tanto la línea <title> quedaría en una primera aproximación así:
<title><?php bloginfo('name');?></title>
Recordad que para que el servidor interprete el código PHP, éste debe situarse entre las etiquetas
<?php y ?>. Con la función bloginfo('name') incrustamos el nombre del sitio web entre las
etiquetas <title> y </title>.
Aún podemos seguir haciendo nuestra aplicación más flexible utilizando las herramientas que nos
proporciona WordPress. Si observamos el enlace a la hoja de estilos en cualquiera de los documentos
html veremos que es de la siguiente forma:
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
Si recordamos el fichero style.css que necesitábamos para crear el tema, veremos que se
encontraba colgando directamente de la carpeta del tema (festival). Esa ruta viene impuesta por
WordPress, y la función bloginfo('stylesheet_url') nos devuelve la ruta absoluta del fichero
de estilos style.css dentro del servidor. Por tanto, de manera análoga al caso de <title>
podemos reescribir el enlace dentro del documento html a la hoja de estilos de la siguiente manera:
<link rel="stylesheet" type="text/css" href="<?php

bloginfo('stylesheet_url'); ?>" media="screen" />
En este caso (y solo en este caso), bloginfo('stylesheet_url') devuelve la ruta

http://localhost/wordpress/wp-content/themes/festival/style.css.
También habíamos utilizado el fichero de Bootstrap llamado bootstrap.min.css. La ruta absoluta

de dicho fichero es
http://localhost/wordpress/wp-content/themes/festival/css/bootstrap.min.css.
¿Cómo podemos transformar esa ruta absoluta en una ruta absoluta pero dinámica independiente del

12:26 25/04/2017 35/43 Bloque I
nombre de la aplicación y del tema?. La función bloginfo('template_url') nos devuelve la ruta

del tema (no de ningún fichero concreto), por tanto en este caso sería
http://localhost/wordpress/wp-content/themes/festival. Sabiendo que el fichero de
Bootstrap está en una subcarpeta llamada css podemos construir la ruta hasta ese fichero de la
siguiente manera:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');

?>/css/bootstrap.min.css" media="screen" />
En otras palabras añadimos a la ruta del tema la cadena de texto /css/bootstrap.min.css,

creando así la ruta absoluta de manera dinámica.
Para ir finalizando con el header, añadiremos el seguimiento a otras webs cuando nos enlazan
(pingback), el icono que aparecerá en la pestaña del navegador (favicon) y un apartado importante si
necesitamos añadir código con posterioridad, el hook wp_head().
Un hook es una referencia a un lugar concreto dentro de nuestro tema para poder inyectar código y
añadir o modificar funciones. Los veremos con mayor profundidad más adelante. Si queréis saber más
podéis consultar el artículo de Enrique Chávez ¿Qué son y para que sirven los hooks?.
El código resultante de los puntos del párrafo anterior sería el siguiente:
<link rel="shortcut icon" type="image/x-icon" href="<?php

bloginfo('template_directory'); ?>/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');
?>/css/bootstrap.min.css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
Si queréis utilizar el mismo favicon que en el ejemplo, podéis descargarlo de aquí.
Por ahora añadiremos una última cosa al fichero header.php. Si nos fijamos en la línea 26 de, por
ejemplo, el archivo index.html veremos que hay un enlace que debería apuntar a la página
principal:
<h1 class="col-md-7 col-xs-12"><a href="#">II Festival de Cine Ínsula de

Barataria</a></h1>
Como hemos visto antes, si cambiara el nombre del sitio web, deberíamos cambiar también la cadena
de texto entre las etiquetas <a> y </a>. Como acabamos de ver, podemos hacerlo mucho más
dinámico y flexible:
<h1 class="col-md-7 col-xs-12"><a href="<?php bloginfo('url');?>"><?php

bloginfo('name');?></a></h1>
Hemos generado un enlace a la página principal (bloginfo('url')) con el texto del nombre del
sitio web (bloginfo('name')).

12:26 25/04/2017 36/43 Bloque I
El código (susceptible de futuras modificaciones) del fichero header.php será:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="<?php bloginfo('charset');?>">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content='<?php bloginfo('name');?>'/>
<title><?php bloginfo('name');?></title>
<link rel="shortcut icon" type="image/x-icon" href="<?php

bloginfo('template_directory'); ?>/images/favicon.ico">
bloginfo('template_url'); ?>/css/bootstrap.min.css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="contenido">
<header>
<div class="row">
<h1 class="col-md-7 col-xs-12"><a href="<?php
bloginfo('url');?>"><?php bloginfo('name');?></a></h1>
<ul>
<li><a href="#">Inicio</a></li>
<li ><a href="buscar.html">Buscar Películas</a></li>
<li ><a href="">Sección Oficial</a></li>
</ul>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<a href="#">Iniciar sesión</a>
</div>
<div class='col-md-12'>
<a href="#">Registrarse</a>
</div>
</div>
</div>

12:26 25/04/2017 37/43 Bloque I
</header>
4.2. footer.php
De la misma manera que en el caso del header, si inspeccionamos los tres ficheros html
proporcionados, podremos comprobar que la parte inferior de los mismos es idéntica entre si:
</div>
<footer>
<br/>
<p class="text-center">II Festival de Cine Ínsula de Barataria. All
wrongs reserved. 2017.</p>
</footer>
</body>
</html>
Este código lo guardaremos con el nombre footer.php en la carpeta de nuestro tema.
En este caso hay menos posibilidades de hacer el código más dinámico, pero de la misma manera
que el nombre del sitio web lo obteníamos con la función blogname('name'), podemos modificar la
línea:
<p class="text-center">II Festival de Cine Ínsula de Barataria. All wrongs

reserved. 2017.</p>
con la referencia:
<p><?php bloginfo('name'); ?>. All wrongs reserved. <?php echo

date("Y");?>.</p>
La función de PHP date() nos permite obtener la fecha actual en diferentes formatos.
Finalmente, al igual que añadíamos un hook en el fichero header.php, también vamos a añadir el
hook (si no entendéis bien el concepto de hook pensad en una referencia que posteriomente nos
permitirá añadir código si lo necesitamos) wp_footer() justo antes de cerrar el </body>.
El código del fichero footer.php quedará así:
</div>
<footer>
<br/>
<p class="text-center"><?php bloginfo('name'); ?>. All wrongs
reserved. <?php echo date("Y");?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

12:26 25/04/2017 38/43 Bloque I
4.3. index.php
Para comprobar que todo lo que hemos escrito hasta ahora funciona crearemos dentro de la carpeta
'festival' un fichero vacío llamado index.php. Su primera línea será:
<?php get_header(); ?>
y su última línea será:
<?php get_footer(); ?>
La función get_header() carga el contenido del fichero header.php que acabamos de crear y de
la misma manera get_footer() carga el contenido del fichero footer.php.
A través del panel de administración activaremos nuestro tema (en realidad el andamiaje de nuestro
tema) como se puede ver en la siguiente figura.
Figura 34. Activación del tema festival.
Seguramente vuestro tema no tendrá la vista previa que aparece en la imagen anterior. Si queréis
que vuestro tema muestre esa imagen basta con crear una imagen llamada screenshot.png en el
directorio de vuestro tema. En mi caso he utilizado esta, pero no es una cuestión importante.
Si ahora accedemos a la url http://localhost/wordpress (o el nombre que le hayáis dado)

aparecerá algo similar a la siguiente imagen:

12:26 25/04/2017 39/43 Bloque I
Figura 35. Visualización de index.php.
Como vemos se trata de una página vacía pero con el header y el footer que hemos diseñado. Para
concluir (por ahora) con este fichero, podemos coger parte del código de index.html para que
tenga algo de contenido, aunque por ahora sea estático:
<section class="container">
<br/>
<article class="col-md-4 col-sm-6 col-xs-12">

<p><a href="#"> Ser y llegar a ser</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/etre-220x32
6.jpg />
</article>

<p><a href="#"> B, la película</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/B-220x326.j
pg />
</article>

<p><a href="#"> Margin Call</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/Margin_Call
-220x326.jpg />
</article>

12:26 25/04/2017 40/43 Bloque I

<p><a href="#"> Do Schools Kill Creativity?</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/ken-creativ
ity-220x326.jpg />
</article>

<p><a href="#"> Enséñame pero bonito</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/enseñame-22
0x326.jpg />
</article>

<p><a href="#"> Imagine Elephants</a></p>
<img src=
http://www.joseramonruiz.eu/wordpress/wp-content/uploads/2016/09/imagine-ele
phants-220x326.jpg />
</article>
</section>
4.4. Plantillas de página: 404.php
Para seguir familiarizándonos con las funciones y la jerarquía de plantillas de WordPress, crearemos
otra plantilla muy utilizada en casi cualquier aplicación web: la correspondiente al Error 404.
Cuando tratamos de acceder a una página que no existe en el servidor (bien porque haya sido
borrada, bien porque hayamos escrito mal la ruta), se genera el famoso error 404, y suele
presentarse un mensaje indicando el error producido y la posible causa.
WordPress utiliza una plantilla para mostrar el mensaje de error al usuario, es el fichero 404.php.
Podemos hacerlo más o menos complejo (en la web hay verdaderos ejemplos de creatividad aplicada
en dar un poco de gracia a esa página tan molesta), sin embargo en nuestro caso simplemente
queremos dar al usuario un mensaje y proponerle que vuelva a la página de inicio.
En primer lugar crearemos un fichero vacío llamado 404.php en la carpeta de vuestro tema (en el
ejemplo que estamos siguiendo festival). Como tenemos un fichero header.php creado con la
cabecera lo invocaremos, así la primera línea será:
A continuación simplemente indicaremos al usuario qué ha ocurrido:
<section class="container">
<br/>

12:26 25/04/2017 41/43 Bloque I
<div class='text-center alert alert-danger row' role='alert'>

<h2 class="col-md-12">La página solicitada no existe</h2>
Y le propondremos volver al inicio mediante la creación de un enlace dinámico:
<p class="col-md-12">Quizá prefieras volver al <a href="<?php

bloginfo('url');?>">inicio</a></p>
</div>
</section>
Recordad que bloginfo('url') nos devolvía la ruta de nuestra aplicación web.
Finalmente cargaremos el footer:
Ahora ya tenemos nuestra página 404.php creada. Si tratamos de acceder a una url que no existe,
como por ejemplo http://localhost/wordpress/aaaa, obtendremos la siguiente página:
Figura 36. Mensaje ante un error 404.
Anterior: 3. Estructura de un Tema de WordPress | Siguiente: Actividad 1
From:
Permanent link:
Last update: 05:47 25/04/2017

12:26 25/04/2017 42/43 Bloque I
Actividad 1
Generad un tema con las funcionalidades propuestas en este capítulo (os recomiendo que utilicéis
todo el código que se ha ido explicando). Concretamente, el tema tendrá (como mínimo) los
siguientes elementos:
1. Un fichero style.css (poned vuestro nombre en la descripción del mismo).

2. El fichero bootstrap.min.css dentro de una subcarpeta llamada CSS.
3. Un fichero index.php (como se ha creado aquí).
4. Un fichero header.php (como se ha creado aquí).
5. Un fichero footer.php (como se ha creado aquí).
6. Un fichero 404.php (como se ha creado aquí)
Entregad el tema en una carpeta comprimida en zip.
Anterior: 4. Jerarquía de Plantillas
From:
Permanent link:
Last update: 22:03 20/04/2017

12:26 25/04/2017 43/43 Bloque I
Parte I. Instalación, Configuración y

Estructura
A continuación tenéis el índice de los aspectos que analizaremos durante este primer bloque.
1. Introducción
2. Creación del Entorno de Desarrollo
3. Estructura de un Tema de WordPress
4. Jerarquía de Plantillas
Actividad 1
Puedes descargar en pdf el tema completo haciendo clic aquí
From:
Permanent link:
http://www.joseramonruiz.eu/doku.php?id=curso_wp:parte_1:start
Last update: 10:34 11/11/2016

Bloque I

Cargado por

Copyright:

Formatos disponibles

Bloque I

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bloque I

Cargado por

Copyright:

Formatos disponibles

12:26 25/04/2017 1/1 Bloque I

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Sitio Oﬁcial de The Rolling Stones

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

1.1. Estructura del Curso

Convertir una página estática HTML+CSS en un tema dinámico de WordPress. A partir

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

web de un festival de cine.

Siguiente: 2. Creación del Entorno de Desarrollo

Last update: 12:19 25/04/2017

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

2. Creación del Entorno de Desarrollo

Un servidor PHP 7 (como por ejemplo Apache)

2.1. Instalación de XAMPP

Figura 2. Advertencia de posible error en el acceso a ciertas rutas del sistema.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 3. Inicio del asistente de instalación.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 4. Servicios que instalaremos sobre XAMPP.

En la siguiente ventana seleccionaremos la ruta en la que instalaremos XAMPP, en mi caso dejaré la

Figura 5. Selección de la ruta de instalación.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 6. Información de Bitnami.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 7. Conﬁrmación del inicio de la instalación.

Figura 8. Proceso de instalación.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 9. Notiﬁcación de bloqueo del acceso del ﬁrewall.

Figura 10. Finalización de la instalación.

Figura 11. Panel de control de XAMPP.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 12. Mensaje de advertencia del ﬁrewall.

2.2. Instalación de WordPress

1. Descargar la última versión estable que siempre (independientemente de la versión) se

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 13. Ubicación del directorio htdocs.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 14. Instalación de WordPress.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 15. Pantalla de bienvenida de WordPress.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 16. Interfaz de phpmyadmin.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 17. Creación de la base de datos wordpress.

Figura 18. Base de datos creada.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 19. Conﬁguración del acceso de WordPress a la base de datos.

Tras la introducción de estos datos ya podemos seguir el proceso pulsando en 'Enviar'.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 20. Acceso correcto a la base de datos.

En el siguiente paso de la instalación se nos solicita la siguiente información:

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 21. Parámetros de conﬁguración para la instalación de WordPress.

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 22. Instalación correcta de WordPress.

Figura 23. Front-end de la aplicación instalada.

Si queremos acceder al back-end (o zona de administración) escribiremos en la barra de navegación:

José Ramón Ruiz .eu - http://www.joseramonruiz.eu/

Figura 24. Introducción de credenciales.