Qué es WordPress y cómo funciona una página web desde cero

1. Introducción: antes de crear nuestra primera plantilla

Antes de empezar a programar una plantilla para WordPress, necesitamos comprender qué es WordPress, para qué sirve y cómo funciona una página web.

Puede parecer algo muy básico, pero es fundamental.

Si queremos crear plantillas profesionales, rápidas y ligeras, tenemos que conocer los elementos que intervienen cuando una persona visita una página web.

No vamos a dar por sabido ningún concepto. Empezaremos desde el principio, como si nunca hubiéramos creado una página web.

Nuestro objetivo final será construir plantillas propias, sin depender de Elementor ni de otros constructores visuales, utilizando las herramientas que WordPress ya incorpora y código optimizado.

2. ¿Qué es WordPress?

es un sistema de gestión de contenidos, conocido técnicamente como CMS (Content Management System).

Su función es permitirnos crear, administrar y publicar páginas web sin tener que programar absolutamente todo desde cero.

Por ejemplo, con WordPress podemos crear:

• Una página web corporativa.
• Un blog o periódico digital.
• Una academia de cursos.
• Un directorio de empresas.
• Una comunidad de usuarios.
• Una tienda online mediante WooCommerce.
• Una plataforma con funcionalidades personalizadas.

WordPress proporciona una estructura sobre la que podemos construir todos estos proyectos.

Lo importante para nuestro curso: WordPress no es una plantilla. Es la plataforma sobre la que instalaremos y ejecutaremos nuestras propias plantillas.

3. ¿Cómo funciona una página web?

Para entender WordPress, primero debemos conocer qué sucede cuando alguien escribe una dirección web en su navegador.

Imaginemos que una persona escribe:

https://www.ejemplo.com

En ese momento se produce una comunicación entre varios elementos.

Los protagonistas son:

1. El navegador

Es el programa que utiliza el visitante para acceder a Internet. Algunos ejemplos son Chrome, Firefox, Edge y Safari.

2. El dominio

Es la dirección que identifica una página web, como ejemplo.com.

3. El servidor

Es un ordenador que almacena los archivos y ejecuta los programas necesarios para mostrar la web.

4. WordPress

Es el software instalado en el servidor que administra los contenidos y genera las páginas.

5. La base de datos

Almacena información como entradas, páginas, usuarios, configuraciones y otros datos de WordPress.

6. HTML, CSS y JavaScript

Son tecnologías que permiten construir la estructura, presentación e interactividad de la página.

4. Qué ocurre cuando visitamos una página WordPress

Vamos a seguir el proceso paso a paso.

1. El visitante escribe la dirección de una web.
2. El navegador localiza el servidor correspondiente.
3. El servidor recibe la petición.
4. WordPress procesa la solicitud.
5. WordPress consulta la base de datos cuando necesita recuperar información.
6. El sistema utiliza la plantilla activa para construir la página.
7. El servidor entrega el resultado al navegador.
8. El navegador interpreta el código y muestra la página al visitante.

Es importante comprender una diferencia:

WordPress genera y entrega la página; el navegador se encarga de representarla visualmente.

Esto significa que nuestra plantilla tendrá una responsabilidad muy importante: determinar cómo se estructura y presenta el contenido.

5. Los tres elementos fundamentales de una página web

Para crear nuestras plantillas debemos conocer tres tecnologías esenciales.

HTML: la estructura

Es el lenguaje que define los elementos de una página: títulos, textos, imágenes, enlaces, menús y formularios.

Es como el esqueleto de una vivienda.

---

CSS: el diseño

Controla colores, tamaños, tipografías, márgenes, posiciones y distribución de los elementos.

Es como la decoración y el acabado de una vivienda.

---

JavaScript: la interactividad

Permite que determinados elementos reaccionen a las acciones del visitante.

Por ejemplo, abrir un menú, validar un formulario o actualizar información sin recargar toda la página.

Veamos un ejemplo sencillo.

Imaginemos que queremos mostrar un botón azul con el texto «Comprar ahora».

El HTML define el botón:

<button class="boton-compra">
    Comprar ahora
</button>

El CSS establece su apariencia:

