¿Qué es un tema de WordPress? ¿Cómo modificarlo? ¿Qué es un tema hijo? ¿Cómo utilizar Underscores? ¿Y crear un tema desde cero? ¿Qué es Gutenberg?

1. MODIFICA Y CREA
TEMAS DE WORDPRESS

2. ¿QUIÉN SOY YO?
Blog & Contacto en ciudadanob.com
Diseño & Desarrollo Web @Vertixe
Actualidad WP @EnlacePermanent
Co-organizador @WPPontevedra
JUAN HERNANDO
@CIUDADANOB

3. GRACIAS, COMUNIDAD
Todos hacemos mejor WordPress
Todos ayudamos a crearlo compartiendo
conocimiento, traduciendo…
Siempre hacen falta más manos
https://es.wordpress.org/colabora

4. ¿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

5. ¿QUÉ QUEREMOS APRENDER HOY?
Juan Versión 0.4: Modificar un tema del repositorio
Juan Versión 0.7: Crear un tema hijo para modificar
Juan Versión 1.0: Crear un tema basado en _s
Juan Versión 1.4: Crear un tema desde cero
Juan Versión 2.0: Ir conociendo Gutenberg

6. Como intentar explicar todo esto en media
hora es un poco complicado y casi seguro
que me voy a pasar de tiempo creo que es
mejor hacer un repaso general de toda la
información y después si hay preguntas
vamos profundizando sobre algún tema en
particular si es que tengo respuestas para
todo que seguro que hay alguien
preparándose alguna cuestión para pillarme
pero no pasa nada porque estamos aquí
todos para aprender yo el primero. El resto
del texto aquí escrito es sólo para rellenar
toda la diapositiva por puro efecto visual así
que no lo tengáis muy en cuenta, ¡gracias!

7. ¿DÓNDE CONSIGO UN TEMA
PARA MODIFICARLO?
[Insertar aquí queja sobre ThemeForest]
[Insertar aquí explicación sobre maquetadores tipo Divi]
EN EL REPOSITORIO OFICIAL
https://es.wordpress.org/themes
MI RECOMENDACIÓN
Los temas de Anders Norén
http://www.andersnoren.se/teman/

8. MODIFICAR UN TEMA SIN
CONOCIMIENTO(S PREVIOS)
EL PERSONALIZADOR
desde WordPress 3.4

9. MODIFICAR UN TEMA SIN
CONOCIMIENTO(S PREVIOS)
1. Necesito una funcionalidad o cambiar un estilo
2. Busco en Google una solución a mi problema
3. Pego un código aleatorio en un archivo que tal vez…
4. Pantallazo blanco y ¡adiós web!

10. MODIFICAR UN TEMA SIN
CONOCIMIENTO(S PREVIOS)
Desde la versión 4.9 (¡actualizad siempre!)

11. MODIFICAR UN TEMA CON
CONOCIMIENTO
En la web en producción vs. En una copia local / staging
En el propio editor de WP vs. En un editor de código
Sin red de seguridad vs. Con control de versiones
Copiando snippets vs. Entendiendo lo que se hace
Añadiendo todo al functions vs. Creando un plugin
Llenándolo de !important vs. Escribiendo buen CSS

12. MODIFICAR UN TEMA CON
CONOCIMIENTO
HTML
CSS
JavaScript
PHP
Estructura de un tema WP
Función vs. diseño
Códex de WordPress
Hooks
Uso del inspector del navegador
Copy & Paste Avanzado

13. ESTRUCTURA DE UN TEMA WP
https://dariobf.com/slides/WCMadrid2017/
style.css
index.php

14. ESTRUCTURA DE UN TEMA WP
https://dariobf.com/slides/WCMadrid2017/
style.css
index.php
Aquí cambiamos los coloritos
Aquí cambiamos la estructura

15. ESTRUCTURA DE UN TEMA WP
style.css
index.php
header.php
sidebar.php
footer.php
header
index
footer
sidebar

