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

@wpmurcia wpmurcia.org @zanguanga
#wpMurcia
Temas hijos deWordPress
(ChildThemes)

#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

#wpMurcia
¿Qué es un tema deWordPress?

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

#wpMurcia
-index.php
-style.css
Estructura básica de un tema
Cabecera
Pie
AsideContenido
principal

#wpMurcia
-footer.php
-header.php
-index.php
-sidebar.php
-style.css
header.php
footer.php
sidebar.php
Contenido
variable

#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
header.php
footer.php
sidebar.php
Contenido
variable

#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

#wpMurcia
Repositorio deWordPress

#wpMurcia
Modificar temas deWordPress
Por FTP

#wpMurcia
Con el editor de WordPress

#wpMurcia
Con el personalizador de temas

#wpMurcia
Con un tema hijo (Child Theme)

#wpMurcia
Modificar temas de
WordPress con un tema hijo
https://codex.wordpress.org/Child_Themes

#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

#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?

#wpMurcia
Un tema hijo consta de al menos un directorio y dos archivos:
style.css
functions.php
Creando un tema hijo

#wpMurcia
wp-content/themes/mi-tema-hijo
Creamos un directorio para el tema hijo

#wpMurcia
wp-content/themes/mi-tema-hijo
Nombramos el tema hijo

#wpMurcia
wp-content/theme/mi-tema-hijo/style.css
Crear style.css
Creamos una hoja de estilos en el mismo directorio

#wpMurcia
Crear style.css

#wpMurcia
Sobreescribir style.css

#wpMurcia
Usar inspector web

#wpMurcia
Sobreescribir style.css

#wpMurcia
No usar @import

#wpMurcia
Usar las funciones deWP
Encolamos los estilos

#wpMurcia
wp-content/themes/mi-tema-hijo/functions.php
Crear functions.php
Creamos un archivo functions.php

#wpMurcia
Crear functions.php

#wpMurcia
Screenshot

#wpMurcia
wp-content/themes/mi-tema-hijo/screenshoot.png
Screenshot
Creamos una imagen screenshot

#wpMurcia
Screenshot

#wpMurcia
Trucos functions.php
Modificando functions.php
https://digwp.com/2016/01/include-styles-child-theme/

#wpMurcia
Trucos functions.php
Modificar functions.php
https://digwp.com/2016/01/include-styles-child-theme/

#wpMurcia
Modificando functions.php

#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

#wpMurcia
Agregar fuentes de Google

#wpMurcia
Modificar queries
http://wp-snippets.com/

#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

#wpMurcia
Agregar o modificar plantillas
https://developer.wordpress.org/themes/template-files-section/page-template-files/
wpbarcelona

#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/

#wpMurcia
Jerarquía de plantillas enWP

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

#wpMurcia
¡Muchas gracias!
(¡¡a la cafetería a practicar!!)

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

Recomendados

Recomendados

Mais conteúdo relacionado

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

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

Último

Último (6)

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