Git es un sistema de control de versiones que permite acceder a un histórico de todas las modificaciones en el código, pudiendo trabajar tanto individualmente en un entorno local como en equipo de manera inteligente y rápida. En el taller aprenderás cómo configurar un entorno de desarrollo para crear un tema WordPress, cuáles son los aspectos fundamentales para la creación de temas y qué ventajas te ofrece Git y cómo puede mejorar tu flujo de trabajo. Conoceremos los principales comandos de Git y cómo utilizar alguna de las interfaces gráficas multiplataforma que existen para su gestión. Daremos una serie seguir de pautas y buenas prácticas para aprovechar todo su potencial y disfrutar de una experiencia única de trabajo colaborativo contribuyendo a proyectos de otros desarrolladores/diseñadores o compartiendo tus propios proyectos.

1. Creación de un Tema
colaborativo usando Git
Franken Pérez Front-End Developer @frankenperez

2. Creación de Temas WordPress
Por qué necesito un control de versiones
Fundamentos de Git
Temas WordPress
Cómo es un tema
Templates
Estilos y Funciones
Buenas prácticas

3. Franken Pérez
Fron-End Developer
UX Designer
Trainer
github.com/frankenperez

4. Antes de empezar…
Sigue los pasos
para preparar tu entorno de desarrollo
goo.gl/85jUVy

5. Creación de un Tema colaborativo
usando Git
Por qué necesito
un control de versiones

6. Control de cambios

7. Copia de seguridad

8. Optimización

9. Creación de un Tema colaborativo
usando Git
Fundamentos de Git

10. Qué es Git
Sistema de control de versiones distribuido.
Conjunto de instantáneas de los archivos a lo largo del tiempo
Hash SHA-1. Cadena de 40 caracteres hexadecimales (0-9 y a-f)
calculada en base a los contenidos del archivo
24b9da6552252987aa493b52f8696cd6d3b00373

11. Creando mi repositorio
git init git clone

12. Creando mi repositorio

13. Las 4 áreas
Repositorio
Local
Contiene los
metadatos y la
base de datos
de objetos de
tu proyecto

14. Las 4 áreas
Repositorio
Local
Repositorio
Remoto
Local Remoto
Contiene las
versiones de tu
proyecto
alojadas en
algún servicio
“en la nube”
Contiene los
metadatos y la
base de datos
de objetos de
tu proyecto

15. Las 4 áreas
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
Local Remoto
Copia de una
versión de tu
proyecto en la
que realizas
modificaciones
Local Remoto
Contiene las
versiones de tu
proyecto
alojadas en
algún servicio
“en la nube”
Contiene los
metadatos y la
base de datos
de objetos de
tu proyecto

16. Las 4 áreas
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
Local Remoto
Almacena la
información
sobre las
modificaciones
que irán en tu
próxima
confirmación
Copia de una
versión de tu
proyecto en la
que realizas
modificaciones
Contiene las
versiones de tu
proyecto
alojadas en
algún servicio
“en la nube”
Contiene los
metadatos y la
base de datos
de objetos de
tu proyecto

17. Las 4 áreas
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
Almacena la
información
sobre las
modificaciones
que irán en tu
próxima
confirmación
Contiene los
metadatos y la
base de datos
de objetos de
tu proyecto
Copia de una
versión de tu
proyecto en la
que realizas
modificaciones
Estado:
Modificado
Estado:
Preparado
Estado:
Confirmado
Contiene las
versiones de tu
proyecto
alojadas en
algún servicio
“en la nube”
Local Remoto

18. Las 4 áreas
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo

19. Comandos básicos
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
git clone

20. Comandos básicos
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
git add
git rm
git status

21. Comandos básicos
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
git commit
git checkout
git commit --amend

22. Comandos básicos
Área de
Preparación
Repositorio
Local
Repositorio
Remoto
Directorio de
Trabajo
git push
git fetch
git pull

23. Interfaz Gráfica Git
SmartGit
SourceTree
GitKraken
GitHub Desktop

24. Recursos sobre Git
Pro Git Book
Git Reference Manual
Visual Git Cheatsheet
Visualizing Git Concepts

25. Creación de un Tema colaborativo
usando Git
Fundamentos para la creación
de temas WordPress

26. Qué es un Tema

27. Qué requiere un tema
style.css index.php

28. Templates
Determinan cómo se muestra nuestro sitio, aplicándose a una
única página, a una sección a un conjunto de páginas.
• Template Tags. Funciones específicas que podemos utilizar
dentro de cada Template para mostrar distinto contenido:
the_title() o the_content().
• Template Hierarchy. Establece la jerarquía que utilizamos a la
hora de aplicar una plantilla a una determinada página.

29. Jerarquía de Templates

31. Estilos
Main Stylesheet: style.css
Basic Structure:
/*
Theme Name:
Theme URI:
Author:
Author
Description:
Version:
License:
License URI:
Text Domain:
Tags:
*/

32. Funciones
Theme Functions: functions.php
Añade funcionalidades específicas a nuestro tema.
Podemos emplear WordPress hooks, habilitar funcionalidades
con add_theme_support y definir otras funciones concretas.
Functions.php versus Plugins

33. Funciones más útiles
Theme Support: add_theme_support
Navigation Menus: register_nav_menus
Text Domain: functions.php
Theme Setup: functions.php

34. Creación de Temas para
WordPress
Desarrollo de un tema propio y
Buenas Prácticas
Fran Pérez Gómez Front-End Developer at Accenture @frankenweb

35. Buenas Prácticas y Recomendaciones
Filosofía DRY
Arquitectura
Estilos
Scripts
Translation Ready
Otros
fr

36. DRY en WordPress
Funciones de nuestro tema: core, custom, compatibilidad,…
Template Parts: sidebar, articles, events, products, gallery, etc.
Widgets
get_header(), get_sidebar(), get_footer()
Condicionales y Bucles
Action hooks

37. Estilos
Emplear: wp_register_style y wp_enqueue_style
Preprocesadores CSS: Sass, Less,…
Post-CSS: autoprefixer, sorting, linters, images and fonts, etc.
Clases WordPress
Atomic Design: reutilizable, flexible, lenguaje común, relación
entre elementos
Responsive Design: Mobile first y media queries
fr

38. Scripts
Emplear: wp_register_script y wp_enqueue_script
Librerías JS de WordPress
Aprovechar la funcionalidad de librerías/plugins de JS ligada a
la de WordPress
Carga asíncrona + carga selectiva
Uso de linters (ESLint) y test unitarios

39. Translation Ready
Definir textdomain
Internacionalización de nuestro tema (i18n)
__(), _e(), _n(), _x(), _ex(), _nx(),
Localización
Archivos .po y .mo

40. Otros
Emplear: wp_register_script y wp_enqueue_script
Librerías JS de WordPress
Aprovechar la funcionalidad de librerías/plugins de JS ligada a
la de WordPress
Carga asíncrona + carga selectiva
Uso de linters (ESLint) y test unitarios

41. Recursos para Desarrolladores
WordPress Theme HandBook
Directorio de Temas
WordPress Template Hierarchy
Theme Review Guidelines
Theme Review Team

42. wpmalaga.com