.boton-compra {
    background: #1769aa;
    color: white;
    padding: 14px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

Y JavaScript puede añadir una acción:

document.querySelector('.boton-compra')
    .addEventListener('click', function() {
        alert('Has pulsado el botón');
    });

Cada tecnología tiene una responsabilidad diferente.

En nuestro curso aprenderemos a utilizarlas conjuntamente, pero también a evitar código innecesario. Una plantilla rápida no necesita incorporar JavaScript para todo.

6. ¿Qué papel desempeña PHP?

Hay una cuarta tecnología que será especialmente importante: PHP.

PHP es un lenguaje de programación que se ejecuta en el servidor.

WordPress está desarrollado principalmente en PHP.

Gracias a PHP, WordPress puede:

• Recuperar información de la base de datos.
• Mostrar las entradas publicadas.
• Identificar al usuario conectado.
• Comprobar permisos.
• Cargar diferentes partes de una plantilla.
• Ejecutar funciones y procesar formularios.
• Integrarse con plugins.

Por ejemplo, una plantilla puede utilizar este código:

<?php
if ( have_posts() ) :

    while ( have_posts() ) :
        the_post();
        ?>

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

        <?php
        the_content();

    endwhile;

endif;
?>

No es necesario que comprendas todavía todas estas instrucciones. Las estudiaremos progresivamente.

Por ahora, quédate con esta idea:

PHP trabaja en el servidor y genera el contenido que posteriormente recibe el navegador.

7. ¿Qué es una plantilla de WordPress?

Una plantilla, también llamada tema o theme, es el conjunto de archivos que determina cómo se presenta visualmente una instalación de WordPress.

Por ejemplo, podemos tener una web con:

• Una cabecera.
• Un menú de navegación.
• Una página de inicio.
• Páginas de información.
• Entradas de un blog.
• Una barra lateral.
• Un pie de página.

La plantilla determina cómo se organizan y presentan esos elementos.

Imagina que instalamos WordPress y publicamos diez páginas.

Después instalamos una plantilla.

Las páginas siguen existiendo, pero ahora WordPress utiliza las instrucciones de esa plantilla para mostrarlas.

Si cambiamos de plantilla, normalmente cambia su presentación, aunque los contenidos continúan almacenados en WordPress.

Esta separación es fundamental para desarrollar temas profesionales.

8. Diferencia entre WordPress, una plantilla y un plugin

Es uno de los conceptos que más confusión genera entre las personas que empiezan.

Veamos un ejemplo real.

Queremos crear una tienda online.

• WordPress será la plataforma.
• Nuestra plantilla determinará el diseño.
• WooCommerce proporcionará las funciones de comercio electrónico.
• La base de datos almacenará productos, pedidos y usuarios.
• El servidor ejecutará todo el sistema.

Una regla que seguiremos durante todo el curso: las funcionalidades generales deben pertenecer a plugins cuando corresponda, mientras que la plantilla debe encargarse principalmente de la presentación y de la integración visual.

Esto facilitará el mantenimiento y permitirá cambiar de plantilla sin perder funcionalidades esenciales.

9. ¿Por qué queremos crear plantillas ULTRA RÁPIDAS?

Esta es una de las razones principales por las que estamos desarrollando este curso.

Cuando construimos una página web, cada recurso adicional puede suponer trabajo para el navegador y el servidor.

Por ejemplo:

• Archivos CSS innecesarios.
• JavaScript que no se utiliza.
• Bibliotecas externas.
• Fuentes excesivas.
• Imágenes demasiado grandes.
• Consultas innecesarias a la base de datos.
• Dependencias de constructores visuales.

No significa que todos estos elementos sean malos. El problema aparece cuando se incorporan sin necesidad o sin optimización.

Nuestra filosofía será crear plantillas que:

1. Utilicen los recursos nativos de WordPress siempre que sea posible.
2. Carguen únicamente los archivos necesarios.
3. Eviten dependencias innecesarias.
4. Utilicen código organizado y reutilizable.
5. Estén diseñadas desde el principio para móviles.
6. Mantengan un equilibrio entre velocidad, diseño y funcionalidad.

No vamos a sacrificar el diseño para conseguir velocidad. Vamos a aprender a conseguir ambas cosas.

10. Primera aproximación a la inteligencia artificial

La IA será una herramienta fundamental durante todo el curso.

No vamos a utilizarla solamente para escribir código. También la utilizaremos para aprender, analizar, planificar y comprobar nuestros proyectos.

Por ejemplo, podemos pedirle:

11. Ejercicio práctico de esta lección

Vamos a realizar nuestro primer ejercicio sin necesidad de instalar nada.

Objetivo: comprender cómo se organiza una página web WordPress.

Imagina que queremos crear una página web para una empresa de servicios informáticos.

La web tendrá:

• Página de inicio.
• Quiénes somos.
• Servicios.
• Blog.
• Contacto.

Ahora identifica qué elemento se encarga de cada responsabilidad:

Segundo ejercicio: utiliza el prompt anterior y pide a la IA que te explique cómo se comunicarían el navegador, el servidor y WordPress cuando alguien visita la página de servicios.

No necesitas programar todavía. Estamos construyendo los conocimientos que utilizaremos en las siguientes lecciones.

12. Test de autoevaluación – Lección 1.1

Comprueba si has comprendido los conceptos fundamentales. Selecciona una respuesta en cada pregunta y pulsa «Corregir test».

13. Resumen de la lección

En esta primera lección hemos aprendido:

• Qué es WordPress y para qué sirve.
• Cómo funciona una página web.
• Qué sucede cuando un visitante accede a una dirección web.
• Qué papel desempeñan el navegador, el servidor y la base de datos.
• Las diferencias entre HTML, CSS, JavaScript y PHP.
• Qué es una plantilla y cómo funciona.
• Las diferencias entre WordPress, plantillas y plugins.
• Por qué queremos desarrollar plantillas ligeras y rápidas.
• Cómo utilizaremos la inteligencia artificial durante el desarrollo.

La idea más importante: WordPress es la plataforma, la plantilla controla la presentación y los plugins añaden funcionalidades. Aprenderemos a trabajar con todos ellos sin crear dependencias innecesarias.