Flatsome es uno de los temas clásicos más instalados y utilizados en el mundo, gracias a que ofrece multitud de posibles personalizaciones y ajustes para configurar tu web a medida de tus necesidades.
A golpe de clic puedes hacer centenares de ajustes y configuraciones, que harán tu web distinta, usando un mismo tema para distintos proyectos. Si a eso le sumamos que tiene un precio de solo 59$ con actualizaciones de por vida se entiende su popularidad.
Pero, fíjate tú, que una de las cosas que en otros temas es muy sencillo de hacer, con Flatsome tiene sus trucos. Me refiero a crear un tema hijo.
¿Por qué debería plantearme crear un tema hijo para Flatsome?
Aunque el tema Flatsome tiene montones de maneras de facilitarte añadir códigos, en ocasiones es posible que necesites añadir códigos directamente en algún fichero del tema (header.php, footer.php, etc.), y en este caso no debes añadirlos en los archivos del tema original, pues se perderían los cambios que hagas en cualquier actualización del tema, y la otra opción, no actualizar el tema, sería una malísima idea por cuestiones de seguridad.
¿Vale cualquier método para crear un tema hijo para Flatsome?
Pues resulta que no, no se te ocurra crear un tema hijo manualmente, ni con plugins, Flatsome tiene su propio proceso, y herramienta para crearlo, y saltarte uno solo de los siguientes pasos puede dejar tu web inservible, ahí es nada.
Así que vamos a ir por pasos…
Exporta cualquier CSS personalizado
En Flatsome hay una sección de ajustes avanzados en la que añadir cualquier código CSS personalizado que hayas incluido en algún momento. Estos códigos no los heredará el tema hijo, así que debes pasarte por esta sección y guardar en un archivo de texto en tu ordenador cualquier código CSS que haya ahí.
Además, por si acaso, también revisa si hay CSS adicional en:
- Sección de CSS adicional del personalizador de WordPress.
- Hoja de estilos (archivo
style.css) del tema activo (padre).
Y con esto ya tenemos el primer paso terminado.
Exporta cualquier código personalizado
Si salir de la sección de ajustes avanzados, ahora ve a los ajustes globales de este apartado y, de nuevo, guarda cualquier código que encuentres en las cajas de esta sección. Es buena idea que en el archivo de texto en el que guardes los códigos indiques en qué parte estaba cada uno, tanto con estos como con los de CSS.
En esta sección se suelen incluir códigos muy importantes, como scripts de publicidad, códigos de seguimiento, analítica, etc., así que no te dejes sin guardar ni uno solo.
Además, deberías revisar si también hay códigos personalizados en los siguientes archivos físicos del tema Flatsome activo:
header.phpfooter.phpsingle.phphome.phpfunctions.phppage.phparchive.php- … otros
Ya casi estamos, vamos a por otro paso previo…
Exporta las opciones de Flatsome
Además de los códigos personalizados, seguro que quieres que, al activar el tema hijo, todas las configuraciones y ajustes personalizados de aspecto y demás que hayas configurado en Flatsome se mantengan en el tema hijo, en vez de tener que configurar todo de nuevo desde el principio ¿verdad?
¿A que no apetece nada tener que ponerse a configurar los tipos de letra, colores, ajustes de todo tipo?
Pues para esto nos queda un paso previo a la creación del tema hijo en sí, y es exportar todos los ajustes que hayas personalizado en Flatsome para tu web. Esto lo encontrarás en la sección avanzada de copia de seguridad e importación.
Verás que hay una caja llena de códigos raros, pues cópialos y pégalos por ahí, en ese archivo de texto que tienes para guardar todo lo que estamos haciendo, o en un archivo aparte, lo que prefieras.
¡Ya está!. Asegúrate de que no te has dejado ningún código de los pasos anteriores sin guardar, y vamos ya a crear el tema hijo…
El asistente de instalación de Flatsome
Seguramente ya ni te acuerdes, pero la primera vez que instalaste Flatsome seguramente seguiste un asistente de instalación, que te fue guiando por los pasos más importantes de la configuración inicial del tema para tu web.
Pues bien, uno de los pasos de ese asistente era, y es, precisamente crear un tema hijo, y si estamos aquí ahora es porque o no lo creaste en su momento o porque lo borraste, a saber a estas alturas ¿verdad?
No pasa nada, porque podemos retomarlo ahora.
Ve a la sección del asistente de instalación de Flatsome y comienza el asistente.
En la primera pantalla lo único que te pedirá es que empieces…hazle caso.
A continuación te pedirá que confirmes o introduzcas el código de licencia como propietario legítimo del tema Flatsome. Y si hasta ahora no tenías licencia ya estás tardando, por favor, que no hay temas más baratos que Flatsome y menos con licencia de por vida.
Si ya has adquirido la licencia, y añadida al asistente, podemos continuar, que ya solo queda 1 paso…
Crear y activar el tema hijo
Porque el siguiente paso es el último para crear un tema hijo. Solo tienes que hacer clic y ya está. Como mucho cámbiale el nombre al tema hijo y ya.
En la siguiente pantalla tendrás la confirmación de que lo has conseguido.
Restaura todos los códigos y CSS guardados
Ahora, de vuelta al escritorio de WordPress, primero comprueba que el tema hijo está creado y activo.
Si está activo, ahora solo te queda pasarte por las distintas secciones que vimos al principio y, ahora, pegar los códigos en el mismo sitio donde estaban.
Y, finalmente, ir a la sección de copias de seguridad e importación y, en esta ocasión, sustituir el código de personalizaciones que encuentres por el que guardaste, y hacer clic en el botón de importar.
Guarda los cambios y ahora, con el tema hijo de Flatsome activo, deberías tener todos tus códigos, CSS, scripts, así como cualquier ajustes y personalización, igual que antes de crear el tema hijo, con la seguridad de que ahora puedes actualizar el tema siempre sin problemas, aunque tengas códigos metidos a mano en los archivos del tema … hijo, por supuesto.
Así que acuérdate de que desde ahora, todo lo que no pueda ir en las cajas de código o CSS del tema Flatsome, y tengas que añadirlo físicamente al tema, hazlo en el tema hijo.
Espero haberte sido de ayuda para poder crear fácilmente un tema hijo para el tema Flatsome, y si te queda alguna duda escríbela abajo, en los comentarios.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Fernando, gracias por tu articulo. Yo utilizo este tema en mi web, lo descargue en su momento de no recuerdo ni de donde. Creo que una web de esas que pagas por meses y puedes descargar muchos plugins…. .
Como me gustó y he seguido utilizándolo, a posteriori lo he comprado y lo tengo legal. Pero he seguido utilizando en la web el que instale primero por miedo a dejar caer la web en la que está instalado. Sabrías decirme como convertirlo en «legal», sin que me cargue la web en la que corre?
De hecho nunca lo actualize, sigue corriendo la versión que instale en su momento.
Al comprarlo legal, lo que tengo es un fichero, terminado en.zip que descargo de Envato, pero ya te digo que nunca supe que hacer con el, y no me he atrevido a trastear….
Se que esto no es el tema de tu post, pero si tú o alguno de los seguidores sabe darme norte os lo agradeceria…..
Un saludo y gracias por tú labor
Lo ideal es meter la licencia en la página de ajustes generales del tema, y a partir de ahí ya podrás hacer actualizaciones automáticas a un clic como con los plugins. Lo bueno es que si tienes un tema hijo – y no te liaste a meter códigos a trapo en el tema original – podrás actualizar (normalmente) sin problemas. Pero vamos, que si hace mucho que no actualizas, un backup antes «porsiaca» no le sobrará 😉
Coñe, el mejor tema de WP del mundo en el mejor blog de WP del mundo.
El círculo se ha cerrado. Yo lo tengo hiperbaqueteado, he hecho de todo y verdaderas burradas con él, para woocommerce es tremendo. Lo único que le echo en falta es una manera sencilla de cambiar los breakpoints.
Es un pedazo de tema, y sí, especialmente para Ecommerce.
A ver si preparo más tutoriales sobre él, porque lo tienen muchos clientes y con los años he aprendido algunas cosillas sobre el mismo 🙂