4.67 de 5
4.67
163 valoraciones en Udemy

Desarrollo de Temas de WordPress con Bootstrap 4 y CMB2

Convierte tus Diseños de Bootstrap en Temas de WordPress para crear Sitios Web Increibles y 100% Dinámicos con WP y CMB2
Profesor:
Juan Pablo De la torre Valdez
671 Estudiantes apuntados
Spanish [Auto-generated]
Transformar un diseño en Photoshop, Adobe XD, JPG o Sketch en código de Bootstrap para crear sitios web responsive
Tomar ese mismo diseño y convertirlo en un Theme 100% dinámico de WordPress
Agregar y escribir código más avanzado para tus themes de WordPress
Integrar una librería como CMB2 en tu Theme con opciones avanzadas para venderlo
Crear opciones del Theme para que tu o tus clientes puedan cambiar su apariencia del sitio web sin escribir código

En este curso aprenderás a crear Themes 100% dinámicos con WordPress de tus diseños en Bootstrap.

Primero estaremos creando el diseño en Bootstrap, nuestro cliente nos ha entregado 9 diseños con la apariencia de como debe quedar el sitio web y estaremos utilizando Bootstrap para crear un sitio web Responsive, utilizaremos los menús, el nuevo grid de Bootstrap hecho con Flexbox, Cards, Formularios, las classes de Bootstrap y mucho más, si eres de las personas que crean sus diseños con AdobeXD, Photoshop o Sketch y cualquiera de estas heramientas, podrás seguir el mismo enfoque para convertir tu diseños a bootstrap.

Una vez que los archivos con los Templates esten listos, estaremos creando el theme de WordPress, pasaremos los archivos con código estático a código dinámico de WordPress, aprenderás a utilizar las funciones nativas de WordPress para crear headers, menús, barras laterales, widgets, mostrar el contenido, imágenes destacadas y más.

Agregaremos código para sacar el máximo provecho a nuestros templates y reutilizar lo más posible nuestros archivos.

Finalmente estaremos incorporando temas más avanzados, agregaremos CMB2, una librería desarrollada para extender los campos por default que convierte a WordPress en un CMS real, con más de 30 campos, CMB2 nos dará opciones más avanzadas para crear un theme 100% dinamico y flexible.

Veremos temas más avanzados tales como crear Widgets, Post Types, relacionar post types, CMB2, Opciones del Tema y Mucho más.

Un curso de WordPress que va desde lo básico hasta temas más avanzados paso a paso

Introducción al Curso y Primeros Pasos

1
Lo que Vamos a Construir en este Curso

Veamos lo que construiremos a lo largo de este curso

2
WordPress y Bootstrap para Desarrollo Web

WordPress y Bootstrap siguen siendo excelentes opciones en 2018 y 2019, sobretodo para personas que buscan crear algo rápido en poco tiempo

3
Plan para el Curso

Veamos el Plan que vamos a seguir para este curso

4
Los Materiales del Curso

En este video veremos los materiales para descarga

5
Ambiente de Desarrollo y Editor

Estaré utilizando VSCode por el resto del curso, además de una extensión llamada Live Server, veamos como utilizarla

6
El código Fuente del Curso

Creando el Diseño con Bootstrap

1
Primeros pasos con el Proyecto

Vamos a comenzar este proyecto

2
Creando el Header

Vamos a crear el Header de este proyecto

3
Creando el Menú Principal

Veamos como crear un menú responsive en nuestro proyecto

4
Creando el Footer

Veamos como crear el Footer para nuestro sitio web

5
Estilos al Header y al Footer

Veamos como darle estilos al Header y al Footer

Creando la Página de Nosotros

1
Creando la página de Nosotros

Vamos a comenzar a crear la página de Nosotros

2
Estilos a la página de Nosotros

En este video veremos los estilos para la página de Nosotros

3
Agregando un gráfico para los encabezados

Mostraremos un gráfico después de cada encabezado, veamos como hacerlo

4
Agregando los iconos de la parte inferior

Veamos como cargar los iconos de la parte inferior

Creando el Blog

1
Creando el Blog

Vamos a comenzar con la página de Blog

2
Creando las Entradas del Blog

Vamos a crear el contenido de las entradas

3
Estilos a las Entradas del Blog

Vamos a escribir el CSS de las entradas

4
Creando el Sidebar del Blog

En este video crearemos el sidebar del blog

5
Estilos CSS al Sidebar

Vamos a agregar CSS al Sidebar

Creando la Página de Entradas del Blog

1
Creando la página para las Entradas

Veamos como crear el diseño para las Entradas

Creando la Página de Próximas Clases

1
Creando la página para las Próximas Clases

Veamos como crear la página de las próximas clases

2
Creando las Clases

Utilizaremos el Card para las Clases

3
Estilos a las Clases

Vamos a escribir un poco de CSS para las clases

Creando la Página para cada Clase

1
Creando la página de las Clases

Veamos como crear la página para cada clase

2
Finalizando el Contenido

En este video vamos a finalizar el Contenido

3
Estilos a la página de Clases

Vamos a darle estilos a la página de Clases

Creando la página de la Galería de Imágenes

1
Creando la página de la Galería

En este video veremos como crear la galería

2
Agregando las Modales para cada Imagen

Veamos como agregar las imágenes Modal

Creando la página de Contacto

1
Creando la página de Contacto

Vamos a crear una página de Contacto

Creando la página de Inicio

1
Creando la página de Inicio

Vamos a crear la página de Inicio

2
Creando los Contenedores de las imágenes principales

