Presentación de la VI meetup celebrada el 5 de mayo de 2017 en el Espacio Arroelo. Novedades de la comunidad y charla sobre creación y modificación de temas de WordPress.

1. Meetup Temporada 01 Episodio 06

2. Antes de nada, ¡gracias!

3. ¿Quién soy yo?
Juan Hernando @ciudadanoB
Diseño & Desarrollo Web @Vertixe
Actualidad WP @EnlacePermanent
Organizador @WPPontevedra

4. Actualización WPPontevedra
110 miembros en meetup.com (+12)
70 followers de @WPPontevedra (+9)
1 post en el blog:
- Resumen de la quinta meetup de
maquetadores visuales
¡Estrenamos página en Facebook!
facebook.com/wppontevedra

5. Novedades próximas meetups
Junio (V16) > Minicharlas para valientes
Julio & Agosto > WordPress & Beers
Septiembre (V22) > Emprender con
WordPress en Pont Up Store

6. Novedades meetups próximas
Miércoles 10/5, 19:00 > WordPress Ourense
Presentación de la comunidad
Viernes 19/5, 19:00 > WordPress Lugo
Presentación + Charla WPO + Charla WP y vender más

7. CREACIÓN Y MODIFICACIÓN
de temas en WordPress

8. ¿Qué es un tema?
Es* lo que nos permite cambiar la apariencia de
nuestra página web. También nos permite
cambiar alguna funcionalidad, pero lo
principal es el aspecto visual.
*son archivos .php .css .js

9. No, en serio, ¿qué es un tema?
Lo que te permite ver tu página web como un blog,
una tienda, un portfolio, un foro, una red social,
una web corporativa…

10. ¡Ah! ¡Lo que compro en
Themeforest!
Sí… claro… pero vamos a tener cuidado con lo
que hacemos a partir de ahora…

11. Hay miles de temas gratuitos
En el repositorio oficial de WordPress
https://es.wordpress.org/themes/

12. Hay temas de pago de calidad
Más allá del código, dan soporte y cumplen las
buenas prácticas de WordPress
https://www.premiumwp.com/premium-wordpress-themes-directory/

13. Pero nunca son exactamente
lo que yo necesito

14. He encontrado estas líneas
mágicas
Dicen que tengo que pegarlo en un archivo
que se llama functions.php, pero seguramente
dé lo mismo

16. ¿Hola? ¿Hay alguien ahí?

17. LA PREGUNTA ES
¿Hace falta ser programador para modificar o
crear un tema de WordPress?

18. LA PREGUNTA ES
¿Hace falta ser programador para modificar o
crear un tema de WordPress?
“Por supuesto”, dijo el desarrollador web

19. LA PREGUNTA ES
¿Hace falta ser programador para modificar o
crear un tema de WordPress?
“Por supuesto”, dijo el desarrollador web
“Ni de coña”, dijo el que quiere seguir llenando
de gente la meetup

20. Modificar una web desde el personalizador
Crear un tema hijo
Crear un tema usando un framework
Crear un tema desde cero
Vamos a diferenciar varios niveles

21. Modificar una web desde el personalizador
Crear un tema hijo
Crear un tema usando un framework
Crear un tema desde cero
Vamos a diferenciar varios niveles

22. Es como magia…

23. Una charla para construir la casa por el tejado
HTML, CSS, PHP, JS básico
Copy & Paste avanzado

24. ¿Cuál es la estructura de un tema?
https://dariobf.com/slides/WCMadrid2017/
style.css
index.php

25. ¿Cuál es la estructura de un tema?
style.css
index.php
header.php
sidebar.php
footer.php

26. ¿Cuál es la estructura de un tema?
style.css
index.php
header.php
sidebar.php
footer.php
page.php
home.php
archive.php
single.php
…
https://codex.wordpress.org/Templates

27. ¿Pero aquí cuándo se habla del loop?
https://codex.wordpress.org/es:The_Loop_in_Action
<?php
get_header();
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>

28. ¿Y el functions.php ese de antes?
Nos permite cambiar características de WordPress
Funciona como un plugin
Sólo está activo si el tema está activo

29. Modificar una web desde el personalizador
Crear un tema hijo
Crear un tema usando un framework
Crear un tema desde cero
Vamos a diferenciar varios niveles

30. Necesitamos un tema padre
Y tendremos que empezar con el código

31. Necesitamos un tema padre
Y tendremos que empezar con el código
Descárgate
Sublime Text

32. https://maugelves.com/wp-content/uploads/2017/04/carla-saiz-mi-primer-parto-en-
wordpress.pdf
Necesitamos un tema padre
Y tendremos que empezar con el código
style.css
Nombre, nombre del padre y reglas CSS
functions.php
Añadir una función para que cargue
la hoja del padre y luego la del hijo
screenshot.png
Para que quede bonito
Descárgate
Sublime Text

33. Modificar una web desde el personalizador
Crear un tema hijo
Crear un tema usando un framework
Crear un tema desde cero
Vamos a diferenciar varios niveles

34. Underscores
http://underscores.me/

35. Underscores Components
http://components.underscores.me/

36. Estructura completa para modificar
Es un punto de partida fantástico para aprender y tocar

37. Modificar una web desde el personalizador
Crear un tema hijo
Crear un tema usando un framework
Crear un tema desde cero
Vamos a diferenciar varios niveles

38. LIBERTAD
ABSOLUTA

39. Proceso de creación de una web con un tema
totalmente personalizado desde cero
Nos pasan un diseño
El diseño es mobile first, claro
Organizamos la estructura de lo que vemos
Decidimos qué va en template-parts
Decidimos qué va en functions.php y qué en plugin
Enqueue scripts & styles
Tamaños de imágenes (thumbnails)
Los menús y los widgets
¿Usaremos el personalizador? Logo, colores…
Internacionalización
Accesibilidad
Seguridad
Integración con WooCommerce y otros plugins
Y nos lanzamos a crear el frontend…

40. Preguntas
¿Me lo puedes repetir todo desde lo
de “Gracias al Espacio Arroelo…”?

41. ¿Y ahora qué?
Toca conocernos
Los nuevos pueden presentarse
Los veteranos… también
Y charlemos sobre WordPress

42. 7ª Meetup: ¿16 de junio?