Cómo crear un tema personalizado de WordPress desde cero

Cómo crear un tema personalizado de WordPress desde cero

Creamos un tema de WordPress desde cero construyéndolo a partir de un diseño básico. Se cubrirá todo el proceso, desde la instalación de WordPress hasta la configuración de una plantilla de tema y su puesta en marcha. Esto también incluye aspectos de WooCommerce y comercio electrónico que también abordaré mientras construimos el HTML, CSS y JS.

00:00:00 - Introducción

00:02:00 - Instalación de WordPress y nuestro Tema Personalizado

00:10:30 - Configuración de las Carpetas y Menús del Sitio Web de WordPress

00:15:50 - Encabezado

01:05:04 - Llamada a la Acción en la Página de Inicio

01:29:55 - Banner de Inicio

01:49:40 - Oferta Especial de Inicio

02:14:40 - Productos de WooCommerce en la Página de Inicio

02:53:30 - Sección de Círculos en la Página de Inicio

03:07:36 - Testimonios en la Página de Inicio

03:12:39 - Formulario de Contacto en el Pie de Página de Inicio

03:31:55 - Página Interna de WordPress

03:53:33 - Artículos de Noticias del Blog

04:17:30 - Página de Contáctanos

04:30:20 - Categorías del Blog

04:58:45 - Configuración de WooCommerce

05:13:05 - Producto de WooCommerce

05:58:12 - Producto de Variación de WooCommerce

06:16:00 - Búsqueda de Variación de Producto JS Personalizado

07:20:13 - Listado Dinámico de Productos de WooCommerce en la Página de Inicio

07:31:35 - Listado Dinámico de Búsqueda de Ecommerce en el Encabezado

08:52:30 - Conclusión

Archivos y Recursos de Diseño UI de Figma:

Esta fue solo la parte 1 de este diseño de Sitio Web de WordPress eCommerce. En la parte 2, donde personalizaremos otros aspectos de este sitio web, incluyendo las Páginas de Carrito y Pago.

Parte 1: https://youtu.be/cLhnubqavDg

Parte 2: https://youtu.be/fxaeY0J5pTw

Parte 3: https://youtu.be/WC4v4EjkUGk

Parte 4: https://youtu.be/8TOIZVLCZiE

Este tutorial de WordPress también cubrirá algunos de los elementos de javascript y PHP que te ayudarán a saber cómo hacer un sitio web con programación y codificación básica. Si disfrutas de los tutoriales de diseño web y buscas videos de WordPress para principiantes como este, estos son parte de una serie que hago sobre cómo crear un sitio web de WordPress e instalar temas de WordPress, y puedes revisar algunas de las otras listas de reproducción en mi canal.

¡Aprende Diseño para Desarrolladores!

Un libro que he creado para ayudarte a mejorar la apariencia de tus aplicaciones y sitios web.

📘 Enhance UI: https://www.enhanceui.com/

No dudes en seguirme en:

🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog

💬 Discord: https://discord.gg/6gmmFvxkD7

💸 Patreon: https://www.patreon.com/adriantwarog

Software y Descuentos:

🚾 Webflow: https://webflow.grsm.io/adrian

🌿 Envato: https://1.envato.market/yRZjz2

🌿 Envato Elements: https://1.envato.market/LP0OJZ

🔴 Elementor: https://elementor.com/adrian/?ref=23140

✖ Editor X: https://www.editorx.com/adrian-twarog

Equipo de Computadora:

⬛ Monitor: https://amzn.to/3f9DOQI

⌨ Teclado: https://amzn.to/3eA5UFD

🐁 Ratón: https://amzn.to/3xVJO8l

🎤 Micrófono: https://amzn.to/3hgCfms

📱 Tableta: https://amzn.to/3ewt7sa

💡 Iluminación: https://amzn.to/3vOZeZY

💡 Iluminación Clave: https://amzn.to/3f6qP2f

Equipo de Cámara:

📷 Cámara: https://amzn.to/3uCv4J9

📸 Lente Principal: https://amzn.to/3vT6wMm

📸 Lente Secundario: https://amzn.to/3tyqWIX

🎥 Cámara Secundaria: https://amzn.to/3o2zCGi

🎙 Micrófono de Cámara: https://amzn.to/33tCz9l

🎞 USB a HDMI: https://amzn.to/33yW9RE