16. ESTRUCTURA DE UN TEMA WP
page.php
home.php
archive.php
single.php
about.php
single-producto.php
template-parts/carrusel.php
…
https://codex.wordpress.org/Templates

17. FUNCIÓN VS. DISEÑO
EL LOOP (BUCLE) DE WORDPRESS
¿Cómo demonios sale el contenido
del backend en el frontend?
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif;
get_sidebar();
get_footer();
?>
https://codex.wordpress.org/es:The_Loop_in_Action

18. FUNCIÓN VS. DISEÑO
EL ARCHIVO FUNCTIONS.PHP
Un contenedor de funciones para modificar
características de nuestro tema (si está activo)
<?php
/*
Plugin Name: Plugin de funciones básicas
Plugin URI: http://meetup-ourense.localhost
Description: Me salvará la vida en el futuro.
Version: 1.0
Author: CiudadanoB
Author URI: https://ciudadanob.com
License: GPL2
*/
?>
O NUESTRO PROPIO PLUGIN

19. CREAR UN TEMA HIJO
¿Para qué?
Necesito algunos cambios (CSS, funciones, plantillas)
en un tema (el padre)
¿Por qué?
No perder los cambios si se actualiza el tema padre
¿Cómo hacerlo?
En cuatro sencillos pasos (y con algo de código)
https://maugelves.com/wp-content/uploads/2017/04/carla-saiz-mi-primer-parto-en-
wordpress.pdf

20. CREAR UN TEMA HIJO
1. Crea una carpeta en /themes con el nombre del
padre y terminada en -child
2. Crea los archivos style.css y functions.php en la
carpeta
3. Añade el código mínimo con la información del tema
hijo y las funciones para cargar correctamente la hoja
de estilos
4. Activa tu tema hijo desde WordPress
https://codex.wordpress.org/Child_Themes

21. CREAR UN TEMA CON _s
¿Para qué?
Para tener la libertad de aplicar cualquier estilo y
estructura que queramos a nuestro tema
¿Por qué?
Para tener un esqueleto básico y con buenas
prácticas
¿Cómo hacerlo?
En cuatro sencillos pasos (y con bastante código)

22. CREAR UN TEMA CON _s
1. Ve a underscores.me, rellena los datos de tu tema y
descárgalo
2. Descomprímelo en tu carpeta /themes
3. Abre el tema con tu editor de código favorito y
edítalo sin miedo
4. Activa este tema desde WordPress
http://underscores.me/

23. CREAR UN TEMA CON _s

24. CREAR UN TEMA DESDE CERO
¿Para qué?
Para tener la total libertad de hacer lo que queramos
y conocer cada línea de código que tiene el tema
¿Por qué?
Porque tienes conocimientos suficientes, te puedes
adaptar 100% a cada proyecto y aunque parezca
más lento, luego es más rápido
¿Cómo hacerlo?
En dos sencillos pasos (y con todo el código)

25. CREAR UN TEMA DESDE CERO
1. Abre un archivo en blanco con tu editor de código
favorito y empieza a generar todos los archivos del
tema.
2. Activa este tema desde WordPress
Theme Handbook & Recommendations
https://make.wordpress.org/themes/handbook/review/recommended/

26. CREAR UN TEMA DESDE CERO
https://ciudadanob.com/blog/2017/05/25/crear-tema-wordpress/
Tenemos un diseño, que 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

27. LA MEJOR MANERA
Descárgate un tema bien hecho, ábrelo con tu editor e
investiga lo que hace y cómo lo hace.

28. GUTENBERG
Algo más que el nuevo editor de WP

29. BLOQUES EVERYWHERE
David Perálvarez: Gutenberg, el estado del arte
https://silicodevalley.com/gutenberg-estado-del-arte/

30. PREGUNTAS
¿Me lo puedes repetir todo desde lo
de “Gracias por invitarme…”?

31. OS ESPERAMOS EN LA
WORDCAMP PONTEVEDRA
EL 22 Y 23 DE SEPTIEMBRE DE 2018