• Ir a navegación principal
  • Ir al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Cursos
  • Tutoriales
  • Directos
  • Acceder
  • Suscríbete

Diseño y desarrollo de temas de WordPress

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

  • Consejos sobre cómo seguir este curso

Preparación del entorno de desarrollo

Lecciones

  • ¡Empezamos nueva sección!
  • Instalación del servidor local MAMP
  • Instalación local de WordPress
  • Instalación de MAMP para usuarios de Windows
  • Utilizar XAMPP en lugar de MAMP
  • Editor de Código

Introducción a los temas de WordPress

Lecciones

  • ¡Empezamos nueva sección!
  • Qué son los temas, qué tipos existen y dónde encontrarlos
  • Estructura de un tema
  • Documentación oficial y dónde encontrar ayuda

La jerarquía de WordPress

Lecciones

  • ¡Empezamos nueva sección!
  • Qué son las plantillas
  • El viajero y el diseñador
  • Entendiendo el esquema de la jerarquía
  • Tipos de plantillas
  • Plantillas de artículos
  • Plantillas de páginas
  • Plantillas de página de inicio
  • Plantillas de archivo
  • Más plantillas

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

  • ¡Empezamos nueva sección!
  • Qué es la Internacionalización y por qué es importante
  • Preparando el tema para que sea internacionalizable
  • Funciones de internacionalización
  • Uso del plugin «Loco Translate» para generar las traducciones

Creación de un Tema de WP para un cliente real

Lección

  • ¡Empezamos nueva secció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

  • Creando plantillas de un sólo uso
  • Cabecera dinámica de la plantilla de libros
  • El súper plugin Custom Post Types UI
  • Creando el CPT Libro
  • Usando ACF con el nuevo tipo de contenido Libro
  • El Loop de WordPress con el CPT Libro

Plantilla Asesoría: De estática a dinámica

Lecciones

  • Creación de la plantilla Asesoría
  • Cabecera dinámica de la plantilla de asesoría
  • Creando el CPT Servicio
  • Usando ACF con el nuevo tipo de contenido Servicio
  • Mostrando los servicios con el Loop de WordPress

Plantilla de blog (principal): De estática a dinámica

Lecciones

  • Cabecera dinámica de la plantilla principal
  • Loop de WordPress cuando no hay entradas
  • Entradas dinámicas y el template part «content.php»
  • Menú de categorías dinámico
  • Paginación del blog
  • Registrando la barra lateral

Creación de widgets

Lecciones

  • Widgets por defecto
  • Widget de búsqueda personalizado
  • Corrección del formulario searchform.php
  • Widget About – Constructor
  • Widget About – Formulario
  • Widget About – Guardar en base de datos
  • Widget About – Mostrando en el frontend
  • Widget para mostrar Banners
  • Widget Optin – Parte 1

Plantilla de artículo: De estática a dinámica

Lecciones

  • Dinamizando la plantilla de artículo
  • Plantilla del detalle de un artículo «content-single.php»
  • Crea tu primer shortcode
  • Vídeos responsivos en el contenido
  • Compartir en redes sociales
  • Comentarios y respuestas de Underscores
  • Comentarios – Formulario

Otras plantillas

Lecciones

  • Plantilla de Página
  • Formulario de contacto
  • Plantilla de Archivos
  • Plantilla de Resultados de Búsqueda
  • Plantilla de Página no encontrada o Error 404

Ú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

Publicación del sitio web y entrega al cliente

Lecciones

  • Publica tu sitio web WordPress en un hosting nuevo
  • Migra tu tema de WordPress a un sitio web existente
  • Enseña a tu cliente a gestionar su nuevo sitio
  • Despedida

Introducción al Web Hosting

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

se ha unido a .

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Mostrar detalles
Nombre Proveedor Propósito Duración
_ga Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 2 años
_gat Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para limitar el porcentaje de solicitudes. 1 minuto
_gid Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 24 horas
Política de cookies

Más información sobre nuestra política de cookies