Ángeles Portillo (@angelesportillo) (@zanguanga) organizó un taller en WPCartagena para aprender a crear "child themes" de los temas de WordPress. Esta es la presentación previa al taller realizado en la Meetup de Cartagena el 30/11/2017 en el Laboratorio de Innovación del CEEIC

1. Temas hijos de WordPress
(Child Themes)

2. Quién soy
Angeles Por+llo - @zanguanga y @churbaypor+llo
U+lizo WordPress desde 2006
Contribuciones en traducciones al español y foros
WordPress Meetups: Murcia, Marbella
Cofundadora de Churba & Por+llo en 2001

3. ¿Qué es un tema de WordPress?

4. ¿Qué es un tema de WordPress?
Un conjunto de ficheros que producen una
interfaz gráfica, un diseño absolutamente
independiente del contenido.

5. -index.php
-style.css
Estructura básica de un tema
Cabecera
Pie
Aside Contenido
principal

6. -footer.php
-header.php
-index.php
-sidebar.php
-style.css
Estructura básica de un tema
header.php
footer.php
sidebar.php
Contenido
variable

7. -header.php
-footer.php
-sidebar.php
-front-page.php
-home.php
-single.php
-page.php
-category.php
-comments.php
-search.php
-404.php
-func9ons.php
Estructura básica de un tema
header.php
footer.php
sidebar.php
Contenido
variable

8. Temas gratuitos en repositorio de WordPress:
hNp://wordpress.org/themes/
Temas comerciales bajo GPL
-Market places (ThemeForest, etc.)
-Empresas especializadas (EleganNhemes, etc.)
Y muchos más en: hNp://wordpress.org/themes/commercial/
Encontrar temas de WordPress

9. Repositorio de WordPress

10. Modificar temas de WordPress
Por FTP

11. Modificar temas de WordPress
Con el editor de WordPress

12. Modificar temas de WordPress
Con el personalizador de temas

13. Modificar temas de WordPress
Con un tema hijo (Child Theme)

14. Modificar temas de
WordPress con un tema hijo
hNps://codex.wordpress.org/Child_Themes

15. Un tema hijo es un tema que hereda la funcionalidad y el
es+lo de otro tema, llamado tema principal o tema padre.
Un tema hijo es la forma más recomendable de modificar un
tema existente.
Qué es un tema hijo
hNps://codex.wordpress.org/Child_Themes

16. 1. Para evitar pérdidas en las actualizaciones (seguridad)
2. Para acelerar el +empo de desarrollo (produc+vidad)
3. Para aprender a desarrollar temas de WordPress
4. Para añadir plan+llas
5. Para añadir o modificar funciones
de temas o plugins (hooks y filtros)
¿Por qué un tema hijo?
hNps://codex.wordpress.org/Child_Themes

17. Un tema hijo consta de al menos un directorio y dos archivos:
style.css
func+ons.php
Creando un tema hijo
hNps://codex.wordpress.org/Child_Themes

18. wp-content/themes/mi-tema-hijo
Creando un tema hijo
Creamos un directorio para el tema hijo

19. wp-content/themes/mi-tema-hijo
Creando un tema hijo
Nombramos el tema hijo

20. wp-content/theme/mi-tema-hijo/style.css
Crear style.css
Creamos una hoja de es+los en el mismo directorio

21. hNps://codex.wordpress.org/Child_Themes
Crear style.css

22. hNps://codex.wordpress.org/Child_Themes
Crear style.css

23. hNps://codex.wordpress.org/Child_Themes
Sobreescribir style.css

24. hNps://codex.wordpress.org/Child_Themes
Usar inspector web

25. Sobreescribir style.css

26. No usar @import

27. Usar las funciones de WP
Encolamos los es+los

28. wp-content/themes/mi-tema-hijo/func+ons.php
Crear functions.php
Creamos un archivo func+ons.php

29. Crear functions.php
Creamos un archivo func+ons.php
hNps://codex.wordpress.org/Child_Themes

30. hNps://codex.wordpress.org/Child_Themes
Screenshot

31. wp-content/themes/mi-tema-hijo/screenshot.png
Screenshot
Creamos una imagen screenshot

32. Screenshot
Creamos un archivo func+ons.php

33. Trucos functions.php
Modificando func+ons.php
hNps://digwp.com/2016/01/include-styles-child-theme/

34. Trucos functions.php
Modificar func+ons.php
hNps://digwp.com/2016/01/include-styles-child-theme/

35. Creando un tema hijo
Modificando func+ons.php

36. “A diferencia de style.css, el func+ons.php de un tema hijo
no sobrescribe al tema padre. En lugar de eso, se carga en
adición a func9ons.php del tema padre.
(Especificamente, se carga justo antes del tema padre.)”
hNps://codex.wordpress.org/es:Temas_hijos#Uso_de_func+ons.php
Añadir funcionalidades

37. Personalizar página de acceso

38. Agregar fuentes de Google

39. Personalizar queries
hNp://wp-snippets.com/

40. Crear Custom Post Types
1. Generar código
hNp://themergency.com/generators/wordpress-custom-post-
types/
2. Pegarlo en el func+ons.php de nuestro tema hijo
hNp://codex.wordpress.org/custom_post_types
3. O usar un plugin como Advanced Custom Fields

41. Agregar o modificar plantillas
hNps://developer.wordpress.org/themes/template-files-sec+on/page-template-files/
wpbarcelona

42. Agregar o modificar plantillas
hNps://developer.wordpress.org/themes/template-files-sec+on/page-template-files/
wpbarcelona

43. Jerarquía de plantillas
Los temas cargan un fichero según la pe+ción:
index, single, category, page…
En temas hijos prevalece la carpeta del tema hijo,
es donde primero se mira.
hNps://developer.wordpress.org/themes/basics/
template-hierarchy/

44. Jerarquía de plantillas en WP

45. Sobreescribir plantillas
index.php
header.php
footer.php
page.php
single.php
category.php
404.php
taxonomy.php

46. ¡Muchas gracias!
¿preguntas?
¡vamos a practicar!