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 particular codificada en él. 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 sienta 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?

Hacer modificaciones y alteraciones en 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 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 usar temas secundarios, puede conservar todas las modificaciones y actualice 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 inesperados, resultará bastante costoso (tanto en términos de tiempo como de presupuesto).

mantener la organización del código
Los temas secundarios ayudan a los desarrolladores web a mantener un código organizado.

Como comentamos anteriormente, los temas secundarios se heredan activamente de sus temas principales. Cualquier cambio que realice en el tema hijo permanece allí (¡lo que sucede en los temas hijo permanece en los temas hijos!) 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 será difícil. Estaré demostrando el tutorial creando un tema hijo para nuestro tema Sparkling.

Tema brillante de Colorlib
Tema brillante de Colorlib

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

  1. Navegue al directorio de temas de su sitio de WordPress (/wp-content/themes).
  2. Cree una nueva carpeta y asígnele un nombre niño-brillante. Es una buena práctica darle al tema de su hijo el mismo nombre que el padre con -niño adjunto al final.
directorio de temas principales, directorio de temas secundarios
Tema principal: tema secundario

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

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

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

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

En el código dado arriba, las líneas más importantes son las que comienzan con Nombre del tema, Modeloy @import. Es muy importante que complete estas líneas correctamente si va a crear un tema secundario para otro tema principal. los @import line garantiza que no tendrá que volver a escribir las reglas CSS del tema principal desde cero. Sin el @import , el nuevo sitio solo tendrá el contenido cargado en él, 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 functions.php archivo (opcional).

los functions.php El archivo 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-brillante.
  2. Crear un .php archivar y nombrarlo 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 functions.php archivo para operar. 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 una functions.php archivo.

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, impórtelos 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 hasta el directorio de su tema hijo y abra el functions.php archivo en un editor de texto.
  2. Agregue las siguientes líneas de código al functions.php archivo debajo de la apertura etiqueta:

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

los wp_enqueue_style() La función 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: Cargue 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 .zip archivo.
  2. Inicie sesión en su panel de administración de WordPress y navegue hasta Apariencia > Temas.
  3. Haga clic en el Agregar nuevo en la siguiente pantalla.
    Botón Cargar tema
    Haga clic en el botón Cargar tema.
  4. Haga clic en el Subir tema para continuar.
    Subir tema hijo
    Busque el archivo .zip del tema infantil en su disco y cárguelo.
  5. Busque el tema de su hijo .zip archivo 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 .zip archivo 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 perder tiempo creando el tuyo propio.

Personalización del 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 secundario 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. Si agrega 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.

Vaya a Apariencia> Editor y agregue código CSS directamente desde allí.
Vaya a Apariencia> Editor y agregue código CSS directamente desde allí.

Todo lo que tiene que hacer es agregar un código CSS personalizado al final del tema de su hijo. style.css archivo 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 agregue código CSS directamente desde allí.

Técnicas alternativas de modificación de temas

Añadiendo código CSS al style.css file 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 functions.php archivo. Ya hemos creado el 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 corta 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, por casualidad, algo con el código sale mal, sabrá exactamente dónde ocurrió el error y podrá corregirlo. (Pista: ¡normalmente 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 secundarios 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 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 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.

Deja un Comentario