La guía definitiva para temas infantiles de WordPress

¿Alguna vez ha encontrado un tema de WordPress casi perfecto para su sitio web, pero decidió no seguirlo debido a un elemento de diseño diminuto y devastador que no podía pasar por alto? ¿Es el estilo de fuente, la paleta de colores o la ubicación de los elementos de diseño, tal vez?

El mercado de temas de WordPress está saturado con tantos temas geniales, tanto gratuitos como premium, pero a menos que contrate a un desarrollador para crear un tema personalizado para su sitio, hay pocas posibilidades de que encuentre uno que sea perfecto hasta el último píxel.

Los temas secundarios de WordPress permiten a los webmasters modificar los archivos de un tema mientras mantienen su funcionalidad principal en su lugar sin correr el riesgo de perder las modificaciones cada vez que se actualiza el tema. Te dan el poder de modificar la apariencia de un tema desde algo tan pequeño como la llamada a la acción en un botón hasta cambiar por completo cada elemento de diseño.

En este artículo, cubriremos todo lo que necesita saber sobre los temas infantiles, desde lo que son hasta por qué son tan importantes. Terminaremos con un tutorial sobre cómo usar temas secundarios en su propio sitio de WordPress, de la manera correcta.

¿Suena bien? ¡Empecemos!

Temas infantiles de WordPress: conceptos básicos

Los temas secundarios son temas separados que heredan activamente la funcionalidad de sus temas principales. Una vez que active un tema hijo, WordPress comprobará si tiene alguna funcionalidad en particular codificada. La funcionalidad de un tema secundario anula la del tema principal, lo que significa que la funcionalidad del tema secundario se aplicará a su sitio web. Sin embargo, si la funcionalidad no existe, buscará en los archivos de los padres e irá con el codificado allí.

En inglés simple, los temas secundarios son archivos de tema duplicados y cada vez que siente la necesidad de modificar aspectos del diseño o alguna funcionalidad, lo edita en los archivos del tema secundario. Esta es una gran característica porque permite a los webmasters realizar cambios en el tema sin el temor persistente de estropear los archivos originales.

La mayoría de los temas de WordPress hoy en día vienen con sus temas secundarios (o variaciones de sus temas secundarios) desde el primer momento.

¿Por qué debería utilizar temas para niños?

Realizar modificaciones y alteraciones en su tema a través de temas secundarios es una práctica recomendada ampliamente aceptada (y recomendada). Piénsalo de esta manera: si te equivocas la primera vez, siempre puedes volver a intentarlo. Aparte de este destacado beneficio, los temas secundarios tienen mucha importancia para el mantenimiento y desarrollo de su sitio de WordPress.

Elimina el riesgo de perder modificaciones

Hacer cambios en su tema principal (los archivos del tema original) significa que cuando actualice el tema, los cambios se perderán. Esto te deja en una especie de callejón sin salida; Si actualiza el tema, pierde todas las modificaciones, pero si no actualiza el tema, tendrá errores en su sitio que podrían afectarlo negativamente.

Se puede argumentar que simplemente puede copiar y pegar el código asociado con las modificaciones en su tema principal una vez que haya terminado de actualizarse. Aunque eso es completamente posible, ¿por qué dedicar tiempo a localizar las modificaciones que realizó y copiarlas y pegarlas en los archivos de tema actualizados cada vez que actualice su tema? Es un proceso fácil pero falible.

Aquí es donde se percibe por primera vez la importancia de los temas infantiles. Al utilizar temas secundarios, puede conservar todas las modificaciones y actualizar de forma segura el tema de su sitio.

Mantener la organización del código

Un tema de WordPress generalmente se compone de unos pocos miles de líneas de código y varios archivos diferentes: HTML, CSS, PHP, JavaScript y más. Y debido a esto, cualquier pequeño cambio realizado aquí y allá se vuelve difícil de rastrear. Cuando llegue el momento de volver atrás y editar el tema o corregir errores imprevistos, resultará bastante costoso (tanto en términos de tiempo como de presupuesto).

Como comentamos anteriormente, los temas secundarios se heredan activamente de sus temas principales. Cualquier cambio que realice en el tema hijo permanecerá allí (¡lo que sucede en los temas secundarios permanece en los temas secundarios!) Y es más fácil de rastrear porque solo tendrá unos pocos cientos de líneas de código (en las circunstancias más agresivas) en lugar de un unos miles.

