Sobre este curso
En este curso voy a enseñarte a convertir sitios web estáticos construidos con HTML, CSS y JS, en sitios web dinámicos y 100% administrables por el usuario final. Y esto lo lograrás gracias a la creación de temas de WordPress.
Qué vas a aprender
Empezaremos desde lo más básico, entendiendo qué es un tema, trataremos aspectos muy importantes como la jerarquía de plantillas de WordPress y realizaremos tres proyectos, basados en tres temas de WordPress:
Apollo 1: muy sencillo, para empezar a entender cómo funcionan los temas de WordPress.
Apollo 2: será un tema completo que contará con todas las plantillas necesarias para dirigirse a un público general.
Tema cliente: será un tema que crearemos para un cliente 100% real, donde nos tendremos que adaptar a sus distintas necesidades.
Pero no sólo eso, también aprenderás cosas como:
- Desarrollar un sitio web en local y posteriormente publicarlo en un hosting
- Conocer a fondo la Jerarquía de Plantillas de WordPress
- El manejo de Template Tags
- A utilizar el Loop de WordPress
- Crear todo tipo de plantillas
- Crear distintos formatos de entrada (Post formats)
- Definir zonas de widgets y a desarrollar tus propios widgets
- Permitir la personalización de temas al usuario final (API Customizer)
- Construir temas que sean traducibles y cómo traducirlos
- Utilizar el tema starter Underscores para ahorrarte muchas horas de desarrollo
- Crear nuevos tipos de contenidos (Custom Post Types)
- Añadir campos personalizados (Advanced Custom Fields)
- Incluso utilizaremos el framework Bootstrap 3
Resumiendo, se trata de un curso completísimo que cuenta con 25 horas de contenido en vídeo para que cuando lo hayas finalizado tengas los conocimientos y práctica necesarios para diseñar y desarrollar sitios web WordPress para clientes.
¡Te animo a echar un vistazo al listado de lecciones más abajo y nos vemos dentro!
Requisitos del curso
- Un nivel intermedio de HTML y CSS (requisito obligatorio para seguir el curso sin dificultad)
- Un nivel básico de PHP (realiza el mini curso PHP para WordPress)
- Conocimiento de WordPress a nivel de usuario (entender a la perfección conceptos como entradas, páginas, archivos, etiquetas, categorías…)
- Un nivel muy básico sobre jQuery
- Un editor de código gratuito como Sublime Text
- Una conexión a Internet
- Energía y ganas de comerte el mundo
Módulos
Introducción al curso
Lección
Preparación del entorno de desarrollo
Lecciones
Introducción a los temas de WordPress
Lecciones
La jerarquía de WordPress
Lecciones
Construyendo tu primer tema de WordPress
Lecciones
- ¡Empezamos nueva sección!
- Objetivo
- Maquetación de la plantilla de inicio
- Maquetación de la plantilla de artículo
- Maquetación de la plantilla de página
- Los «Template Tags»
- Preparación del tema
- La cabecera «header.php» y el archivo de funciones «functions.php»
- El pie de página «footer.php»
- La barra lateral «sidebar.php» y el uso de widgets
- El contenido de la página inicial y el Loop de WordPress
- Adaptando la plantilla de artículo
- Adaptando la plantilla de página
Construyendo un tema completo de WordPress
Lecciones
- ¡Empezamos nueva sección!
- Objetivo
- Estructura básica HTML e inclusión de hojas de estilo y scripts
- Cabecera estática – Barra de navegación social
- Cabecera estática – Sección «Hero»
- Cabecera estática – Barra de navegación superior
- Plantilla de inicio estática – Listado de artículos
- Plantilla de inicio estática – Estilos del listado de artículos
- Plantilla de inicio estática – Formatos de entrada «aside»
- Plantilla de inicio estática – Formatos de entrada «quote»
- Plantilla de inicio estática – Formatos de entrada «image»
- Plantilla de inicio estática – Formatos de entrada «link»
- Plantilla de inicio estática – Formatos de entrada «video»
- Plantilla de inicio estática – Paginación
- Barra lateral estática
- Pie de página estático
- Plantilla de artículo estática – Contenido y navegación
- Plantilla de artículo estática – Comentarios
- Plantilla de artículo estática – Formulario de comentarios
- Plantilla de página estática
- Plantilla de archivo estática
- Plantilla de autor estática
- Plantilla de resultados de búsqueda estática
- Plantilla estática de búsqueda cuando no hay resultados
- Plantilla de página no encontrada 404 estática
- Diseño responsive – «media queries»
- Transformación de nuestro diseño en responsive
- Configuración inicial & el «Theme Domain» (slug) del tema
- Cabecera dinámica & inclusión de hojas de estilo
- Cabecera dinámica – El menú superior de un sólo nivel
- Pie de página dinámico & inclusión de scripts
- Pie de página dinámico – El menú inferior multinivel
- Barra lateral dinámica
- Plantilla de inicio dinámica – El Loop de WordPress
- Plantilla de inicio dinámica – La función «get_template_part»
- Post Formats
- Post Formats – «aside»
- Post Formats – «quote»
- Post Formats – «image»
- Post Formats – «link»
- Post Formats – «video»
- Plantilla de inicio dinámica – Paginación
- Plantilla de artículo dinámica
- Plantilla de artículo dinámica – Navegación de entradas
- Plantilla de artículo dinámica – Comentarios
- Plantilla de artículo dinámica – Función de callback
- Plantilla de página dinámica
- Plantilla de archivo dinámica & «Conditional Tags»
- Plantilla de autor dinámica
- Plantilla de resultados de búsqueda dinámica
- Plantilla de página no encontrada 404 dinámica
- Inclusión responsive de vídeos de Youtube y Vimeo
La personalización de temas
Lecciones
- ¡Empezamos nueva sección!
- La personalización de temas
- Proceso para crear una personalización
- Personalizar el color principal
- Personalizar el color principal (hover)
- Personalizar el color secundario
- Personalizar el color de interfaz
- Personalizar el pie de página
- Personalizar redes sociales
- Personalizar la sección hero – background
- Personalizar la sección hero – background position
- Personalizar la sección hero – color del texto
- Personalizar la sección hero – sombreado del texto
Internacionalización de temas
Lecciones
Creación de un Tema de WP para un cliente real
Lección
Fase 1: Maquetación de las plantillas
Lecciones
- Home – Estructura básica
- Home – Barra de navegación
- Home – Portada
- Home – Contenido
- Home – Formulario de suscripción
- Home – Pie de página
- Home – Últimos ajustes
- Libros – Reaprovechando código
- Libros – Portada
- Libros – Listado de no ficción
- Libros – Listado de ficción
- Libros – Últimos ajustes
- Asesoría – Reaprovechando código
- Asesoría – Servicios
- Blog – Reaprovechando código
- Blog – Formulario de suscripción y menú de categorías
- Blog – Listado de artículos
- Blog – Navegación de artículos
- Blog – Barra lateral y widgets
- Blog – Widget About
- Blog – Widget Formulario de suscripción
- Blog – Widget buscar
- Blog – Widget con listas
- Blog – Widget de texto o imagen
- Blog – Taxonomía y resultados de búsqueda
- Single – Reaprovechando código
- Single – Contenido del artículo
- Single – Vídeos responsive
- Single – Pie de entrada
- Single – Compartir en redes sociales
- Single – Últimos retoques
- Page – Reaprovechando código
- Page – Formularios
- Page – Últimos retoques
Fase 2: Creación de las plantillas
Lecciones
- Los temas starter
- Preparando una nueva instalación de WordPress
- Instalando Underscores «_s»
- Traduciendo Underscores con Loco Translate
- Inclusión de los assets
- Cómo usar LESS en WordPress (configuración de Prepros)
- Adaptando los estilos de Underscores
- Cabecera dinámica y menú superior
- Pie de página dinámico y llamada a los scripts
- Pie de página dinámico – menú footer superior
- Pie de página dinámico – menú footer inferior
Plantilla Home: De estática a dinámica
Lecciones
- Creando plantillas de página para uso global
- Cargar una fuente sólo si una plantilla está en uso
- Plantilla de landing page dinámica
- El súper plugin Advanced Custom Fields
- Cabecera dinámica de la landing page con ACF: grupos de campos
- Cabecera dinámica de la landing page: mostrando valores de la BBDD con ACF
Plantilla Libros: De estática a dinámica
Lecciones
Plantilla Asesoría: De estática a dinámica
Lecciones
Plantilla de blog (principal): De estática a dinámica
Lecciones
Creación de widgets
Lecciones
Plantilla de artículo: De estática a dinámica
Lecciones
Otras plantillas
Lecciones
Últimos retoques a nuestro tema y publicación del sitio web
Lecciones
- Menú de navegación social con ACF
- Breve introducción a la plataforma de email marketing Mailrelay
- Formulario de suscripción de las páginas y landing pages: Parte 1
- Formulario de suscripción de las páginas y landing pages- Parte 2
- Formulario de suscripción de las páginas y landing pages- Parte 3
- Formulario de suscripción de la página de blog y los artículos
- Formulario de suscripción del widget
- Formulario de Optin en archive.php y search.php
