125 | El secreto de los child themes

En el episodio 125 de WordPress Semanal charlamos sobre lo que de verdad supone crear un Child Theme y las increíbles posibilidades de personalización que te ofrece. Vamos allá. Hola, hola, Soy Gonzalo de Gonzalonabarro. Es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Pero porque ya lo sabes, no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia página web con WordPress. Y hoy vamos a hablar de la creación de páginas web a un nivel un pelín más avanzado, porque vamos a hablar de los Child Themes, que es algo que como te voy a comentar, habrás escuchado un millón de veces y si no lo empezarás a escuchar muchísimas veces a partir de ahora si es la primera vez que estás escuchando sobre ello, pero que para mí el secreto de este aspecto, de esta curiosidad dentro de la creación de páginas web es es que es el camino perfecto para convertirte en desarrollador WordPress, o si, desarrollador es una palabra que impone mucho, pues un buen creador de páginas web. Y es de lo que vamos a hablar en este episodio, un poco va a ir en esa línea de qué es todo lo que te puede ofrecer, además con un camino relativamente sencillo y que tiene sentido, son pasos que tienen sentido, que no es de repente algo muy complejo, sino que es poco a poco de lo más sencillo a lo más complejo, con lo cual me parece un un camino fantástico para seguir y de eso vamos a hablar a lo largo de este episodio. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues bien, como cada semana, todos los martes saco un vídeo de la zona código, en este caso cómo centrar imágenes completamente. ¿Qué quiere decir completamente? Pues no sólo en horizontal, que es lo típico, sino también en vertical. Esto es algo que me he dado cuenta que falta información, sobre todo en español, sobre cómo hacerlo, y en el vídeo de la zona código te explico cómo lo puedes hacer de forma súper sencilla y por supuesto lo puedes aplicar a más cosas de más allá de las imágenes. Ya hice un episodio o un vídeo de la zona código sobre cómo centrar en horizontal distintas cosas, pues imágenes, texto, botones, prácticamente cualquier elemento, pero en este caso me centro en la parte vertical, que sería la más compleja, aunque ya no lo es tanto. Y por supuesto también horizontalmente vemos cómo centrar de forma completa, por eso digo centrar imágenes completamente. Eso en cuanto a la zona código. Después tenemos un nuevo curso, es la primera vez que introduzco este curso y es precisamente curso de creación de child themes y no un child theme como estamos acostumbrados a simplemente crear un style css y un functions php, sino que es un curso completo que va desde lo más básico hasta lo más avanzado. Primero vemos que es un child theme y te enseño a configurarlo, después cubrimos cómo usar las herramientas del navegador y el CSS para que puedas cambiar el aspecto de tu tema hijo. Después pasamos a extender las funcionalidades, es decir, lo que puede hacer tu web o qué tiene tu web con cosas como crear nuevos archivos de plantilla, crear ubicaciones de menú, crear widget áreas, editar funciones existentes ya del theme, crear nuevas, instalar fuentes, desactivar fuentes que no usemos. Y de verdad pienso que es un curso ideal si quieres dar el salto a hacer mejores páginas web, incluso a convertirte en desarrollador, pasar digamos de administrador usuario a un paso ya bastante más avanzado camino del desarrollo. Sí, pues esas son las novedades. Vamos ahora con el plugin de la semana para conseguir una barra de contacto que esté siempre visible. El plugin se llama Speed Contact Bar y con él podrás facilitar que tus visitantes te contacten de forma rápida. Lo que hace es que te muestra una barra con tus datos de contacto y enlaces también si quieres a redes sociales en la parte alta de todas tus páginas de la web, como la típica Hello Bar, pero en este caso para que te contacten por supuesto la barra responsive, así que se va a ver bien en todos los dispositivos y además viene como te decía con iconos de redes sociales que sólo van a aparecer lógicamente si pones esa red social. Si por ejemplo pones el enlace a tu página de Facebook, pues aparece el icono de Facebook. También tienes iconos de email y el número de teléfono que además si se hace clic pues directamente si estás en un teléfono pasa a hacer la llamada. Lo mismo ocurre con el email que se abre el programa de email que use tu visitante se abrirá para que pueda escribirte un email. Sí, es un plugin que no lo conocía, pero una de mis suscriptoras, una de las suscriptoras a los cursos me preguntó por algo así o me preguntó una cosa un poco diferente, pero al final vimos que esta era la mejor solución para ella, me lo preguntó a través de su área de soporte, así que lo comparto también con todos vosotros. De nuevo, Speed Contact Bar, este es el episodio 125, tenéis el enlace por supuesto en las notas del programa. Sí vamos ahora con el tema central del programa, el secreto de los child themes, que no es otro, os lo quiero decir desde ya, que facilitarte el camino por pasos, con mucha lógica, con mucho sentido, para que te conviertas en un gran creador de páginas web con WordPress. Vamos a empezar por lo que te comentaba al principio, ese básico que te repiten siempre y que si no lo has escuchado demasiado, estoy seguro que lo escucharás de aquí en adelante, que es ¿Tienes que crear un child theme cada vez que instalas un thing nuevo, cada vez que creas una web con WordPress? Seguramente estés harto de escucharlo, y si no, como digo, lo estarás. Pero ¿Por qué? Bueno, vamos a responder a esta pregunta, pero primero tengo que decirte que seguramente si estás empezando no necesitas el child thing de momento, o de un poco igual si lo tienes o no. Lo que sí que en cuanto avances un poquito y pretendas ir más allá en la gestión de tu web o en la modificación de tu web, ahí sí necesitarás seguro crear un tema hijo. Entonces por eso te lo recomiendan, aunque tú pienses pero bueno, si yo no voy a hacer nada especial con mi web, ¿Por qué necesito hacer esto tan técnico y crear un child theme y no sé qué, no sé cuánto? Es cierto, seguramente ahora no lo necesites, pero es mejor hacerlo porque en el futuro puedes necesitarlo, aunque siempre hay opción de hacerlo más adelante. ¿Y por qué puedes necesitarlo? Bien, vamos a dejar el concepto claro de child theme y de para qué sirve, porque aunque tengo muchos contenidos en mi web acerca de esto, siempre veo una pequeña laguna y quiero intentar dejarlo claro. Un child theme no es más que la copia de ciertos archivos del theme que tú tengas instalado, del tema padre que se llama, para que tú puedas hacer todos los cambios que quieras en esa copia en lugar de en el tema original, y que por supuesto se vean reflejados en tu web. Es decir, tú haces una copia de lo que te interesa, del tema padre, de los archivos me refiero, que te interesen, modificas esos archivos a tu antojo y se ven reflejados en tu web. ¿Y esto por qué se hace en una copia y no se hace en el thing original? Bien, porque el theme original se va a actualizar. Ya sabéis que en WordPress todo el rato estamos con las actualizaciones, que si los plugins se actualizan, que si los themes se actualizan. Bien, si tú haces modificaciones en un thing y después el desarrollador lanza una actualización, las modificaciones que tú habías hecho en el mismo thing se van a borrar porque los creadores del thing reemplazan el thing con archivos nuevos completamente, con lo cual tú todo lo que habías cambiado desaparece. Entonces el child theme es un mecanismo que te permite hacer hacer todos esos cambios sin importar que después el tema padre se actualice, porque tú los cambios los tienes aparte, una copia hecha aparte que nadie va a tocar. Así que con el tema hijo solucionas eso y además siempre tienes tu web actualizada porque permites que el tema padre se actualice. Vale, y ahora una de las cosas que veo que hay más dudas. Cuando hablamos de crear un tema hijo para poder hacer cambios, no quiere decir que tienes que crear un tema hijo para que puedas crear entradas, crear contenido, subir imágenes y que después eso no se vaya a borrar con una actualización. Y eso no son cambios, eso es el funcionamiento normal de WordPress. Cuando hablamos de cambios que pueden ser borrados con una actualización del tema padre, me refiero a cambios en los archivos del thing. Así que por eso decía que seguramente si estás empezando te da igual o no hacer un child theme, porque si estás empezando no sabrás toquetear los archivos de tu thing, no sabrás toquetear código. Así que quiero quitar un poco el miedo a los que escucháis esto del child theme y decís uy, yo no tengo child theme y llevo un montón de contenidos creados, llevo un montón de cosas hechas, de imágenes subidas, de post publicados, ahora a ver si se me va a ir todo al garete. No, no te preocupes que estás haciendo el funcionamiento normal de WordPress para un usuario normal. ¿Qué pasa? Que si quieres ir un poco más allá y hacer algunas modificaciones, incluir CSS, incluir algún trozo de JavaScript que veas por ahí, incluir alguna función de PHP que te recomiende alguien, ya si te vas a meter en esas cosas, entonces si necesitas crear un child theme. Entonces, una vez tenemos esto claro, ¿Qué son esos cambios, qué son esas modificaciones que podemos hacer? Voy a ir de lo más básico a lo más avanzado. Lo primero que seguramente hagas o que seguramente te animes a hacer porque es lo menos complejo, es incluir cambios por CSS. Pero también tengo que decirte que si solo vas a hacer cambios al aspecto de tu fin por CSS, puede que tampoco necesites un child thing, porque ya sabéis que en WordPress hay una parte que es el personalizador que tiene un menú que te permite añadir CSS, entonces tú puedes añadir CSS ahí sin problemas, que eso se va a guardar, no se va a perder con ninguna actualización y va a funcionar siempre y cuando no cambies de thing. Pero aún así, muchas veces prefieres hacer los cambios en la hoja de estilo, en el style css y no lo vas a hacer en el tema padre, lo necesitas hacer en el tema hijo y ahí pues podrás modificar los estilos existentes de tu tema, podrás crear estilos nuevos y básicamente podrás tenerlo todo ordenado a tu antojo, creando pues los estilos de tu web, que los títulos H se vean a un tamaño concreto y de un color concreto, que los párrafos tengan el tamaño de letra tal y que se vean del color cualquiera, que el fondo de tu web sea de otro color, que el footer y el header pues también cambien de color, ¿Vale? Todo esto lo puedes ir añadiendo porque es relativamente fácil de hacer y lo puedes ir añadiendo a tu hoja de estilos en el child theme y que el tema padre se actualiza, no pasa nada, yo tengo mis cambios en el tema hijo. Después te irás animando seguramente e irás añadiendo cosas al functions php, que es otro archivo esencial. Cuando creamos un child theme siempre vamos a instalar o a crear dos archivos, el style css y el functions php. Y el functions php es necesario porque ahora una de las opciones más recomendadas para crear un child theme es hacerlo mediante el functions php, que es este archivo que te comento. Este archivo te permite hacer cosas increíbles. Se llama functions porque puedes añadir funciones, es decir, funcionalidades. Puedes decir cómo se va a comportar tu theme, dónde van a estar ciertas cosas, qué va a pasar con otras. Si quieres añadir por ejemplo una nueva widget área, lo haces en el functions php, Si quieres añadir una nueva ubicación de menú lo haces con este archivo. Si quieres crear un nuevo custom post type, un tipo de contenido nuevo como por ejemplo películas, noticias o algo por el estilo, lo haces a través de este archivo. Si quieres vincular nuevas hojas de estilos, como por ejemplo la del tema padre, porque es interesante que cojamos los mismos estilos del tema padre, pues esto se hace a través de este archivo. Si quieres vincular alguna fuente de Google Fonts, lo haces a través de este archivo, ¿Vale? Así que el Functions PHP es tu gran aliado si quieres hacer modificaciones importantes o no tan importantes en tu web. Pero es que podemos hacer más cosas y aquí viene lo gordo, lo que seguramente pueda suponer una novedad para muchos de vosotros, porque es ir un paso más allá y conseguir modificar la estructura de nuestra web. ¿Cómo? Pues ¿Qué pasaría si yo te digo que tú puedes coger cualquier archivo del tema padre, llevártelo al tema hijo, hacer todas las perrerías que quieras, todos los cambios que quieras y ver cómo eso se refleja en tu web? En primer lugar tú dirás, bueno, es que yo no tengo ni idea de hacer cambios, vale, pero puedes practicar, puedes hacer esos cambios, intentarlos. ¿Que algo va mal? ¿Pasa algo? No, solo tienes que eliminar ese archivo y WordPress automáticamente volverá a cargar ese mismo archivo pero del tema padre. La gracia de esto es que el tema padre además funciona como una especie de copia de seguridad, que si tú la lías con tu tema hijo no pasa nada, porque todo eso, o digamos lo esencial ya está en el tema padre, Tú simplemente añades cambios, mejoras cosas nuevas, cosas diferentes, pero si no, siempre vas a volver a lo que tuviese el tema padre y eso no lo vas a perder, siempre va a estar ahí. ¿Así que por ejemplo, imagínate que quiero cambiar cómo se ven los artículos de mi web, los post, no sé, tengo primero una imagen destacada, después tengo el título, después tengo el contenido, después tengo los comentarios, después tengo la opción de pasar al siguiente post, vale? Pues imagínate que yo quiero poner la opción de pasar al siguiente post encima de los comentarios porque veo que la gente no llega ahí, no lo ve y lo quiero delante. Pues simplemente localizo cuál es el archivo que está utilizando WordPress para mostrarme eso que os enseño por cierto, en el curso, un truco fantástico para localizar ese archivo de forma rápida y fácil. Hago una copia de él, me lo llevo a Michail Theme y empiezo a jugar con él. Digo, venga, a ver si consigo localizar la parte en la que se va a siguiente post y y anterior post. Veo aquí algo de post navigation. Venga, tiene que ser esto, lo corto, lo pongo encima de donde están los comentarios, guardo y lo tengo. ¿Que me equivoco? Pues no pasa nada, elimino el archivo o vuelvo a coger el archivo del tema padre y lo vuelvo a copiar. Pero la clave aquí es que puedes modificarlo a tu antojo, qué sabes simplemente un poquito, pues modificas un poquito, qué sabes mucho más, pues lo modificas por completo. Pero es una forma de ir avanzando, de ir modificando tu web de verdad. Y como esto, pues mil ejemplos que te podría decir y que vemos por supuesto en el curso. Y no solo copiar plantillas o copiar archivos del tema padre, llevártelos al tema hijo, sino que una vez entiendes más o menos cómo funcionan los archivos de WordPress, puedes crear los tuyos propios, aunque no existan en el tema padre, por supuesto siempre nos vamos a valer. Esto es una de las claves que enseño en el curso y de los truquitos que es en ver cómo está hecho el tema padre para en función de ahí ir copiando lo que te interesa y pegarlo para hacer cosas más avanzadas en tu tema hijo. Así que por eso digo que este es el paso previo al desarrollo en WordPress, porque si de verdad quieres aprender a hacer webs a un nivel más avanzado, para mí este es el camino. Usar un child thing como punto de partida te va a ayudar mucho, mucho, mucho. Vas a conocer en profundidad el funcionamiento interno de WordPress, sus archivos, sus peculiaridades, vas a aprender que cada theme es distinto, pero que si sabes buscar, los mecanismos son siempre muy similares. Así que te vales del tema padre, aprendes de cómo está hecho y eso te ayuda a crear tu propia web, a cambiarla por completo a través del child theme. Y en el curso de Child Themes de WordPress vemos todo esto y muchas más cosas. Así que si estás pensando en incrementar tu capacidad para hacer páginas web o estás buscando un camino para convertirte en desarrollador o prácticamente desarrollador y que sea un camino natural, ¿Vale? Que no sea de repente de que seas un usuario algo súper complejo, de verdad que este curso te va a venir muy muy bien. Bueno, os dejo por aquí el enlace al curso si queréis echarle un vistazo, si sois suscriptores, pues por supuesto ya está disponible. Y si queréis ver pues todo lo que ofrece la plataforma, vais a gonzalonabarro es cursos y ahí tenéis, y ahí tenéis toda la información. Por supuesto, Recordad que doy 15 días de prueba sin compromiso, te apuntas, lo pruebas, estás 15 días, ves los cursos, la zona código, el soporte conmigo. ¿Que te gusta? Pues nada, no haces nada, sigues suscrito, que no me contactas, Oye Gonzalo, que no quiero seguir, no pasa nada, te devuelvo los 10 euros, no te pregunto ni siquiera porque no quiere seguir y listo, ¿Vale? Así que nada, seguramente, como te decía, hayas escuchado por activa y por pasiva eso de que hay que crear un child theme y yo espero que con este episodio te haya quedado claro el por qué y sobre todo lo que puedes llegar a conseguir con él, ¿De acuerdo? Por último, recuerda que si te ha ayudado el episodio de hoy y quieres ayudarme a que siga creciendo, a que siga creando episodios como éste, puedes aportar tu granito de arena de una forma súper sencilla, dejándome una valoración en iTunes. Es fácil, no tardas nada, ni 30 segundos, vas a tu aplicación de podcast, buscas WordPress semanal y ahí pues puedes dejarme la reseña que consideres. Si me escuchas desde ivoox, si me escuchas desde Spotify, gracias por estar ahí, gracias por la acción que puedas tomar, si es un comentario, si es un me gusta, lo que sea, ya sabes que siempre os estoy muy agradecidos. Así que nada más por este episodio, nos seguimos escuchando. Adiós.