Este manual presenta un estilo similar al de los dos primeros volúmenes de la colección de “Manuales técnicos de WordPress”, destacando que se continúa el desarrollo guiado del sitio web del zoológico mediante la creación de las páginas de “Noticias”, “Contacto” y “Horarios y Entradas”.
Este material está especialmente orientado al alumnado y profesorado de Formación Profesional relacionado con el desarrollo de aplicaciones web y otras enseñanzas vinculadas al ámbito de la informática. Constituye el tercer volumen de una colección de manuales técnicos de prácticas guiadas orientados al aprendizaje y uso de WordPress en entornos profesionales y educativos.
Índice
1.-Creación de la página de “Noticias”
1.1.-Crear las “Entradas” (las noticias reales)
1.2.-Conectar la página de “Noticias” al blog
1.3.-Cambiar tipo de página para “Noticias”, en caso de querer editarla y añadir nuevos bloques
1.4.-Hacer que la página de “Noticias” muestre las “Entradas” que tenemos
1.5.-Crear Carrusel de noticias Destacadas
1.6.-Mejorar los estilos de las columnas donde se muestran las noticias
1.6.1-Convertir las noticas en tarjetas. Estilo “Cards”
1.6.2-Mejorar los estilos de las “Cards” de noticias
1.7.-Hacer que las noticias largas no muestren todo su contenido, sino que muestren un extracto y “leer más…”
1.8.-Resultado Final de la página de “Noticias”
2.-Creación de la página de “Contacto”
2.1.-Cabecera de la página con Título y texto introductorio
2.1.1-Mejorar con estilos CSS la cabecera de la página
2.2.-Crear las tarjetas de información
2.2.1-Mejorar con estilos CSS de las tarjetas de contacto
2.3.-Crear el Formulario de Contacto
2.3.1-Crear el formulario usando un plugin gratuito
2.3.2-Crear el bloque donde vamos a insertar el formulario de contacto
2.3.3-Mapa de Google a la derecha del formulario de Contacto
2.4.-Mejorar los estilos de la página
2.4.1-Insertamos el código CSS
2.5.-Aspecto final de la página de Contacto
3.-Creación de la página de “Horarios y Entradas”
3.1.-Sección 1: Imagen grande + título de la página + botón
3.2.-Sección 2: Horarios de apertura
3.2.1-Instalación del plugin oficial de Font Awesome
3.2.2-Creación de la información sobre horarios
3.3.-Sección 3: Entradas y precios
3.3.1-Creación del contenedor principal
3.3.2-Creación del título
3.3.3-Creación del bloque con 3 columnas
3.3.4-Creación de la primera tarjeta (card)
3.3.5-Creación del resto de las tarjetas de entradas
3.3.6-Resultado final de la sección de Entradas y Precios
3.4.-Sección 4: Ventajas de la visita al zoológico
3.4.1-Crear el contenedor
3.4.2-Creación de las 4 columnas dentro del contenedor
3.4.3-Estilos CSS
3.4.4-Resultado final de la sección de Ventajas
3.5.-Sección 5: Actividades destacadas y preguntas frecuentes
3.5.1-Crear el contenedor principal
3.5.2-Crear la columna derecha de “Preguntas frecuentes”
3.5.3-Crear la columna izquierda de “Actividades destacadas”
3.5.3.1-Instalación del plugin “Spectra”
3.5.3.2-Creación del carrusel de Actividades destacadas
3.5.4-Estilos CSS
3.5.5-Resultado final de esta sección
3.6.-Aspecto final de la página de “Horarios y Entradas”
Objetivos y temas principales
El objetivo principal de esta obra es guiar al lector en el desarrollo técnico, diseño y configuración de páginas informativas y de servicio dentro de un sitio web creado con WordPress. A través de un proyecto práctico centrado en un zoológico ficticio, se busca que el estudiante adquiera competencias reales en la gestión de contenidos y personalización avanzada del CMS.
- Diseño y maquetación avanzada de páginas web con el editor de bloques de WordPress.
- Implementación de funcionalidades dinámicas como carruseles de noticias y formularios de contacto.
- Personalización visual exhaustiva mediante el uso de CSS adicional y clases personalizadas.
- Integración de plugins externos para mejorar la interactividad y la experiencia del usuario.
- Optimización de estructuras de datos para mostrar información jerárquica como horarios y precios.
Extracto del libro
1.6.2-Mejorar los estilos de las “Cards” de noticias
Los pasos a seguir son:
Accedemos a la opción: Apariencia – Editor.
Pulsamos en: Estilos – CSS Adicional
En el recuadro que se muestra, colocamos los siguientes estilos CSS:
.card-noticia {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.9);
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-noticia:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
/* Hace que todas las cards tengan la misma altura */
.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
align-items: stretch;
}
/* La imagen se adapta y queda uniforme */
.card-noticia .wp-block-post-featured-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 12px;
}
Resumen de los capítulos
1.-Creación de la página de “Noticias”: Este capítulo se centra en transformar una página de blog estándar en un diseño personalizado tipo "card" para mostrar las entradas de noticias del zoológico, incluyendo un carrusel destacado.
2.-Creación de la página de “Contacto”: Se detalla el desarrollo de una sección de contacto profesional que integra tarjetas de información, un formulario generado con un plugin y un mapa de ubicación interactivo.
3.-Creación de la página de “Horarios y Entradas”: Este extenso capítulo guía en la construcción de una página compleja que incluye horarios, precios desglosados en tarjetas de diseño, ventajas del servicio y un área de preguntas frecuentes mediante un sistema tipo acordeón.
Palabras clave
WordPress, Diseño Web, CMS, CSS Adicional, Plugins, Smart Slider 3, Contact Form 7, Font Awesome, Spectra, Maquetación, Responsive, Entradas, Bloques, Tarjetas, Zoológico Ficticio
Preguntas frecuentes
¿Cuál es el propósito fundamental de esta obra?
El propósito es servir como una guía práctica y técnica para que alumnos de Formación Profesional y entusiastas del desarrollo web aprendan a crear páginas informativas y de servicio dentro de un ecosistema WordPress, utilizando un proyecto real como caso de estudio.
¿Qué temáticas principales se abordan en el manual?
Se cubren aspectos como la creación de entradas de blog personalizadas, el uso de CSS para modificar el estilo visual de los bloques de WordPress, la integración de mapas de Google, la configuración de formularios de contacto y la creación de secciones con diseño adaptativo.
¿Cuál es el objetivo de desarrollo final?
El objetivo es que el lector sea capaz de construir un sitio web completo para un zoológico ficticio, con secciones funcionales como noticias, contacto y venta de entradas, aplicando técnicas profesionales de diseño.
¿Qué metodología de enseñanza utiliza el autor?
El manual adopta un enfoque basado en proyectos, donde cada funcionalidad se construye mediante procedimientos secuenciales paso a paso, acompañados de capturas de pantalla y ejemplos de código.
¿Qué temas se tratan en el cuerpo principal del manual?
El grueso del libro está dedicado al desarrollo técnico detallado de tres páginas clave: Noticias, Contacto y Horarios/Entradas, incluyendo la personalización de estilos CSS para cada una de estas secciones.
¿Qué palabras clave definen mejor esta publicación?
Palabras clave como WordPress, Diseño Web, CMS, CSS Adicional, Plugins, Maquetación y Responsive son las que mejor caracterizan los contenidos técnicos de esta guía.
¿Cómo se consigue que las entradas de noticias tengan un aspecto visual profesional?
Se logra mediante la creación de una clase CSS personalizada llamada "card-noticia", que permite aplicar bordes redondeados, sombras, efectos "hover" y una disposición uniforme mediante el bloque "Query Loop".
¿De qué forma se integran iconos personalizados en el diseño del sitio?
Se utiliza el plugin oficial "Font Awesome", el cual se instala en WordPress para permitir la inserción de iconos vectoriales SVG en cualquier parte del sitio mediante bloques HTML personalizados, garantizando una visualización consistente.
¿Cómo se gestionan las preguntas frecuentes en el sitio web?
Se implementa una sección de "acordeón" utilizando bloques nativos de WordPress de tipo "detalles" y aplicando clases CSS ("faq-item") para controlar el diseño, la interacción de apertura/cierre y el estilo de las respuestas.
- Citation du texte
- Antonio Martin (Auteur), 2026, Manual técnico de WordPress: creación guiada de páginas informativas y de servicio para un sitio web, Munich, GRIN Verlag, https://www.grin.com/document/1741417