La guía definitiva para los temas secundarios de WordPress

¿Alguna vez encontró un tema de WordPress casi perfecto para su sitio web, pero decidió no hacerlo debido a un elemento de diseño diminuto y angustioso 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 manteniendo su funcionalidad principal sin correr el riesgo de perder las modificaciones cada vez que se actualiza el tema. Le dan el poder de modificar la apariencia de un tema desde algo tan pequeño como el llamado a la acción de un botón hasta cambiar por completo cada elemento de diseño.

Este artículo cubrirá todo lo que necesita saber sobre los temas infantiles, desde qué son hasta por qué son tan importantes. Terminaremos con un tutorial sobre el uso de temas secundarios en su sitio de WordPress, de la manera correcta.

¿Suena bien? ¡Empecemos!

Temas secundarios de WordPress: conceptos básicos

Los temas secundarios son temas separados que heredan activamente la funcionalidad de sus temas principales. 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. Una vez que active un tema secundario, WordPress verificará si tiene alguna funcionalidad particular. 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 temas duplicados y cada vez que siente la necesidad de modificar aspectos de diseño o alguna funcionalidad, los 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 temas secundarios (o variaciones de sus temas secundarios) listos para usar.

¿Por qué debería usar temas secundarios?

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

Elimine el riesgo de perder modificaciones

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

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 totalmente 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 comprende por primera vez la importancia de los temas secundarios. 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 unas pocas 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 y editar el tema o corregir errores inesperados, resultará bastante costoso (tanto en términos de tiempo como de presupuesto).

Como se discutió anteriormente, los temas secundarios se heredan activamente de los temas principales. Cualquier cambio que realice en el tema secundario permanece 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 pocos miles.

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

Cómo crear un tema hijo en WordPress

La mayoría de los temas vienen con temas secundarios, pero si encuentra uno de su agrado que no los incluye, crear un tema secundario usted mismo no es difícil. Demostraré el tutorial creando un tema secundario para nuestro tema Sparkling.

Paso 1: Cree un directorio para el tema secundario 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 sparking-child . Es una buena práctica darle a su tema secundario el mismo nombre que el padre con -child agregado al final.

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

Paso 2: Cree un archivo style.css para su nuevo tema secundario.

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

En el código anterior, las líneas más importantes son las que comienzan con Theme Name , Template e @import . Debe completar estas líneas correctamente si está creando un tema secundario para otro tema principal. La línea @import te asegura que no tienes 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 usando 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 , niño chispeante .
2. Cree un archivo .php y asígnele el nombre functions.php .
3. Agrega el siguiente código al archivo functions.php:

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 @import ralentizará su sitio web por 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. Navega al directorio de tu tema hijo y abre 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 :

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

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

Paso 5: Cargue el tema hijo.

Ahora que ha creado con éxito el tema secundario, es hora de cargarlo en su sitio web de WordPress y activarlo.

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

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

Este tutorial solo pretende demostrar cómo se crea un tema secundario. Hemos creado un tema secundario para Sparkling que puede descargar directamente si prefiere no dedicar tiempo a crear el suyo propio.

Personalización de su tema hijo

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

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

Aplicación de 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 secundario que lo usa. Al agregar un código CSS personalizado a la hoja de estilo, podrá anular la hoja de estilo del tema principal.

Con CSS, puede modificar 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 secundario para que sea único.

Todo lo que tiene que hacer es agregar un código CSS personalizado en la parte inferior del archivo style.css de su tema secundario y listo. Aquellos de ustedes que no quieran acceder al cliente FTP de su sitio cada vez que se necesita hacer un cambio simple, pueden navegar al editor predeterminado de WordPress ( Apariencia > Editor ) y agregar el código CSS directamente desde allí. Vaya a Apariencia > Editor y agregue el código CSS directamente desde allí.

Todo lo que tiene que hacer es agregar un código CSS personalizado en la parte inferior del archivo del tema de su hijo y estará listo para comenzar.

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 secundario. Sin embargo, si desea llevar las cosas al siguiente nivel y tal vez agregar alguna funcionalidad nueva y personalizada al tema secundario, entonces 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 secundario, por lo que todo lo que tiene que hacer ahora es agregarle algunas funciones personalizadas según la funcionalidad que desee lograr. Puede codificar en PHP o usar funciones nativas de WordPress.
• Editar archivos de plantilla. Si style.css y functions.php simplemente no funcionan y aún necesita modificar el tema, puede copiar y pegar los archivos de plantilla del tema principal y editarlos en consecuencia.
• Agregar 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 que su sitio web de WordPress estará a salvo de errores dañinos e involuntarios, independientemente de los métodos que adopte para realizar modificaciones en su tema activado. Si por casualidad, algo con el código sale mal, sabrá exactamente dónde ocurrió el error y podrá corregirlo. (Sugerencia: ¡generalmente está en las últimas líneas que agregó!)

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 en función del mismo tema principal o un nuevo tema principal, ¡siempre puede crear un nuevo tema secundario y continuar 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 secundarios en WordPress, discutimos por qué son tan importantes y lo guiamos a través de un tutorial detallado sobre cómo crear su propio tema secundario desde cero. Para ayudarlo a comenzar a realizar modificaciones, concluimos con una breve sección sobre cómo puede comenzar a personalizar el tema secundario.

¿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 secundario y activarlo con éxito en tu sitio de WordPress? Nos encantaría conocer su experiencia, así que háganoslo saber comentando a continuación.