Contenidos, campos y plantillas

En la lección Tipos de contenido personalizados (CPT UI) creaste el tipo de contenido Proyectos y la taxonomía Disciplinas.

Tres caminos: plugin (A), estructura nativa (B) y dinámico con JavaScript o Telex (C).

Listado con la plantilla de archivo o con un Bucle de consulta en una página.

Plantilla propia para cada proyecto; la jerarquía elige la más específica.

Las clases de WordPress en cada tarjeta permiten filtrar con JavaScript.

  • En la lección Tipos de contenido personalizados (CPT UI) creaste el tipo de contenido Proyectos y la taxonomía Disciplinas. Ahora toca mostrarlos: una página con el listado de proyectos y una plantilla para cada proyecto. Es la sección central de un portafolio, y hay tres caminos de dificultad creciente.
  • OpciónCómoQué aprendesDificultad A · Plugin de galeríaInstalar Visual Portfolio y usar sus bloquesConfigurar un pluginBaja B · Estructura nativaCPT Proyectos + plantilla de archivo o bloque Bucle de consultaCómo WordPress convierte datos en páginasMedia C · Dinámico e interactivoB + filtro propio en JavaScript (C.1) o bloque propio con Telex (C.2)Unir el gestor con tu código (páginas 10.3 y 10.4)Alta
  • Esta página explica la opción B, que es la base de la C.
  • Si al crear el tipo de contenido activaste Tiene archivo, WordPress ya tiene una dirección con todos los proyectos: tusitio/proyecto/. Para diseñarla:
  • Apariencia → Editor → Plantillas → Añadir nueva plantilla → Archivo: Proyectos (el nombre exacto depende del tema). Dentro verás un bloque Bucle de consulta que ya lista los proyectos. Diseña la tarjeta de cada uno con los bloques de su plantilla interna: Imagen destacada, Título, Extracto, Términos (las disciplinas). Cambia la disposición a cuadrícula y elige las columnas. Añade la dirección /proyecto/ al menú como "Portafolio".

Introducción

En la lección Tipos de contenido personalizados (CPT UI) creaste el tipo de contenido Proyectos y la taxonomía Disciplinas. Ahora toca mostrarlos: una página con el listado de proyectos y una plantilla para cada proyecto. Es la sección central de un portafolio, y hay tres caminos de dificultad creciente.

Tres caminos para la página de portafolio

OpciónCómoQué aprendesDificultad A · Plugin de galeríaInstalar Visual Portfolio y usar sus bloquesConfigurar un pluginBaja B · Estructura nativaCPT Proyectos + plantilla de archivo o bloque Bucle de consultaCómo WordPress convierte datos en páginasMedia C · Dinámico e interactivoB + filtro propio en JavaScript (C.1) o bloque propio con Telex (C.2)Unir el gestor con tu código (páginas 10.3 y 10.4)Alta

Esta página explica la opción B, que es la base de la C.

Vía 1: la plantilla de archivo

Si al crear el tipo de contenido activaste Tiene archivo, WordPress ya tiene una dirección con todos los proyectos: tusitio/proyecto/. Para diseñarla:

Apariencia → Editor → Plantillas → Añadir nueva plantilla → Archivo: Proyectos (el nombre exacto depende del tema). Dentro verás un bloque Bucle de consulta que ya lista los proyectos. Diseña la tarjeta de cada uno con los bloques de su plantilla interna: Imagen destacada, Título, Extracto, Términos (las disciplinas). Cambia la disposición a cuadrícula y elige las columnas. Añade la dirección /proyecto/ al menú como "Portafolio".

Vía 2: un Bucle de consulta en una página

Edita la página Portafolio y añade el bloque Bucle de consulta (Query Loop). Elige un diseño (por ejemplo, Cuadrícula con imagen). En la barra lateral, desactiva Heredar la consulta de la plantilla y en Tipo de contenido elige Proyectos. Ordena por fecha o por título y elige cuántos mostrar. Diseña la tarjeta como en la vía 1.

Las dos vías puntúan igual. La vía 2 te deja escribir una introducción encima del listado; la 1 es la forma "de WordPress" de hacerlo.

