Que vamos a construir en este curso
El Primer Proyecto - Sitio Web para un Gimnasio
El Segundo Proyecto - Sitio Web para Pizzeria (GUTENBERG)
El Tercer Proyecto - Sitio Web de la Ciudad de Toronto
El Cuarto Proyecto - Sitio Web para Agencia de Viajes
El Quinto Proyecto - Sitio web con Bootstrap
¿Porqué aprender a crear tus propias plantillas?
Introducción a PHP - Si ya conoces las bases de PHP puedes saltar este capitulo
Bloques de código en PHP
Imprimiendo en pantalla
Creando variables
Condicionales
Arreglos Indexados
Arreglos Asociativos
var_dump y print_r
HTML en PHP y PHP en HTML
Bucle For
Bucle Foreach
Bucle While
Funciones librería standard
Funciones hechas por el usuario
Argumentos en funciones
Template Tags en PHP
Funciones que retornan valores
Operaciones en PHP
SITIO WEB GIMNASIO - Primeros pasos con el Proyecto
Los Diseños que construiremos
El código final del proyecto
Local by Flywheel
Primeros Pasos con el Proyecto
Creando el Theme y los Primeros Archivos
Declarando el Primer Theme
Primeros Pasos con la Jerarquia de Temas
Creando el Loop de WordPress
SITIO WEB GIMNASIO - Creando el Header
Creando el Header
Agregando el Logotipo
Creando un menú de navegación
Mostrando el Menú de Navegación
Habilitando la Hoja de Estilos CSS
Agregando otras hojas de estilos
SITIO WEB GIMNASIO - Primeros pasos con CSS
Agregando los Primeros Estilos
Estilos para encabezados
Agregando Estilos Globales
SITIO WEB GIMNASIO - Trabajando con el Menú de Navegación
Primeros pasos con CSS
Finalizando el CSS para el Menú
Agregando una Animación CSS
Agregando un Menú Móvil
Finalizando el Menú Móvil
SITIO WEB GIMNASIO - Creando el Footer
Mostrando la información en el Footer
CSS para el Footer
SITIO WEB GIMNASIO - Creando la Página de Nosotros
Agregando el Loop a la página de Nosotros
Registrando Nuevos Tamaños de Imágenes
CSS a la página de Nosotros
SITIO WEB GIMNASIO - Creando un Template sin Sidebar
Creando el Nuevo Template
Aplicando el Principio DRY (Don't repeat yourself)
Creando el Resto de Páginas
SITIO WEB GIMNASIO - Creando la Página para Clases
Creando el Template
Que son los Custom Post Types y creando un Plugin
Agregando el Código del Custom Post Type
Agregando Campos Personalizados al Post Type
Agregando unas clases de muestra
Creando una consulta para las Clases
Finalizando el Loop
CSS para las Clases
Finalizando el CSS para las clases
Agregando un degradado a las Clases
SITIO WEB GIMNASIO - Creando el Template para cada clase
Mostrando la Información de la clase
SITIO WEB GIMNASIO - Widgets en nuestro Theme
Creando una Zona de Widgets para el Template
Agregando el Código para crear los widgets
Creando un Plugin para los Widgets
Creando una consulta para las Clases en el Widget
Agregando un Formulario al Widget
Finalizando el Widget
SITIO WEB GIMNASIO - Creando la Galería
Creando la Galería y agregando Lightbox 2
Obteniendo los ID's de las imágenes de la Galería
Mostrando las imágenes
CSS para la galería
Finalizando el CSS de la galería
SITIO WEB GIMNASIO - Creando el Blog
Agregando entradas de ejemplo
Creando el Template y el Loop
Mostrando el Resto de la información
CSS al Blog
Finalizando el CSS del blog
Creando el Template para las categorías
Creando el Template para el autor
Agregando Widgets al Sidebar
Agregando Titulos Dinamicos para mejorar el SEO
SITIO WEB GIMNASIO - Creando la página de Contacto
Agregando un formulario de contacto
CSS al formulario
Agregando un Mapa a la página
Agregando Leaflet
Imprimiendo los valores desde la BD
Mostrando el Pin en el lugar indicado
SITIO WEB GIMNASIO - Creando el Template de la página Principal
Primeros pasos
Creando el Header para la página principal
Agregando la imagen destacada al CSS
CSS al Header
Mostrando la información de bienvenida
Mostrando la información de las áreas
CSS a las áreas
Mostrando las Clases en la página Principal
SITIO WEB GIMNASIO - Agregando el área de Instructores en la página principal
Registrando el Custom Post Type
Mostrando los Instructores
CSS a la sección de instructores
Finalizando la sección de instructores
SITIO WEB GIMNASIO - Creando la sección de Testimoniales
Creando el Post Type y campos de instructores
Agregando bxslider
CSS a los testimoniales
SITIO WEB GIMNASIO - Finalizando la página principal
Mostrando las entradas del blog
Fijando la barra superior al hacer scroll
CSS a la barra fija
SITIO WEB GIMNASIO - Últimos Ajustes al Proyecto
Solucionando el problema con category.php y author.php
Agregando una imagen al theme
SITIO WEB PIZZERIA - Proyecto hecho con Gutenberg
EL PROYECTO FINAL
El código finalizado
WordPress y Gutenberg
Creando el Proyecto
Creando el Tema y Materiales
Creando las páginas y el primer bloque
SITIO WEB PIZZERIA - Creando el Header
Creando el Header
Agregando las Hojas de Estilos
Agregando los primeros estilos
Posicionando el Header
Creando Los Menús de Navegación
Creando el Menú de Navegación
Mostrando el Menú en el Front End
Creando un Menú Responsive
Creando un archivo para los Scripts
CSS para el Menú
CSS para el Menú Responsive
Creando el Menú de Redes Sociales
CSS para el Menú de Redes Sociales
Trabajando con el Footer
Finalizando el Footer
SITIO WEB PIZZERIA - Página de Nosotros
Creando el Template de nosotros
CSS para el Hero
SITIO WEB PIZZERIA - Creando el Blog
Primeros pasos con el Blog
Creando el Loop y algunas entradas
Agregando el Resto del HTML y código PHP
CSS Para el blog
Estilos para el botón de leer más
Agregando Paginación
SITIO WEB PIZZERIA - Sidebar y Widgets
Creando la Zona de Widgets
CSS para los Widgets
SITIO WEB PIZZERIA - Template de Entradas de Blog
Primeros Pasos
Agregando el formulario de Comentarios
Consultando la base de datos de comentarios
CSS para el formulario de Comentarios
Finalizando los comentarios
SITIO WEB PIZZERIA - Primeros pasos para crear un Bloque
Opciones para crear bloques
Primeros pasos creando el bloque
Creando el primer bloque
Registrando el Archivo principal para los bloques
Registrando CSS para Bloques
Registrando los bloques
Creando una Categoria Personalizada
SITIO WEB PIZZERIA - Creando nuestro primer Bloque
Estructura básica de un bloque
Los 7 Pasos para crear un bloque
Colocando el Componente donde lo requerimos
Crear una función para leer el contenido del componente
Registrar un atributo
Extraer el atributo
Guardar los contenidos en el Atributo
Trabajando con el método save()
Repasando los 7 pasos con un nuevo Componente
Extendiendo nuestro bloque con una barra lateral
Aplicando los Colores
Definiendo una paleta de Colores
Permitir al usuario cambiar el color del Texto
Aplicando CSS
Utilizando nuestro bloque
Finalizando el CSS de nuestro bloque
Agregando alineación al Contenido
Creando un Bloque Dinamico
Creando un Plugin para custom post types
Agregando los platillos
Mostrar el Custom Post Type en la WP REST API
Agregar campos a la respuesta de la WP REST API
Agregando la Taxonomia
Agregando la imagen destacada
Registrando un Bloque Dinamico
Creando el Bloque
Consultando la WP REST API
Mostrando las especialidades
Finalizando el HTML de las especialidades
Agregando un Panel para mostrar cierta cantidad de Especialidades
Mostrando cierta cantidad de especialidades
Mostrando las especialidades en el Front End
Agregando el resto del código HTML en el frontend
CSS para el bloque
Leyendo los valores del panel lateral
Agregando un panel para seleccionar la categoria a filtrar
Filtrando las Especialidades
Agregando un Titulo para la sección
Mostrando el Titulo en el Front End
Filtrando por Término
SITIO WEB PIZZERIA - Creando un Bloque para Galerías
Registrando el Bloque
Agregando el MediaUpload para subir imágenes
Almacenando las imágenes en un array
Mostrando las imágenes conforme el usuario las agrega
CSS para la galería
Agregando un botón para eliminar las imágenes no deseadas
Eliminando una imagen del State
Mostrando la galería en el Front End
Añadiendo Lightbox a la galería
SITIO WEB PIZZERIA - Creando el Bloque de hero
Registrando el Bloque
Agregando la funcionalidad para subir imágenes
Leyendo la imagen que sube el usuario
Trabajando con el Texto del Hero
Agregando un Enlace
Utilizando nuestro bloque y viéndolo en el front end
CSS para el Hero
Alineando el Contenido con Gutenberg
Agregando un componente para la altura del Hero
Leyendo y Mostrando la altura
Agregando Soporte Completo al Bloque
Re-utilizando el Bloque de Menu
SITIO WEB PIZZERIA - Creando un Bloque con Imágen y Texto
Registrando el Bloque
Agregando la imagen para el fondo
Trabajando con los Textos
Trabajando con el botón de Leer Más
Agregando la imagen junto al texto
Probando el Bloque
CSS para el bloque
Agregando soporte de ancho completo
Creando un Bloque Re-utilizable
Utilizando un bloque existente
SITIO WEB PIZZERIA - Creando un Bloque que contenga otros bloques
Registrando el Bloque y Primeros pasos
Un poco de CSS para el Bloque
Importando el Componente
Mostrando los valores en el Front end
Como mostrar un shortcode en Gutenberg
Creando un bundle para producción
SITIO WEB PIZZERIA - Ajustes Finales y Lanzamiento
Creando una imagen del Theme
Titulos Dinamicos
Como realizar el Deployment
El 3er Proyecto
Instalando WordPress en Mac
Instalando WordPress en Windows
Creando nuestro tema desde 0
Conociendo la Jerarquia de Temas (Theme Hierarchy) de WordPress
Comenzando a trabajar con los archivos de nuestra primer plantilla
Creando nuestro primer plantilla para Páginas
Creando nuestro Header
Creando nuestro Footer
Creando todas nuestras páginas y haciendo ajustes.
Agregando nuestro logotipo
Agregando la hoja de Estilos CSS y creando nuestro archivo de funciones
Creando los primeros estilos de nuestra página web.
Creando un menú administrable para nuestro sitio WordPress
Editando el CSS de nuestro menú
Creando el Menú en el Footer
Creación de una barra lateral (Sidebar)
Creando una imagen destacada e instalando plugins para desarrollo
Detectar cuando tenemos o no una imagen destacada
Creando una Zona de Widgets
Creando una barra lateral y agregando estilos CSS
Detectando la página actual de forma automática en WordPress
Creando la plantilla para nuestras Entradas de WordPress
Creando una página avanzada para nuestro Blog.
Creando un sitio con funciones avanzadas
Creando un Custom WP_Query para nuestro Blog.
Conociendo más sobre WP_Query
Etiquetas de WordPress para mostrar contenido de un WP_Query
Editando el CSS de nuestro Blog
Creando una plantilla para cada entrada en WordPress
Etiquetas para la plantilla single.php
Editando el CSS de nuestro single.php de WordPress
Creando un Template personalizado para nuestra sección de Consejos.
Creando un Formulario de Contacto y editandolo con CSS3
Creando la página principal de nuestro sitio.
Mostrar los 2 últimos post en la página principal
Editando los estilos CSS de nuestros 2 últimos post en la página principal
Agregando archivos JavaScript a nuestro diseño.
Agregando un Slider para las Entradas (sin plugin)
Creando una plantilla para las categorías.
Creando Titulos Dinámicos para mejor posicionamiento.
Tomando una fotografía principal para nuestro Theme
Utilizando un Starter Theme o Blank Theme para acelerar el desarrollo de Themes
Instalando WordPress desde Cero
Descargando e Instalando HTML5 Blank Theme
Conociendo HTML5 Blank Theme
Conociendo el diseño para este curso
Creando nuestro diseño para una Agencia de Viajes
Creando los primeros ajustes a nuestra plantilla.
Creando todas las páginas para nuestro diseño y el menú.
Editando el CSS de nuestro menú principal
Creando el Footer de nuestro diseño.
Creando los títulos en CSS para nuestras páginas
Viendo las imágenes y archivos para este curso
Instalando Plugins para desarrollo de Themes en WordPress
Agregando una imagen destacada desde Photoshop a WordPress
Creando una imagen destacada avanzada para nuestro sitio web
Editando el CSS para nuestra imagen destacada
Creando la plantilla para la sección de Nosotros
Agregando funcionalidad más avanzada a nuestro Theme
Utilizando el Plugin Advanced Custom Fields para agregar funcionalidad avanzada
Creando nuevos tamaños de imágenes e imprimiéndolas en la plantilla
Creando un efecto Polaroid para las fotografías con CSS3
Creando un Custom Post Type para la sección de Tours
Agregando campos personalizados para el Custom Post Type de Tours.
Cargando viajes para nuestra sección de Tours
Creando una sección y un Custom WP_Query para la sección de Tours
Imprimiendo todos los campos personalizados a nuestra plantilla
Creando los estilos CSS para nuestra sección de Tours
Trabajando con la plantilla para cada Tour
Editando el CSS para la plantilla de cada Tour
Editando el CSS para las Galerias de WordPress
Agregando Lightbox a nuestra plantilla de WordPress
Actualizando a la última versión de Lightbox 2
Detectando la página actual en nuestro menú de navegación
Creando un Custom Post Type para la sección de Testimoniales con código
Creando un Custom Post Type con un Plugin.
Agregando todos los campos para nuestro Custom Post Type de Testimoniales.
Creando la plantilla para nuestros Testimoniales y creando un WP_Query
Editando el CSS de nuestra sección Testimoniales
Creando las Entradas para nuestra sección de Consejos (Blog)
Creando la Plantilla para la sección de Consejos para Viajar
Agregando un Paginador a nuestro blog
Finalizando Consejos con un WP_Query utilizando funciones avanzadas
Imprimiendo los campos extras para nuestro Blog
Editando el CSS para nuestra sección de Consejos
Creando la plantilla para cada Entrada de nuestro blog.
Finalizando nuestra plantilla para las Entradas de nuestro blog
Agregando funcionalidad de Compartir en Redes Sociales para nuestras Entradas
Elaborando consultas en nuestro Footer para mostrar más información
Elaborando una consulta a un Custom Post Type y mostrándola en el Footer.
Editando el CSS de nuestra consulta en el Footer
Elaborando una Consulta a nuestro Blog y mostrándola en el Footer
Agregando imágenes como Widgets al Footer
Agregando un Degradado con CSS3 a nuestro Footer
Agregando un formulario de contacto a nuestro sitio web
Imprimiendo un Shortcode con código
Editando los Estilos CSS de nuestros formularios de Contacto
Creando el template para nuestra página principal
Creando un Slider para nuestra página Principal
Editando el CSS y JS de nuestro Slider.
Mostrando nuestros 3 últimos Tours en la página Principal
Mostrando los 2 últimos consejos en la página principal
Editando el CSS Para nuestras 2 ultimas entradas.
Imprimiendo 2 Testimoniales a nuestra página principal
Dividiendo nuestra página principal en archivos de PHP para fácil mantenimiento
Utilizando un Plugin para poder re-ordenar los slides de nuestro Slider
Incorporando un buscador, conociendo la plantilla Category, Search y Autor
Editando nuestro buscador con CSS3
Agregando una fuente de Google Fonts
Agregando un efecto de CSS3 a nuestro menú
Convirtiendo Nuestro Theme A Mobile First
Agregando un menú de navegación para dispositivos móviles
Cambiando estilos CSS a nuestro menú
Realizando Ajustes a nuestro Header
Ajustando nuestro buscador a dispositivos móviles
Haciendo nuestro Grid Mobile First
Ajustes finales para nuestro Grid
Últimos ajustes para nuestro Theme en Mobile First
Personalizando la pantalla de Login
Viendo el proyecto finalizado
Creando los archivos JavaScript y CSS
Agregando jQuery Vegas
Agregando las imágenes y pasando variables de PHP a JavaScript
Creando el Script de jQuery vegas
Estilos CSS a nuestro Login (Parte 1)
Estilos CSS a nuestro Login (Parte 2)
Finalizando nuestro Login
Creando una Plantilla con Twitter Bootstrap
Lo que vamos a Construir en esta sección
Instalando WordPress
Cargar el Theme y Entradas para este Proyecto
Mostrando los Archivos PSD para esta sección
Primeros pasos en el Desarrollo del Theme
Creando nuestro theme
Creando el archivo header.php y functions.php
Cargando Librerias a nuestro Theme
Agregando el logotipo y HTML a nuestro header
Creando el Menú Principal
Creando un Menú Responsive
Escribiendo los estilos CSS nuestra navegación
Imprimiendo Imagen destacada a nuestro header.php
Imprimiendo el Titulo a la página principal
Estilos a nuestros titulos de la página
Agregando fuentes de Google Fonts
Creando la página Principal
Haciendo un Query para imprimir las últimas entradas
Finalizando las últimas entradas de nuestra página frontal
Finalizando últimas Entradas con CSS
Creando un Menú de Categorías
Agregando Font Awesome a nuestro Theme
Finalizando el menú de categorías con CSS
Creando el Footer
Creando una Zona de Widgets en el Footer
Imprimiendo un Menú de Redes Sociales en el Footer
Agregando más parámetros a nuestro Menú de Redes Sociales
Estilos en el Footer
Imprimiendo Iconos en el Menú de Redes Sociales
Trabajando con Secciones Internas del Theme con Twitter Bootstrap
Creando un template para las páginas con sidebar
Ajustando el Header para imprimir el titulo de las páginas internas
Estilos a nuestra página con Sidebar
Agregando Contenido al Sidebar
Creando una página para el Blog
Template para las entradas de Blog
Creando el Template de Categorias
Creando un Template para páginas sin columnas
Estilos para el formulario de Contacto
Últimos Ajustes y Plantilla Final