Cómo crear y personalizar un tema secundario

Si desea realizar cambios en el tema de su sitio de WordPress, probablemente haya visto personas que le dicen que use un tema hijo de WordPress.

Pero, ¿qué es un tema hijo y por qué son tan importantes los temas hijo?

En esta publicación, le daremos las respuestas a esas preguntas con una introducción a los temas infantiles y cómo le benefician.

Luego, le mostraremos paso a paso cómo crear y personalizar su propio tema hijo usando complementos o código.

Vamos a profundizar en.

Un tema hijo de WordPress no es un tema independiente. Es un "hijo" de un tema principal existente, de ahí el nombre.

Lo instalará junto con su tema principal, pero le da la oportunidad de realizar cambios de forma segura en su tema principal sin necesidad de editar el tema principal en sí.

El tema secundario extraerá la mayor parte o la totalidad de sus configuraciones de diseño del tema principal. Sin embargo, en situaciones en las que realiza un cambio en el tema secundario, ese cambio anulará la configuración del tema principal.

En este punto, es posible que se pregunte por qué no puede simplemente realizar sus cambios directamente en el tema principal.

La razón principal por la que no es una buena idea son las actualizaciones de temas .

Si desea mantener su sitio de WordPress seguro y en buen funcionamiento, debe aplicar las actualizaciones de inmediato a medida que aparezcan, incluidas las actualizaciones de su tema.

Si personaliza su sitio editando directamente su tema (sin un tema hijo), eso significa que sobrescribirá todos sus cambios cada vez que actualice el tema.

Eso significa que tú:

• Actualiza tu tema y pierde tu trabajo. No fue una experiencia muy divertida, ¿verdad?
• No actualice su tema para no perder su trabajo ... lo cual no es bueno para la seguridad y el funcionamiento de su sitio.

Con un tema hijo de WordPress, puede realizar todos sus cambios en el tema hijo. Luego, podrá actualizar el tema principal sin perder nada de su trabajo.

Más allá de ayudarlo a actualizar de manera segura, el uso de un tema secundario también es generalmente conveniente para realizar personalizaciones. Debido a que segrega todos sus cambios en un solo lugar, es fácil realizar un seguimiento de todas sus ediciones y modificarlas según sea necesario.

También facilita la marcha atrás. Por ejemplo, si desea dejar de usar sus ediciones y volver al tema principal "vanilla", todo lo que necesita hacer es deshabilitar su tema secundario.

Algunos temas de WordPress listos para usar incluso usan este enfoque de padre / hijo de forma predeterminada. Por ejemplo, si desea utilizar Genesis Framework, necesitará tanto el tema principal (el marco básico) como un tema secundario para controlar el diseño.

Aparte de algunas excepciones que enumeraremos a continuación, siempre debe usar un tema hijo si planea hacer sus propias ediciones en un tema de WordPress existente.

En general, usar un tema hijo es una buena práctica siempre que personalice su tema de WordPress.

Sin embargo, hay algunas excepciones a la regla en las que podría haber una mejor opción que usar un tema hijo.

Primero, si solo desea realizar algunas modificaciones menores de CSS, puede ser excesivo crear un tema hijo solo para algunos ajustes.

En su lugar, puede agregar su CSS personalizado utilizando la función CSS adicional incorporada en el Personalizador de WordPress. O puede utilizar un complemento gratuito como el complemento Simple CSS de Tom Usborne.

En segundo lugar, si está realizando cambios que desea que sean independientes del tema, es posible que un tema hijo no sea la mejor opción.

Por ejemplo, si está registrando una taxonomía personalizada o un tipo de publicación personalizada, probablemente no desee utilizar el archivo functions.php de su tema secundario (porque querrá conservarlos incluso si cambia de tema). En su lugar, debe agregar el código fuera de su tema por completo con un complemento como Fragmentos de código o su propio complemento personalizado.

1. Utilice un complemento generador de tema infantil gratuito de WordPress.
2. Cree manualmente su propio tema hijo.

Un complemento generador de temas para niños le permite crear un tema para niños sin salir de su panel de WordPress.

La opción más popular aquí es el complemento gratuito Child Theme Configurator, que está activo en más de 300,000 sitios.

El Configurador de temas secundarios no solo lo ayuda a crear los archivos básicos de temas secundarios, sino que también escaneará cualquier tema que esté utilizando y pondrá en cola las hojas de estilo de fuentes y temas según sea necesario.

También incluye otras funciones útiles si está intentando crear un tema secundario en un sitio donde ya ha agregado contenido. Por ejemplo, puede copiar sus widgets existentes y las opciones del Personalizador al tema hijo.

Sin embargo, si planea usar el complemento en un sitio web en vivo, le recomendamos que realice una copia de seguridad completa antes de continuar. O, idealmente, configure todo en un sitio de ensayo.

Una vez que tenga su copia de seguridad lista, comience instalando y activando el complemento gratuito Child Theme Configurator de WordPress.org. Luego, vaya a Herramientas → Temas secundarios para crear su tema secundario.