La plantilla de cada proyecto

Al pulsar un proyecto se abre con la plantilla Entrada individual o, mejor, con una propia: Plantillas → Añadir nueva → Entrada individual: Proyectos. Diseña una ficha clara:

imagen destacada grande (con su texto alternativo); título, disciplinas (bloque Términos) y fecha si aporta; el contenido del proyecto (galería, texto del proceso); enlaces "Proyecto anterior / siguiente" y un botón de vuelta al portafolio.

Cómo elige WordPress la plantilla

WordPress busca de la plantilla más específica a la más general (la jerarquía de plantillas). Para un proyecto suelto:

single-proyecto → single → singular → index

Para el listado de proyectos:

archive-proyecto → archive → index

Campos personalizados en la plantilla

Si has guardado datos como el cliente o el año en campos personalizados (lección Tipos de contenido personalizados (CPT UI)), el editor de bloques no los muestra por sí solo. Opciones:

Escribirlos en el propio contenido del proyecto (lo más sencillo). Usar un plugin de campos (ACF) que añade bloques o conexiones para mostrarlos (las opciones dependen de la versión). En WordPress recientes, conectar bloques a campos con las Block Bindings (avanzado; disponible desde WordPress 6.5, en septiembre de 2026 todavía en evolución).

No son imprescindibles para empezar.

Preparar los datos para el filtro (opción C.1)

Si vas a programar el filtro, cada tarjeta necesita su disciplina en el HTML para que JavaScript la lea. Dentro del Bucle de consulta, el bloque Términos escribe las disciplinas de cada proyecto, y cada tarjeta lleva clases de WordPress con el tipo y los términos (por ejemplo, disciplina-branding). Inspecciónalo con las DevTools: esa clase hace el papel del atributo data-categoria de un filtro hecho con JavaScript (lección Eventos). En la lección Del gestor a JavaScript: leer datos por API verás la alternativa de pedir los datos a la API.

Practica

Crea la página Portafolio con un Bucle de consulta de Proyectos en cuadrícula. Diseña la plantilla Entrada individual: Proyectos. Abre las DevTools en el listado y busca en cada tarjeta la clase con su disciplina. Prueba la vía 1: activa el archivo y diseña su plantilla. ¿Cuál prefieres y por qué?

Errores frecuentes

Dejar activo Heredar la consulta: en una página salen las entradas de la página, no los proyectos. Olvidar la imagen destacada en algunos proyectos: la cuadrícula queda desigual. Crear una plantilla para todas las entradas cuando solo querías cambiar la de proyectos. No ver el archivo /proyecto/ porque no se activó Tiene archivo (o hay que guardar de nuevo los enlaces permanentes).

WordPress Themes Pro
32

Contenidos, campos y plantillas

En la lección Tipos de contenido personalizados (CPT UI) creaste el tipo de contenido Proyectos y la taxonomía Disciplinas.

Código del tema: <!-- wp:query -->

📘 Teoría

Introducción

En la lección Tipos de contenido personalizados (CPT UI) creaste el tipo de contenido Proyectos y la taxonomía Disciplinas. Ahora toca mostrarlos: una página con el listado de proyectos y una plantilla para cada proyecto. Es la sección central de un portafolio, y hay tres caminos de dificultad creciente.

Tres caminos para la página de portafolio

OpciónCómoQué aprendesDificultad
A · Plugin de galeríaInstalar Visual Portfolio y usar sus bloquesConfigurar un pluginBaja
B · Estructura nativaCPT Proyectos + plantilla de archivo o bloque Bucle de consultaCómo WordPress convierte datos en páginasMedia
C · Dinámico e interactivoB + filtro propio en JavaScript (C.1) o bloque propio con Telex (C.2)Unir el gestor con tu código (páginas 10.3 y 10.4)Alta

Esta página explica la opción B, que es la base de la C.

Vía 1: la plantilla de archivo

