Seguramente ya sabrás como se crea un tema hijo, los también conocidos como «child themes» y , conociendo sus ventajas e inconvenientes, seguro que más de una vez te has planteado crearlo pero, por dudas, miedo o desconocimiento, no te has atrevido. No hay problema, aquí tienes un tema hijo de ejemplo que puedes usar.
En el blog hemos visto incluso como crearlos sin siquiera tocar código, con un plugin, pero vamos, que en realidad es fácil, y aquí tienes un tema hijo de ejemplo para descargar y usarlo como plantilla para tus proyectos.
En la descarga encontrarás los siguientes archivos:
style.css: la hoja de estilos base del tema hijo, donde añadir las clases CSS personalizadas que necesitesfunctions.php: el archivo para que todo funcione, con los enqueue necesarios, y donde podrás añadir funciones personalizadasscreenshot.png: una captura para identificarlo, simple, pero que vale.
No necesitas más para empezar a personalizar tu tema hijo. Una vez lo descargues, y antes de empezar a usarlo, debes tener en cuenta unos pequeños consejos:
- Instala y activa el tema hijo como harías con cualquier otro tema.
- Abre el archivo
style.cssen el editor para cambiar donde ponenombre-carpeta-tema-padrepor el nombre exacto (mayúsculas y minúsculas también) del nombre de la carpeta del tema padre. Por ejemplo, si va a ser un tema hijo de Divi deberás sustituirnombre-carpeta-tema-padreporDivi, que es como se llama la carpeta cuando lo instalas en tu WordPress. - Si tu tema no hace
enqueueautomático de la hoja de estilos del tema hijo puedes hacerenqueuemanualmente activando la líneanombre-carpeta-tema-hijodel archivofunctions.php. del tema hijo de ejemplo (le quitas las dos barras // delante de esa línea), o sea, que pasas de esto:// wp_enqueue_style('nombre-carpeta-tema-hijo', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));a esto otro:
wp_enqueue_style('nombre-carpeta-tema-hijo', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
Verás que en este ejemplo no usamos @import como en otras ocasiones, sino que hacemos enqueue ya que es mucho mejor para el rendimiento de tu sitio. Vamos, que todos los temas deberían hacer enqueue como _s.
Nada más, simplemente utiliza este tema hijo de ejemplo como plantilla base para los tuyos, más fácil imposible.
[download id=»81142″]
Referencias y más información:
- WP Codex: wp_enqueue_style()
- WP Codex: wp_register_style()
- WP Codex: wp_enqueue_scripts
- WP Codex: wp_dequeue_style()
- WP Codex: wp_deregister_style()
- WP Codex: Temas hijos
- How to include Styles in Child Themes
- Ventajas y desventajas de los “child themes”
- Child Themes – Temas hijos
- Crea y modifica temas hijo sin tocar una línea de código
- Qué es y cómo se usa el fichero functions.php
- Como crear un tema hijo en WordPress
(Nota: por si no te has dado cuenta algunos de los enlaces que hay en esta entrada son de afiliación, de modo que si adquieres algún producto a ti te cuesta lo mismo pero a mi me pagas un café)
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Hola! Se podria hacer una captura del hijo? Tienes que tener un tema lado Divi o vale cualquiera? Gracias por el enlace! Saludos!
Funciona con cualquier tema!
¿Y si quieres agregar propiedades responsivas (adaptables) con Bootstrap a un tema que no lo tiene?
Gracias Fernando!
tengo una duda:
En style.css dices que debemos cambiar «nombre-carpeta-tema-padre» por el nombre de la carpeta del tema, ejemplo: «Divi»
Pero en el archivo functions.php veo referencia a la frase: nombre-carpeta-tema-padre .
Entonce también debo cambiar el texto «nombre-carpeta-tema-padre» dentro de functions.php por: «Divi» ???
También veo referencia al texto: «nombre-carpeta-tema-hijo» , lo debo cambiar por «Divi-Child»? (siempre y cuando la carpeta le haya puesto ese nombre.
Fernando, estoy intentando descargarme el «tema hijo de ejemplo» pero me direcciona a un foro «Download-monitor no me aparece» y tampoco lo veo en tu sección de descargas.
Aún así, muchísimas gracias por el aporte! 😉
tontadas de los permalinks, prueba ahora, ya va 😉
¡Una duda! Utilice tu plantilla de ejemplo y aunque me carga perfectamente el tema padre (con la primera opción, sin necesidad de retirar las dos barras //) me queda la duda de si hay que renombrar esto: ‘example_enqueue_styles’
Mi archivo ‘functions.php’ queda así: https://drive.google.com/open?id=0BwoelD9U7fvXUjlyMVBPZ01vQlk
He notado un pelin más de velocidad en dispositivo móvil, tampoco demasiado. En Internet Explorer 8, directamente mi tema no se ve y aunque arregle algunas cosas del menú (trucos: ‘if’) no he logrado cuadrar el top y el fondo.
Por otro lado, Microsoft dejo de ofrecer actualizaciones para la versión, 8, 9 y 10 (el 12-01-2016) y recomienda actualizar para evitar fallos de seguridad, no me voy a estrujar más la cabeza ya que ni el propio autor del tema lo hace, algo que yo sí he hecho en el pasado cuando diseñaba exclusivamente en HTML y CSS.
Como dato anecdótico, diré que aún tengo otros dos sitios con WordPress cuyo tema hijo esta con ‘@import’ y sí que se ven bien en ‘Internet Explorer 8’ (IE 8). Yo todo convencido por lo que dices en otro artículo, deduje que el problema de mi web para no cargar en ‘IE 8’ era el uso de ‘@import’ en tema hijo, y actualizado éste por el uso de ‘enqueue’, descubro que no, el problema es propio del tema padre.
Te agradecería una respuesta rápida, porque no dudes que haré artículo y video de esto, nombrando a ‘Ayuda WP’ pues yo en programación soy un ‘cateto a babor’, lo justo y preciso y donde me indiquen. La verdad como decían en instituto, prefiero pasar por tonto ‘2 min’ (lo que dura esta pregunta/duda) que no toda la vida y quedarme con la duda.
Saludos.
Pd.: Podrías haber habilitado en Disqus, la subida de imágenes, así evitas que pongamos enlaces 🙂