En el menú desplegable Seleccionar un tema principal , seleccione el tema para el que desea crear su tema secundario. Luego, haga clic en Analizar :

El complemento luego analizará su tema principal en busca de dependencias.

Una vez hecho esto, verá algunas opciones adicionales para configurar cómo crear su tema hijo. Si no está seguro de lo que significa una configuración específica, puede dejarla como predeterminada:

Una vez que haya terminado de hacer sus elecciones, haga clic en el botón en la parte inferior para Crear un tema secundario nuevo .

¡Y eso es! El complemento creará el tema hijo para usted. Sin embargo, no activará el tema hijo.

Para activarlo:

• Vaya a Apariencia → Temas.
• Obtenga una vista previa de cómo se ve su sitio con el tema de su hijo (para asegurarse de que esté funcionando; si su sitio se ve extraño, es probable que se deba a un problema de CSS).
• Active su tema hijo como lo haría con cualquier otro tema de WordPress. Sin embargo, asegúrese de dejar su tema principal instalado.

Una vez que haya activado su tema infantil, el complemento Configurador de tema infantil también incluye algunas otras herramientas útiles para ayudarlo a administrar su tema secundario. Por ejemplo, si va a la pestaña Archivos de la configuración del complemento, puede ver todos los archivos asociados tanto en su tema principal como en su tema secundario.

Luego, puede copiar archivos del tema principal al tema secundario.

Por ejemplo, si desea realizar algunas ediciones en single.php , puede copiar ese archivo en el tema de su hijo para poder editarlo de forma segura:

También encontrará muchas otras herramientas que le ayudarán a trabajar con CSS.

Más adelante cubriremos por qué estas herramientas son útiles.

Para esta sección, asumiremos que sabe un poco sobre PHP y CSS. Si se siente abrumado por las instrucciones aquí, le recomendamos que se quede con el complemento gratuito de la sección anterior.

Para crear manualmente un tema hijo, debe crear dos archivos (estos son los mínimos para un tema hijo):

• style.css : al principio, todo lo que necesita agregar es un código repetitivo.

• functions.php : esto le permite poner en cola la hoja de estilo del tema principal. Sin esto, su tema hijo no podría aplicar el CSS de su tema principal, ¡lo que haría que su sitio se viera súper feo!

Primero, cree un archivo llamado style.css y agregue el siguiente código:

/ *

Nombre del tema: Hello Elementor Child

URI del tema: https://github.com/elementor/hello-theme/

Descripción: Hello Elementor Child es un tema hijo de Hello Elementor, creado por el equipo de Elementor

Autor: Elementor Team

URI del autor: https://elementor.com/

Plantilla: hola-elementor

Versión: 1.0.1

Dominio de texto: hello-elementor-child

Licencia: Licencia pública general GNU v3 o posterior.

URI de licencia: https://www.gnu.org/licenses/gpl-3.0.html

* /

Asegúrese de reemplazar todo lo que viene después de los dos puntos con su información real:

• Nombre del tema : el nombre del tema hijo.

• URI del tema : el sitio web de su tema y su documentación.

• Descripción : una breve descripción del tema.

• Autor : el nombre del autor del tema.

• URI del autor: - el sitio web del autor del tema.

• Plantilla : el nombre de la carpeta de su tema principal (como se indica dentro de la carpeta wp-content / themes). Esta es la línea más importante ya que su tema hijo no funcionará sin esto.

• Versión : el número de versión de su tema hijo.

• Dominio de texto : se utiliza para la internacionalización. Puede agregar "-child" al final del nombre de la plantilla.

• Licencia : déjelo como predeterminado.

• URI de licencia : déjelo como predeterminado.

Excluyendo la línea Plantilla , no es realmente importante lo que ingrese, así que no se estrese demasiado. Solo asegúrese de ingresar correctamente el nombre de la carpeta de su tema principal para la plantilla .

Si desea agregar sus propios estilos personalizados en el futuro, puede agregarlos a esta hoja de estilo debajo del código estándar.

A continuación, debe crear el archivo functions.php para su tema hijo. Una vez más, esto es lo que le permite poner en cola la hoja de estilo CSS completa de su tema principal.

En el archivo functions.php , agregue el siguiente código:

<? php

/ * Función para poner en cola la hoja de estilo del tema principal * /

function child_enqueue__parent_scripts () {

wp_enqueue_style ('padre', get_template_directory_uri (). '/ style.css');

}

add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Una vez que tenga su archivo style.css y su archivo functions.php , debe subirlos a su sitio de WordPress como un tema nuevo.

Para hacerlo, conéctese a su sitio de WordPress mediante FTP.

Luego, busque el directorio de temas de su sitio ( wp-content / themes ) y cree una nueva carpeta para su tema hijo.

Por ejemplo, si la carpeta de su tema principal es hello-elementor , podría nombrar la carpeta del tema secundario hello-elementor-child para recordarla.

Luego, cargue su archivo style.css y functions.php dentro de esa carpeta:

Una vez que haya cargado ambos archivos, puede ir a Apariencia → Temas y activar su tema hijo como lo haría con cualquier otro tema de WordPress.