Si al crear el tipo de contenido activaste Tiene archivo, WordPress ya tiene una dirección con todos los proyectos: tusitio/proyecto/. Para diseñarla:

  1. Apariencia → Editor → Plantillas → Añadir nueva plantilla → Archivo: Proyectos (el nombre exacto depende del tema).
  2. Dentro verás un bloque Bucle de consulta que ya lista los proyectos. Diseña la tarjeta de cada uno con los bloques de su plantilla interna: Imagen destacada, Título, Extracto, Términos (las disciplinas).
  3. Cambia la disposición a cuadrícula y elige las columnas.
  4. Añade la dirección /proyecto/ al menú como "Portafolio".

Vía 2: un Bucle de consulta en una página

  1. Edita la página Portafolio y añade el bloque Bucle de consulta (Query Loop).
  2. Elige un diseño (por ejemplo, Cuadrícula con imagen).
  3. En la barra lateral, desactiva Heredar la consulta de la plantilla y en Tipo de contenido elige Proyectos. Ordena por fecha o por título y elige cuántos mostrar.
  4. Diseña la tarjeta como en la vía 1.

Las dos vías puntúan igual. La vía 2 te deja escribir una introducción encima del listado; la 1 es la forma "de WordPress" de hacerlo.

La plantilla de cada proyecto

Al pulsar un proyecto se abre con la plantilla Entrada individual o, mejor, con una propia: Plantillas → Añadir nueva → Entrada individual: Proyectos. Diseña una ficha clara:

  • imagen destacada grande (con su texto alternativo);
  • título, disciplinas (bloque Términos) y fecha si aporta;
  • el contenido del proyecto (galería, texto del proceso);
  • enlaces "Proyecto anterior / siguiente" y un botón de vuelta al portafolio.

Cómo elige WordPress la plantilla

WordPress busca de la plantilla más específica a la más general (la jerarquía de plantillas). Para un proyecto suelto:

single-proyecto  →  single  →  singular  →  index

Para el listado de proyectos:

archive-proyecto  →  archive  →  index

Si creas single-proyecto, solo afecta a los proyectos; las entradas del blog siguen con single.

Campos personalizados en la plantilla

Si has guardado datos como el cliente o el año en campos personalizados (lección Tipos de contenido personalizados (CPT UI)), el editor de bloques no los muestra por sí solo. Opciones:

  • Escribirlos en el propio contenido del proyecto (lo más sencillo).
  • Usar un plugin de campos (ACF) que añade bloques o conexiones para mostrarlos (las opciones dependen de la versión).
  • En WordPress recientes, conectar bloques a campos con las Block Bindings (avanzado; disponible desde WordPress 6.5, en septiembre de 2026 todavía en evolución).

No son imprescindibles para empezar.

Preparar los datos para el filtro (opción C.1)

Si vas a programar el filtro, cada tarjeta necesita su disciplina en el HTML para que JavaScript la lea. Dentro del Bucle de consulta, el bloque Términos escribe las disciplinas de cada proyecto, y cada tarjeta lleva clases de WordPress con el tipo y los términos (por ejemplo, disciplina-branding). Inspecciónalo con las DevTools: esa clase hace el papel del atributo data-categoria de un filtro hecho con JavaScript (lección Eventos). En la lección Del gestor a JavaScript: leer datos por API verás la alternativa de pedir los datos a la API.

Practica

  1. Crea la página Portafolio con un Bucle de consulta de Proyectos en cuadrícula.
  2. Diseña la plantilla Entrada individual: Proyectos.
  3. Abre las DevTools en el listado y busca en cada tarjeta la clase con su disciplina.
  4. Prueba la vía 1: activa el archivo y diseña su plantilla. ¿Cuál prefieres y por qué?

Errores frecuentes

  • Dejar activo Heredar la consulta: en una página salen las entradas de la página, no los proyectos.
  • Olvidar la imagen destacada en algunos proyectos: la cuadrícula queda desigual.
  • Crear una plantilla para todas las entradas cuando solo querías cambiar la de proyectos.
  • No ver el archivo /proyecto/ porque no se activó Tiene archivo (o hay que guardar de nuevo los enlaces permanentes).

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com