Vamos a crear los contenedores de las imágenes

3
Creando la sección de las Clases

Vamos a crear el listado de clases

4
Creando la sección de Licenciatura

Veamos como crear la sección de licenciatura

Creando el Theme o Tema de WordPress

1
Instalando WordPress Localmente

Vamos a instalar WordPress Localmente

2
Creando los primeros Archivos de nuestro Theme

Veamos como crear los primeros archivos de nuestro Theme

3
Cargando la hoja de estilos de bootstrap

Vamos a cargar la hoja de estilos de bootstrap

4
Creando el Header y agregando nuestra hoja de estilos

Vamos a crear el Header

5
Creando el Footer y cargando los Scripts

En este video vamos a cargar el Footer y los Scripts

6
Creando un Menú en WordPress

Veamos como crear un Menú con WordPress

7
Mostrando el Menú en el Header

Mostrando el Menú en el Header

8
Agregando una función para hacer compatible el menú de bootstrap con WP

Veamos como hacer nuestro Menú compatible con Bootstrap

9
Enlazando el Logotipo en el Header

Veamos como agregar nuestro logotipo al header

Creando el Template de Inicio

1
Creando el template de Inicio

Veamos como crear el Template de Inicio

2
¿Qué es CMB2?

Veamos que es CMB2

3
Instalando CMB2 en nuestro Theme

En este video vamos a instalar CMB2 en nuestro tema

4
Creando los campos para la página Principal

Veamos como crear los campos de CMB2 para la página Principal

5
Agregando el Resto de los Campos

Veamos como agregar el resto de los campos

6
Cargando Información en nuestros Campos recién creados

Veamos como cargar información dentro de nuestros campos recién creados

7
Mosrando los valores de los campos en la página principal

Veamos como mostrar los valores que tenemos en los metaboxes

8
Agregando campos para la parte inferior

Veamos como agregar los campos de la parte inferior

9
Mostrando los valores de los campos de la parte inferior

Vamos a mostrar los campos de la parte inferior

Creando el Template de Páginas en WordPress

1
Veamos como crear el template de las páginas

Veamos que es la jerarquia de temas y crear más templates

2
Cargando el Contenido para las páginas

Veamos como cargar contenido a las páginas

3
Agregando Soporte a Imágenes Destacadas

Veamos como añadir soporte a imágenes destacadas

4
Mostrando la Imagen Destacada

Veamos como mostrar la imagen destacada

5
Mostrando un Diseño Distinto cuando no hay Imagen Destacada

Veamos como mostrar un diseño diferente cuando el usuario no sube una imagen

6
Detectando la Página Actual en el Menú Principal

Veamos como detectar la página actual

Creando un Template con Iconos

1
Creando el Template

Veamos como crear un Template con Iconos

2
Agregando el Grupo de Iconos

Veamos como agregar un grupo de Iconos

3
Cargando Información en los Campos

Vamos a cargar información en los campos

4
Mostrando los Valores de los Metaboxes (PARTE 1 / 2)

Veamos como mostrar los valores de los Metaboxes

5
Mostrando los Valores de los Metaboxes (PARTE 2 / 2)

Vamos a finalizar mostrando los valores de los Metaboxes

6
Mostrando los Iconos en la página Principal

Vamos a reutilizar los iconos en la página principal

Creando el Template para el Blog

1
Cargando las Entradas de Muestra

Veamos como cargar algunas entradas al blog

2
Mostrando el Contenido de las Entradas

Veamos como mostrar el contenido de las entradas

3
Finalizando el Loop para mostrar las Entradas

Vamos a finalizar nuestro Loop

4
Agregando un Campo Extra para el Blog

Veamos como agregar un campo para el blog

5
Agregando un Paginador para el Blog

Veamos como agregar un paginador al blog

6
Creando el Template para las Entradas

Cada entrada tendrá su propio template, veamos como crearlo

7
Agregando el Template de Comentarios

Veamos como crear un template para los comentarios

8
Escribiendo el Código para Mostrar los Comentarios

Veamos como escribir el código para hacer la consulta hacia los comentarios

9
Estilos al Formulario de Comentarios

Veamos como darle estilos al formulario

Creando el Template para las Clases

1
Creando un Custom Post Type para Clases y uno para Instructores

Veamos como crear un custom post type para las clases

2
Cargando los Instructores

Vamos a cargar algunos instructores!

3
Agregando los Campos para las Clases de Cocina

Veamos como agregar los campos para las calses

4
Agregando más campos para fechas y seaprador

Vamos a añadir un campo para las fechas

5
Agregando el Resto de los Campos

Veamos como añadir el resto de los campos

6
Agregando un Campo para Relacionar Contenido

Veamos como relacionar contenido en CMB2

7
Cargando algunas Clases de Muestra

Vamos a cargar algunas clases de muestra

8
Agregando Columnas en el Administrador

Veamos como agregar más columnas al administrador

9
Realizando un Loop para mostrar contenido de la página

Veamos como mostar el Contenido de la página

10
Comenzando a Escribir la consulta para mostrar las clases

Veamos como comenzar a escribir la consulta para mostrar las clases

11
Mostrando las clases en la página

Veamos como mostrar las clases en su respectiva página

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 de 5
Calificaciones 163

Calificación Detallada

5 estrellas
101
4 estrellas
46
3 estrellas
13
2 estrellas
2
1 estrellas
1
1f95034a344584ec5b80e29a19ecec50
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

9 horas de video online
Acceso sin limites
Acceso desde Móvil y Smart TV
Certificado de finalización

Newsletter

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad