O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Temas hijos deWordPress
(ChildThemes)
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Quién soy
Angeles Portillo - @zanguanga y @churbayportillo
Utilizo WordPress d...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
¿Qué es un tema deWordPress?
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
¿Qué es un tema deWordPress?
Un conjunto de ficheros que producen una
interfaz...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
-index.php
-style.css
Estructura básica de un tema
Cabecera
Pie
AsideContenido...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
-footer.php
-header.php
-index.php
-sidebar.php
-style.css
Estructura básica d...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
-header.php
-footer.php
-sidebar.php
-front-page.php
-home.php
-single.php
-pa...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Temas gratuitos en repositorio de WordPress:
http://wordpress.org/themes/
Tema...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Repositorio deWordPress
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar temas deWordPress
Por FTP
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar temas deWordPress
Con el editor de WordPress
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar temas deWordPress
Con el personalizador de temas
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar temas deWordPress
Con un tema hijo (Child Theme)
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar temas de
WordPress con un tema hijo
https://codex.wordpress.org/Chil...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Un tema hijo es un tema que hereda la funcionalidad y el
estilo de otro tema, ...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
1. Para evitar pérdidas en las actualizaciones (seguridad)
2. Para acelerar el...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Un tema hijo consta de al menos un directorio y dos archivos:
style.css
functi...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
wp-content/themes/mi-tema-hijo
Creando un tema hijo
Creamos un directorio para...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
wp-content/themes/mi-tema-hijo
Creando un tema hijo
Nombramos el tema hijo
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
wp-content/theme/mi-tema-hijo/style.css
Crear style.css
Creamos una hoja de es...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
https://codex.wordpress.org/Child_Themes
Crear style.css
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
https://codex.wordpress.org/Child_Themes
Crear style.css
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
https://codex.wordpress.org/Child_Themes
Sobreescribir style.css
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
https://codex.wordpress.org/Child_Themes
Usar inspector web
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Sobreescribir style.css
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
No usar @import
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Usar las funciones deWP
Encolamos los estilos
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
wp-content/themes/mi-tema-hijo/functions.php
Crear functions.php
Creamos un ar...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Crear functions.php
Creamos un archivo functions.php
https://codex.wordpress.o...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
https://codex.wordpress.org/Child_Themes
Screenshot
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
wp-content/themes/mi-tema-hijo/screenshoot.png
Screenshot
Creamos una imagen s...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Screenshot
Creamos un archivo functions.php
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Trucos functions.php
Modificando functions.php
https://digwp.com/2016/01/inclu...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Trucos functions.php
Modificar functions.php
https://digwp.com/2016/01/include...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Creando un tema hijo
Modificando functions.php
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
“A diferencia de style.css, el functions.php de un tema hijo
no sobrescribe al...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Agregar fuentes de Google
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Modificar queries
http://wp-snippets.com/
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Crear Custom PostTypes
1. Generar código
http://themergency.com/generators/wor...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Agregar o modificar plantillas
https://developer.wordpress.org/themes/template...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Agregar o modificar plantillas
https://developer.wordpress.org/themes/template...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Jerarquía de plantillas
Los temas cargan un fichero según la petición:
index, ...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Jerarquía de plantillas enWP
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Sobreescribir plantillas
index.php
header.php
footer.php
page.php
single.php
c...
@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
¡Muchas gracias!
(¡¡a la cafetería a practicar!!)
Próximos SlideShares
Carregando em…5
×

Aprende a crear tu propio tema hijo de WordPress (taller)

948 visualizações

Publicada em

Presentación previa al taller de WordPress realizado en la Meetup de Murcia el 19/10/2017 sobre temas hijos de WordPress.

Publicada em: Software
  • Seja o primeiro a comentar