Como probablemente ya sabrá, no hay desventajas en el uso de temas secundarios. En realidad, protegen su sitio de errores accidentales.

Cómo crear un tema infantil en WordPress

La mayoría de los temas vienen con temas secundarios, pero si encuentra uno que no le guste, entonces crear un tema secundario por sí mismo no es difícil. Estaré demostrando el tutorial creando un tema hijo para nuestro tema Sparkling.

Paso 1: cree un directorio para el tema hijo en su instalación de WordPress.

1. Navegue hasta el directorio de temas de su sitio de WordPress ( /wp-content/themes ).
2. Cree una nueva carpeta y asígnele el nombre sparkling-child . Es una buena práctica darle a su tema hijo el mismo nombre que el padre con -child al final.

Agregaremos todos los archivos del tema hijo a esta carpeta. Dicho esto, el único archivo que requiere un tema hijo para funcionar correctamente es el archivo style.css .

Paso 2: cree un archivo style.css para su nuevo tema hijo.

1. Navegue al directorio del tema hijo creado en el Paso 1, es decir, /wp-content/themes/sparkling-child .
2. Cree un nuevo archivo .css en el directorio y style.css nombre style.css .
3. Copie y pegue el siguiente código en el nuevo archivo style.css :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

En el código dado arriba, las líneas más importantes son las que comienzan con Theme Name , Template y @import . Es muy importante que complete estas líneas correctamente si está creando un tema secundario para otro tema principal. La línea @import asegura que no tenga que volver a escribir las reglas CSS del tema principal desde cero. Sin la línea @import , el nuevo sitio solo tendrá el contenido cargado, sin estilo.

Si su tema principal tiene varias hojas de estilo, omita este paso. Le mostraremos cómo importar varias hojas de estilo utilizando una función nativa de WordPress en los siguientes pasos.

Paso 3: Crea el archivo functions.php (opcional).

El archivo functions.php permite a los desarrolladores web agregar funcionalidad a sus sitios web de WordPress mediante el uso de funciones nativas de WordPress y código PHP.

1. Navegue a la carpeta del tema de su hijo, es decir, sparkling-child .
2. Cree un archivo .php y .php el nombre functions.php .
3. Agregue el siguiente código al archivo functions.php:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

Es importante tener en cuenta que un tema hijo no requiere un archivo functions.php para funcionar. De hecho, solo debe agregar este archivo si tiene la intención de modificar la funcionalidad del tema principal. En la mayoría de los casos, una hoja de estilo es suficiente, pero si su tema principal tiene varias hojas de estilo, tendrá que crear un archivo functions.php .

Paso 4: Importe varias hojas de estilo (opcional).

Si, por ejemplo, el tema principal que ha seleccionado viene con más de una hoja de estilo, importarlas a su tema secundario usando @import ralentizará su sitio web en un par de segundos, lo cual no es bueno. No desea aumentar el tiempo de carga de la página de su sitio si se puede evitar con unas pocas líneas de código.

1. Navegue al directorio de su tema hijo y abra el archivo functions.php en un editor de texto.
2. Agregue las siguientes líneas de código al archivo functions.php debajo de la etiqueta de apertura <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

La función wp_enqueue_style() utilizada en el código anterior importará varias hojas de estilo a su tema hijo sin ralentizar su sitio.

Nota: Las mejores prácticas para crear temas secundarios sugieren que, independientemente de la cantidad de hojas de estilo que tenga su tema principal, siempre debe importarlas utilizando el código proporcionado anteriormente.

Paso 5: sube el tema hijo.

Ahora que ha creado con éxito el tema hijo, es hora de subirlo a su sitio web de WordPress y activarlo.

1. Comprima el directorio del tema hijo en un archivo .zip .
2. Inicie sesión en su panel de administración de WordPress y navegue hasta Apariencia > Temas .
3. Haga clic en el botón Agregar nuevo en la siguiente pantalla.

   

4. Haga clic en el botón Cargar tema para continuar.

   

5. Busque el archivo .zip su tema hijo y cárguelo.
6. Una vez que se cargue el tema hijo, haga clic en Activar .

También puede cargar el tema hijo a través de su cliente FTP copiando directamente y pegando el archivo .zip en el directorio de temas. Si está creando un tema hijo para otro tema, asegúrese de realizar las modificaciones necesarias en el código proporcionado anteriormente.

