Herencia del tema padre pasa al tema hijo, en WordPress
¿Qué es un tema en WordPress?
Es como la “piel” que recubre tu weblog.
Un tema WordPress es una colección de archivos que trabajan juntos para mostrar un interfaz gráfico con un diseño unificado oculto bajo el “capó” de tu weblog. Estos archivos se llaman archivos de plantilla. Un tema modifica el modo en que el sitio es mostrado, sin modificar el software subyacente.
Los temas pueden incluir archivos de plantilla personalizados, archivos de imagen (.jpg, .gif, .png), hojas de estilo (.css), páginas personalizadas, así como cualquier otro archivo de código (.php) necesario.
Profunda revisión del artículo que hice el pasado 2016
En enero de 2016, ya hice un artículo relacionado con el tema hijo en WordPress y cómo crearlo con el método que se llevaba usando por años (@import).
Con tan mala suerte que al lanzar el artículo + vídeotutorial, al día siguiente AyudaWP alertaba que había que cambiar el método y usar uno un poco más lioso (enqueue). Ese es el que vas a aprender en esta ocasión, pues carga tu web más rápido, en caso que necesites crear un tema hijo.
He estado toda una semana preparando este material informativo y preguntando a expertos en PHP, para contestar todas aquellas dudas y preguntas que nos hacemos, los que llegamos por primera vez a WordPress y oímos hablar de los temas hijos.
Para completar esta información, hice 2 videotutoriales para aprender a crear un tema hijo fácilmente. Un video usando un plugin y el otro, para que aprendas de forma manual.
Espero que ahora sí, entendáis mejor qué es un tema hijo.
Índice
- Cuidado al modificar en el Editor de WordPress
– WordPress en su comienzo no tenía temas hijos - Panel de opciones de tu tema
– Buen habito guardar modificaciones del panel de opciones - ¿Qué es el CSS?
– CSS adicional, es una nueva opción incluida en WordPress 4.7
– Buen habito guardar retoques CSS - Cuándo puedes actualizar tema padre sin riesgo de perder modificaciones
- En qué momento es aconsejable usar un tema hijo
– Qué puede pasar tras activar un tema hijo - Echa un vistazo de forma local o en plataforma de pruebas
- Guía para crear tema hijo
- Plugins que permiten crear y modificar tema hijo
– Videotutorial crea tu tema hijo con un plugin
- Crea tema hijo manualmente con acceso por FTP Filezilla
Paso 1. Crear carpeta tema hijo
Paso 2. Crear hoja de estilos (CSS)
Paso 3. Crear el archivo functions (PHP)
Paso 4. Crear la imagen que refleje qué es un tema hijo
Paso 5. Subimos todo por FTP Filezilla a nuestra instalación de WordPress
– Videotutorial crea tu tema hijo manualmente - Opinión
Cuidado al modificar en el Editor de WordPress
Cuando descargas (desde el repositorio de WordPress.org) un tema (theme) normalmente prediseñado, éste suele ser un tema principal, también denominado tema padre. No es aconsejable personalizar éste, desde la opción de WordPress que habilita para ello.
Es decir, desde Apariencia > Editor (no tocar si está seleccionado el tema padre). Esta opción es mejor que no se toque cuando estás en el tema padre, pues cualquier cambio será borrado en una actualización del tema padre. Y por otro lado tampoco es prudente que la toques si no eres un experto, pues puedes fastidiar tu sitio web.
WordPress en su comienzo no tenía temas hijos
Al inicio de la andadura de WordPress las modificaciones del tema se hacían desde el apartado antes mencionado: Apariencia > Editor. Y ahí estaban todos los archivos propios del tema. Con que si modificabas algo y después querías actualizar el tema, todos esos datos se perdían, por lo que obligaba a hacer copias de dichos archivos y perder mucho tiempo.
Por ello, un buen día decidieron hacer uso de los temas hijos, los cuales guardarían todos esos cambios cuando el tema padre debiera actualizarse.
Panel de opciones de tu tema
Esto es diferente en el caso de que tu tema prediseñado tenga un panel de opciones, donde te permita cambiar ciertos parámetros (diseño, colores, fuentes, etc.).
Dicho panel, normalmente se encuentra en Apariencia, a veces bajo el nombre de ‘Theme Options’ o ‘Theme Settings’, en otras ocasiones dentro de la pestaña Personalizar.
Buen habito guardar modificaciones del panel de opciones
Para ello puedes hacer capturas de pantalla y en el caso de los colores apuntarlos en una agenda tipo Trello.
¿Qué es el CSS?
Para que lo entendamos rápidamente, en una web vemos 2 denominadores comunes:
– Un contenido (escrito en HTML),
– Y cómo se muestra éste, la hoja de estilos (escrito en CSS). ¿Cómo se muestra? Pues el color/tipo de la fuente, el tamaño, si queda a la derecha la información, si queremos el fondo de un color característico, etc.
CSS adicional, es una nueva opción incluida en WordPress 4.7
Así mismo, desde enero de 2017, WordPress 4.7 incluye un apartado extra para editar el CSS fácilmente sin la necesidad de un plugin o un tema hijo, para ese hecho. Esta nueva opción se encuentra en Apariencia > Personalizar > CSS adicional.
Es más, comentan desde el codex que tengamos en cuenta que los cambios de CSS están vinculados con nuestro tema. Esto significa que si cambiamos a un nuevo tema, esos estilos CSS personalizados ya no estarán activos (por supuesto, si cambias a tu tema anterior, volverán a estar allí).
Buen habito guardar retoques CSS
En el caso de actualizar a una nueva versión de WordPress, en teoría no te desaparecería dicha información. Pero es bueno ser previsor, para lo cual te recomiendo que hagas copias de tus modificaciones en CSS adicional con Visual Studio Express / Bloc de notas (Windows) o TextWrangler / TextEdit* (Mac), y guardes con la extensión .css o .txt , respectivamente.
*: TextEdit > Formato > Convertir a texto sin formato
Si quieres aprender más sobre cómo personalizar a tu gusto las hojas de estilo (CSS), te recomiendo veas el siguiente artículo de Aula CM: Códigos CSS y HTML para editar tu página web en WordPress.
Cuándo puedes actualizar tema padre sin riesgo de perder modificaciones
Tanto en el caso del panel de opciones de tu tema como en la opción del CSS adicional, puedo afirmar que si actualizas el tema padre, no se sobreescribe los cambios que hayas hecho en ambos sitios.
En qué momento es aconsejable usar un tema hijo
Cuando quieras cambiar funciones que el tema padre no tiene o algún plugin te indique hacerlo desde un archivo php muy específico, normalmente desde functions.php. Principalmente, para trastear con archivos .php siendo los más habituales: header.php y footer.php (estos 2 últimos se copian completamente).
Si quisieras cambiar más cosas de ese tema, aún cuando pudieras hacerlo desde el tema hijo, los expertos recomiendan que ya te decidas por aprender a personalizar tu propio tema, desde cero. Para lo cual, es recomendable aprender a hacerlo con un framework.
¿Qué es un framework? Desde la perspectiva de un arquitecto (otra clase de diseñador)… El framework es la madera que da estructuras definidas a tu casa. Tales como paredes, ventanas, puertas y un techo. Es la herramienta que usas para administrar cómo se aplica tu tema, cuándo y dónde se muestra el contenido y el diseño general de tu hogar.
Qué puede pasar tras activar un tema hijo
Recuerda que siempre hablo desde el punto de vista de haber personalizado ya un tema padre y no haber hecho un tema hijo, desde el mismo momento que descargaste el tema padre que ibas a usar.
Así pues, date cuenta que cuando activas un tema hijo, es como si en realidad estuvieras activando un nuevo tema (aunque herede características del tema padre) y es probable que tengas que volver a:
- Introducir todos los cambios que hiciste en tu panel de opciones o en CSS adicional (recuerda que te dije que es un buen habito guardar esos parámetros)
- Situar el menú en la colocación que tenías antes (Apariencia > Menús / Apariencia > Personalizar > Menús)
- Las opciones del tema: color/imagen del fondo y la imagen de cabecera
Echa un vistazo de forma local o en plataforma de pruebas
Soy consciente de que apesar de toda esta información, siempre surgen nuevas dudas, es por ello que te recomiendo que compruebes por ti mismo todos estos aspectos.
Por un lado puedes hacerlo de forma local. Y por otro lado, tienes la posibilidad de hacerlo en una plataforma de pruebas (CDMon) en servidor online, por tiempo ilimitado (aunque con renovación mensual). Así pues, te dejo ambos enlaces a continuación:
- WordPress: cómo trabajar de forma local en Mac (sirve para Windows también)
- Plataforma de pruebas en CDMon
Guía para crear tema hijo
Vas a ver 2 opciones, con plugin y manualmente.
- Una con plugin, para ello recomiendo uno muy concreto aunque he probado otros que te citaré.
- Y otra manualmente, donde vas a ver los códigos a introducir a tu hoja de estilos CSS (style.css) y archivo PHP (functions.php). Esto lo subirás desde una carpeta recién creada para la ocasión y ubicarás ésta (gracias a FTP filezilla) donde tengas instalado tu WordPress, concretamente dentro de la carpeta: themes*.
*: wp-content > themes
Una vez creado el tema hijo con cualquiera de los plugins o manualmente, podrás acceder a todos los archivos creados desde el Escritorio de WordPress > Apariencia > Editor > Elige el tema a editar: procura que sea cualquiera que ponga hijo o child.
Plugins que permiten crear y modificar tema hijo
Si tu caso es de ese porcentaje de personas que no dispone de acceso al servidor donde tienes alojada tu web (porque quien te la ha diseñado no ha querido darte acceso), tendrás que hacerlo mediante un plugin.
Child Theme Creator by Orbisius By Svetoslav Marinov (Slavi)
- Muy bueno. Crea y copia varios archivos: style.css, functions.php, header.php, footer.php
- En el caso concreto de functions.php te crea el código completo, tanto la llamada a la hoja de estilos del tema padre, como a la del tema hijo (si es que hubieras modificado algo por CSS desde ahí)
- Crea la screenshot.png (la imagen del diseño web) de nuestro tema padre
- Llevan cerca de 4 años dando cobertura y ayuda
- Se puede borrar el plugin después y no afecta al tema hijo creado
- Habría sido mi elección final de no ser por el hecho de no poder elegir el nombre de la carpeta del tema hijo, por lo que más abajo te muestro cómo hacerlo manualmente todo
Videotutorial crea tu tema hijo con un plugin: Child Theme Creator by Orbisius
- WordPress: tema hijo créalo fácilmente – Plugin
Tema hijo hereda características de tema padre. Vas a verlo por el método oficial del codex (enqueue), usando un plugin*.
*: Child Theme Creator by Orbisius
One-Click Child Theme By Terry Chay
- Éste crea la hoja de estilos (style.css) y el archivo de funciones (functions.php) vacíos, hay que meter el código a mano
- Está desactualizado desde hace tiempo aunque parece que sigue funcionando bien
- Se puede borrar el plugin después y no afecta al tema hijo creado
Child Theme Generator By Serafino Corriero
- Éste crea la hoja de estilos (style.css) y el archivo de funciones (functions.php) con el código necesario y completo en el caso de functions.php también llamada a la hoja de estilos del tema padre e hijo (por si te da por modificar el CSS desde ahí)
- Parecía bueno y fácil, pero da error y el autor no termina de solucionarlo aunque a mí me ha funcionado bien en la plataforma de pruebas de CDMon
- Se puede borrar el plugin después y no afecta al tema hijo creado
Child Theme Configurator By Lilaea Media
- Muy pesado, trae más cosas además de la creación de un tema hijo. Cosas que seguramente puedes encontrar en el panel de opciones de tu tema prediseñado
- Se puede borrar el plugin después y no afecta al tema hijo creado
Crea tema hijo manualmente con acceso por FTP Filezilla
Tomé apuntes de AyudaWP desde este artículo: Tema hijo de ejemplo donde muestra al final del mismo la opción de descargarlo. Viene con el archivo functions.php al completo (llamando a la hoja estilos padre e hijo). Si bien, yo sigo el código sencillo del codex (llamada únicamente a la hoja de estilos CSS del tema padre).
Paso 1. Crear carpeta tema hijo
Creamos una carpeta nueva y de momento la dejas en la zona escritorio de tu ordenador. Elige el nombre que quieres aunque es recomendable que guarde parentesco con el nombre del tema padre. Si el tema padre se llama oxygen (mi caso), la carpeta del tema hijo se llamaría oxygen-hijo.
Aquí irás guardando los siguientes elementos necesarios:
- La hoja de estilos CSS (style.css)
- El archivo functions PHP (functions.php)
- Imagen que representa al tema hijo (screenshot.png)
Para los dos primeros necesitarás usar ciertas herramientas: Visual Studio Express (Windows) o TextWrangler (Mac), y guardas con la extensión .css o .php depende de lo que requieras. Considera añadir esa terminación antes de guardar el archivo final.
Paso 2. Crear hoja de estilos (CSS)
Una vez creada la carpeta del tema hijo (oxygen-hijo), dentro de ella vamos a crear la hoja de estilos (CSS), es decir el fichero style.css (nombre genérico). Dentro de esta hoja de estilos recién creada, deberemos copiar 2 datos: Theme Name y Template. Os puede quedar algo parecido a esto.
/* Theme Name: Oxygen hijo Template: oxygen Description: Tema hijo de Oxygen para hacer cambios sin riesgo Author: AlienWP */ /* Empiezo a añadir cambios al CSS aquí abajo (desde enero 2017 no es necesario porque ya existe CSS adicional */
Las líneas a destacar son:
a) Theme Name: diferente del nombre del tema padre pero recomendable que guarde parentesco para no despistarte. En mi caso: Oxygen hijo.
b) Template: debe ser el nombre de la carpeta del tema padre. Si la carpeta se llama oxygen eso es lo que debes poner, sin cambiarlo o no funcionará. Recuerda respetar mayúsculas y minúsculas, así como guiones altos en caso de tenerlos. Por ejemplo, si tu tema padre se llama Divi, deberás ponerlo tal cual, respetando la inicial en mayúsculas.
Description y Author, no son datos necesarios, pero a mí, me gusta ponerlo para que se vea reflejado, cuando seleccionemos el tema hijo desde el apartado: Apariencia > Temas.
Las modificaciones a la hoja de estilos CSS, ya no es necesario hacerlo desde el tema hijo, ni siquiera desde un plugin, dado que desde enero de 2017, WordPress 4.7 incluyo una opción especial para editar el CSS.
Dicha opción es encontrada en Apariencia > Personalizar > CSS adicional. Te permite hacer todos los cambios por ahí, y con una vista previa de los mismos. Además, estos cambios son vinculados al tema en cuestión. Por lo que si cambias a otro tema desaparecerán, pero si vuelves al que tenías modificado ahí seguirán dichos cambios.
Paso 3. Crear el archivo functions (PHP)
Antes de enero de 2016 no era necesario crear este archivo pero tras dicha fecha sí. El caso es que cambió la forma de llamar desde el tema hijo, a la hoja de estilos del tema padre. Anteriormente se hacia desde la hoja de estilos CSS (style.css) con otro código (@import url("../oxygen/style.css");) aunque sigue siendo funcional, da cierto retraso a la carga de nuestras webs.
Actualmente la llamada a la hoja de estilos del tema padre se hace desde el archivo de funciones: functions.php
Tienes que crear este archivo y éste es el código que debes introducir, aunque tras el mismo te indico qué debes modificar para tu caso concreto (el nombre de tu tema padre).
<?php
add_action( 'wp_enqueue_scripts' , 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'oxygen', get_template_directory_uri() .'/style.css' );
}
?>
De todo lo que os pongo en este código de arriba, sólo tenéis que modificar donde pongo oxygen, ya que es el nombre de mi tema padre. Ahí pones el nombre de tu tema padre. En el apartado del codex que habla sobre temas hijos, esta zona donde puse oxygen se nombra como parent-style.
Si el nombre de tu tema padre, tuviera alguna mayúscula o guión, debes ponerlo. Ya que hay que respetar tal cual el nombre que tuviera tu tema padre o cómo hayas nombrado dicha carpeta. Si fuera nombrada como: oxygen_1.2 tendrías que poner eso tal cual en el espacio que te comenté.
No es necesario añadir nada más a ese código. Si bien, existe otro código para llamar a la hoja de estilos del tema hijo, es algo que ya no se necesita desde que existe CSS adicional, la nueva opción que nos brinda WordPress 4.7 desde enero 2017 y que podrás encontrar desde Apariencia > Personalizar > CSS adicional.
Nota: Es muy importante que tras el cierre del código PHP ?> no haya espacios ni saltos de línea, porque sino el código no funcionará (no cargará la biblioteca de Medios, por ejemplo). Gracias a Jhon Marreros, por revelarme este dato. Igualmente verás sitios donde este código no tienen dicho cierre. Es opcional ponerlo, según me comento Angeles Portillo. Si bien, me pareció leer en algún sitio que depende de la versión PHP que tengas, será necesario incluirlo o no. Por si acaso, ponlo.
Paso 4. Crear la imagen que refleje qué es un tema hijo
Crea una imagen que represente el tema personalizado (tema hijo), para distinguirlo mucho mejor desde el panel de administración de WordPress, concretamente desde el apartado: Apariencia > Temas.
Para ello puedes hacer clic sobre la imagen del tema padre en dicho apartado, y acto seguido botón derecho del ratón y ‘guardar imagen como’. Se guarda por defecto con el nombre y formato que necesitas: screenshot.png inclúyela, si quieres tal cual, dentro de la carpeta del tema hijo.
Si quieres editar esa imagen, puedes subirla a la web: BeFunky y editarla a tu gusto (necesitarás tecnología flash).
Paso 5. Subimos todo por FTP Filezilla a nuestra instalación de WordPress
Esta nueva carpeta que cree y denomine en mi caso, oxygen-hijo, la necesito dentro de /wp-content/themes/ como si otro tema (theme) fuese.
Ahora necesitamos tener acceso a tu instalación de WordPress en el servicio de alojamiento web que tengas contratado. Puedes hacerlo desde la propia web o desde FTP Filezilla con el acceso* que te proporcionará tu propia compañía de alojamiento web.
*: servidor, nombre de usuario, contraseña, puerto
Para mí, es más cómodo hacerlo por FTP Filezilla, sabiendo los datos necesarios.
Videotutorial crea tu tema hijo manualmente
- WordPress: tema hijo créalo fácilmente – Manual
Tema hijo hereda características de tema padre. Vas a verlo por el método oficial del codex (enqueue), de forma manual.
Opinión
Para que te quede claro, un resumen de cuando es necesario hacer un tema hijo.
- No es necesario que hagas un tema hijo si sólo planeas modificar en el tema padre algo del panel de opciones* o del CSS**
*: Apariencia > Theme Options o Settings / Apariencia > Personalizar
**: Apariencia > Personalizar > CSS adicional - Sí es necesario hacer un tema hijo, si quieres cambiar funciones (.php) de tu tema padre (tema principal) o de algún plugin
- Nunca acudas a Apariencia > Editor y selecciones tema padre, para hacer retoques del mismo. En todo caso, una vez creado el tema hijo, accede a este mismo lugar y elige en la opción tema a editar que sea el hijo o child
De todos modos, yo recomiendo que hagas un tema hijo, siempre es más fácil crearlo al principio (cuando descargas el tema padre definitivo a usar), porque luego como ya viste al comienzo, es más pesado de proceder a su inclusión, una vez modificamos varias cosas del tema padre.
Espero haberme explicado con la suficiente claridad, teniendo en cuenta que no soy experto en la materia y es por ello que he tenido que contrastar la información con gente especializada en código PHP, dado que como administrador de varios sitios en WordPress, me interesa aprender este asunto que considero algo básico.
Cualquier duda, podéis hacerla por aquí o a las personas que nombré en diferentes apartados.
Fuente imágenes
Ver apartado relacionado en mi Pinterest.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.