Aprende a crear tu propio tema hijo de WordPress (taller)

  1. 1. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Temas hijos deWordPress (ChildThemes)
  2. 2. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Quién soy Angeles Portillo - @zanguanga y @churbayportillo Utilizo WordPress desde 2006 Contribuciones en traducciones al español y foros WordPress Meetups: Murcia, Marbella Cofundadora de Churba & Portillo en 2001
  3. 3. @wpmurcia wpmurcia.org @zanguanga #wpMurcia ¿Qué es un tema deWordPress?
  4. 4. @wpmurcia wpmurcia.org @zanguanga #wpMurcia ¿Qué es un tema deWordPress? Un conjunto de ficheros que producen una interfaz gráfica, un diseño absolutamente independiente del contenido.
  5. 5. @wpmurcia wpmurcia.org @zanguanga #wpMurcia -index.php -style.css Estructura básica de un tema Cabecera Pie AsideContenido principal
  6. 6. @wpmurcia wpmurcia.org @zanguanga #wpMurcia -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. 7. @wpmurcia wpmurcia.org @zanguanga #wpMurcia -header.php -footer.php -sidebar.php -front-page.php -home.php -single.php -page.php -category.php -comments.php -search.php -404.php -functions.php Estructura básica de un tema header.php footer.php sidebar.php Contenido variable
  8. 8. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Temas gratuitos en repositorio de WordPress: http://wordpress.org/themes/ Temas comerciales bajo GPL -Market places -Empresas especializadas (Elegantthemes, etc.) Y muchos más en: http://wordpress.org/themes/commercial/ Encontrar temas deWordPress
  9. 9. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Repositorio deWordPress
  10. 10. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar temas deWordPress Por FTP
  11. 11. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar temas deWordPress Con el editor de WordPress
  12. 12. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar temas deWordPress Con el personalizador de temas
  13. 13. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar temas deWordPress Con un tema hijo (Child Theme)
  14. 14. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar temas de WordPress con un tema hijo https://codex.wordpress.org/Child_Themes
  15. 15. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Un tema hijo es un tema que hereda la funcionalidad y el estilo 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 https://codex.wordpress.org/Child_Themes
  16. 16. @wpmurcia wpmurcia.org @zanguanga #wpMurcia 1. Para evitar pérdidas en las actualizaciones (seguridad) 2. Para acelerar el tiempo de desarrollo (productividad) 3. Para aprender a desarrollar temas de WordPress 4. Para añadir plantillas 5. Para añadir o modificar funciones de temas o plugins (hooks y filtros) ¿Por qué un tema hijo? https://codex.wordpress.org/Child_Themes
  17. 17. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Un tema hijo consta de al menos un directorio y dos archivos: style.css functions.php Creando un tema hijo https://codex.wordpress.org/Child_Themes
  18. 18. @wpmurcia wpmurcia.org @zanguanga #wpMurcia wp-content/themes/mi-tema-hijo Creando un tema hijo Creamos un directorio para el tema hijo
  19. 19. @wpmurcia wpmurcia.org @zanguanga #wpMurcia wp-content/themes/mi-tema-hijo Creando un tema hijo Nombramos el tema hijo
  20. 20. @wpmurcia wpmurcia.org @zanguanga #wpMurcia wp-content/theme/mi-tema-hijo/style.css Crear style.css Creamos una hoja de estilos en el mismo directorio
  21. 21. @wpmurcia wpmurcia.org @zanguanga #wpMurcia https://codex.wordpress.org/Child_Themes Crear style.css
  22. 22. @wpmurcia wpmurcia.org @zanguanga #wpMurcia https://codex.wordpress.org/Child_Themes Crear style.css
  23. 23. @wpmurcia wpmurcia.org @zanguanga #wpMurcia https://codex.wordpress.org/Child_Themes Sobreescribir style.css
  24. 24. @wpmurcia wpmurcia.org @zanguanga #wpMurcia https://codex.wordpress.org/Child_Themes Usar inspector web
  25. 25. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Sobreescribir style.css
  26. 26. @wpmurcia wpmurcia.org @zanguanga #wpMurcia No usar @import
  27. 27. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Usar las funciones deWP Encolamos los estilos
  28. 28. @wpmurcia wpmurcia.org @zanguanga #wpMurcia wp-content/themes/mi-tema-hijo/functions.php Crear functions.php Creamos un archivo functions.php
  29. 29. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Crear functions.php Creamos un archivo functions.php https://codex.wordpress.org/Child_Themes
  30. 30. @wpmurcia wpmurcia.org @zanguanga #wpMurcia https://codex.wordpress.org/Child_Themes Screenshot
  31. 31. @wpmurcia wpmurcia.org @zanguanga #wpMurcia wp-content/themes/mi-tema-hijo/screenshoot.png Screenshot Creamos una imagen screenshot
  32. 32. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Screenshot Creamos un archivo functions.php
  33. 33. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Trucos functions.php Modificando functions.php https://digwp.com/2016/01/include-styles-child-theme/
  34. 34. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Trucos functions.php Modificar functions.php https://digwp.com/2016/01/include-styles-child-theme/
  35. 35. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Creando un tema hijo Modificando functions.php
  36. 36. @wpmurcia wpmurcia.org @zanguanga #wpMurcia “A diferencia de style.css, el functions.php de un tema hijo no sobrescribe al tema padre. En lugar de eso, se carga en adición a functions.php del tema padre. (Especificamente, se carga justo antes del tema padre.)” https://codex.wordpress.org/es:Temas_hijos#Uso_de_functions.php Añadir funcionalidades
  37. 37. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Agregar fuentes de Google
  38. 38. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Modificar queries http://wp-snippets.com/
  39. 39. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Crear Custom PostTypes 1. Generar código http://themergency.com/generators/wordpress-custom-post- types/ 2. Pegarlo en el functions.php de nuestro tema hijo http://codex.wordpress.org/custom_post_types 3. O usar un plugin como Advanced Custom Fields
  40. 40. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Agregar o modificar plantillas https://developer.wordpress.org/themes/template-files-section/page-template-files/ wpbarcelona
  41. 41. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Agregar o modificar plantillas https://developer.wordpress.org/themes/template-files-section/page-template-files/ wpbarcelona
  42. 42. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Jerarquía de plantillas Los temas cargan un fichero según la petición: index, single, category, page… En temas hijos prevalece la carpeta del tema hijo, es donde primero se mira. https://developer.wordpress.org/themes/basics/t emplate-hierarchy/
  43. 43. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Jerarquía de plantillas enWP
  44. 44. @wpmurcia wpmurcia.org @zanguanga #wpMurcia Sobreescribir plantillas index.php header.php footer.php page.php single.php category.php 404.php taxonomy.php
  45. 45. @wpmurcia wpmurcia.org @zanguanga #wpMurcia ¡Muchas gracias! (¡¡a la cafetería a practicar!!)

×