Este tutorial solo está destinado a demostrar cómo se crea un tema hijo. Hemos creado un tema hijo para Sparkling que puedes descargar directamente si prefieres no dedicar tiempo a crear el tuyo propio.

Personalizar el tema de su hijo

Suponiendo que todo salió según lo planeado, cuando active el tema secundario, su sitio web debería verse exactamente igual que cuando se activa el tema principal. ¡Pero espera! ¿No es el objetivo de crear un tema hijo para que su sitio web se vea diferente?

En esta sección, le mostraremos cómo puede comenzar a personalizar el tema hijo para realizar modificaciones.

Aplicar estilos personalizados

Dado que el primer archivo (y el archivo obligatorio) que creamos fue style.css , solo tiene sentido comenzar agregando estilos personalizados al tema hijo que lo usa. Al agregar código CSS personalizado a la hoja de estilo, podrá anular la hoja de estilo del tema principal.

Con CSS, puede modificar casi todos los aspectos de diseño y estilo del tema activado, desde colores y botones hasta dimensiones y estilos de fuente. Los desarrolladores web con una verdadera habilidad para CSS modifican todo el diseño del tema hijo para que sea único.

Todo lo que tiene que hacer es agregar un código CSS personalizado al final del archivo style.css de su tema style.css y listo. Aquellos de ustedes que no quieran acceder al cliente FTP de su sitio cada vez que sea necesario realizar un cambio simple, pueden navegar al editor predeterminado de WordPress ( Apariencia > Editor ) y agregar código CSS directamente desde allí.

Técnicas alternativas de modificación de temas

Agregar código CSS al archivo style.css es la forma más sencilla de realizar modificaciones en el tema hijo. Sin embargo, si desea llevar las cosas al siguiente nivel y tal vez agregar alguna funcionalidad nueva y personalizada al tema secundario, ahí es donde las cosas se ponen serias. Hay diferentes tipos de modificaciones que puede realizar (además de cambiar los elementos de diseño) como:

• Agregue nuevas funciones al archivo functions.php . Ya hemos creado el archivo functions.php para su tema hijo, así que todo lo que tiene que hacer ahora es agregarle algunas funciones personalizadas dependiendo de la funcionalidad que desee lograr. Puede codificar en PHP o utilizar funciones nativas de WordPress.
• Edite archivos de plantilla. Si style.css y functions.php simplemente no lo cortan y aún necesita modificar el tema, puede copiar y pegar los archivos de plantilla del tema principal y editarlos en consecuencia.
• Agregue nuevos archivos de plantilla. Si ha encontrado plantillas que le gustan en otro lugar (no en el directorio del tema principal) o si desea crear sus propias plantillas, puede agregarlas directamente al tema secundario y continuar desde allí.

Puede estar seguro de saber que su sitio web de WordPress estará a salvo de errores dañinos y no deseados, independientemente del método (s) que adopte para realizar modificaciones en su tema activado. Si acaso, algo con el código sale mal, sabrá exactamente dónde ocurrió el error y podrá corregirlo. (Pista: ¡por lo general está en las últimas líneas que agregaste!)

Una de las mejores cosas de los temas secundarios es que permiten a los usuarios personalizar completamente el tema principal para que coincida con la marca de su sitio, lo que es especialmente útil tanto para empresas nuevas como establecidas. Y si desea rediseñar completamente su sitio más adelante basándose en el mismo tema principal o en un nuevo tema principal, ¡siempre puede crear un nuevo tema secundario e ir desde allí!

Envolviendolo

Los temas secundarios son la forma recomendada de realizar modificaciones en un tema de WordPress. Evitan que los usuarios cometan errores potencialmente dañinos en sus archivos de temas originales y corren el riesgo de perder las modificaciones cada vez que se actualiza el tema.

Cubrimos todo lo que necesita saber sobre los temas para niños en WordPress, discutimos por qué son tan importantes y lo guiamos a través de un tutorial en profundidad sobre cómo crear su propio tema para niños desde cero. Para ayudarlo a comenzar a realizar modificaciones, concluimos con una breve sección sobre cómo puede comenzar a personalizar el tema hijo.

¿Está de acuerdo en que todas las modificaciones de diseño y funcionalidad deben realizarse a través de temas secundarios? ¿Pudiste crear un tema hijo y activarlo con éxito en tu sitio de WordPress? Nos encantaría conocer su experiencia, así que háganoslo saber comentando a continuación.