Personalizar un tema de WordPress existente es una necesidad común, pero editar el tema directamente puede causar problemas. 

Si el tema se actualiza, ¡sus cambios se sobrescribirán! Una mejor manera es crear un tema secundario heredado del tema principal. 

Los temas secundarios le permiten modificar y ampliar un tema de forma segura. 

En esta guía detallada, discutiremos la creación de un tema secundario en WordPress. Aprenderá el propósito de los temas secundarios, cómo configurar uno y cómo personalizarlo para anular el diseño y la funcionalidad del tema principal. 

Con algunos métodos, puede crear un tema secundario y comenzar a aplicar los cambios sin tocar los archivos del tema principal. 

Entonces, sin más preámbulos, comencemos.

1 ¿Qué es un tema infantil?

Un tema secundario es un tema de WordPress que hereda la funcionalidad de un tema principal. Le permite modificar o agregar nuevas funciones sin cambiar los archivos del tema principal. 

Esto es útil porque si modifica los archivos del tema principal directamente, sus cambios se perderán cuando se actualice el tema. 

Con un tema secundario, puede realizar cambios sin afectar el tema principal y recibir actualizaciones sin perder las modificaciones.

En esta sección, notarás que hemos mencionado el tema principal, pero ¿qué es exactamente?

2 ¿Qué es un tema para padres?

Un tema principal es un tema prediseñado que sirve como base para un sitio web de WordPress. Proporciona la estructura basica, diseño y funcionalidad del sitio. 

Un tema principal se puede personalizar para satisfacer las necesidades de un sitio web en particular agregando o modificando sus características. 

El uso de un tema principal puede ahorrar tiempo y esfuerzo al crear un sitio web, proporcionando un punto de partida para el diseño y la funcionalidad.

En este punto, podemos decir que todos los temas de WordPress son técnicamente temas principales a menos que estén diseñados específicamente para ser un tema secundario.

He aquí un punto clave para recordar: Un tema principal puede existir y funcionar de forma independiente, mientras un tema hijo siempre se basa en un tema padre para proporcionar la funcionalidad y características principales.

3 ¿Por qué utilizar un tema infantil?

Hay algunas razones clave para utilizar un tema hijo en lugar de modificar un tema directamente:

• La creación de un tema secundario evita que sus modificaciones se sobrescriban cuando el el tema principal está actualizado.
• Mantiene separados los archivos de temas principales y secundarios. Esto ayuda a evitar confusiones ya que los archivos están organizados.
• Se pueden utilizar varios temas secundarios para diferentes propósitos, como cambiar estilos o funcionalidades. Pero tenga en cuenta que un sitio web sólo puede tener un tema activo a la vez.
• También es una excelente manera de comenzar a desarrollar un nuevo tema completo de WordPress.

Nota: Las personalizaciones extensas en un tema secundario pueden generar problemas de administración. Para proyectos más grandes, crear un tema principal o completo basado en el tema original suele ser mejor que continuar modificando el tema secundario.

4 Requisitos previos para crear un tema secundario

Antes de crear un tema hijo, es importante cumplir con algunos requisitos. 

En primer lugar, necesita una instalación de WordPress que funcione y un tema principal para el cual desea crear un tema secundario. 

También es útil comprender HTML, CSS y PHP, ya que cambiará el código para personalizar el tema secundario. 

Además, debería poder copiar y pegar fragmentos de código de otras fuentes. 

Se recomienda practicar en un entorno de desarrollo local utilizando contenido ficticio o moviendo un sitio de WordPress activo a un servidor local con fines de prueba. Esto le permite probar el tema de su hijo antes de implementarlo en un sitio activo.

Finalmente, es importante tener una copia de seguridad del sitio web en caso de que algo salga mal durante el proceso.

Entonces, una vez que haya establecido todos estos requisitos, puede crear un tema secundario. Todo lo que necesitas hacer es seguir el proceso de configuración del tema secundario descrito en esta guía.

Pero para esta guía, usaremos el tema predeterminado de WordPress Twenty Twenty-four.

5 Crear un tema secundario en WordPress

Ahora que comprende el concepto de temas secundarios, profundicemos en la creación de un tema secundario en WordPress. 

Exploraremos dos métodos comunes para que usted elija, atendiendo a diferentes niveles de comodidad:

5.1 Crear un tema secundario usando un código

Primero, acceda a su instalación de WordPress a través de FTP o un administrador de archivos proporcionado por su panel de control de hosting. Navega hasta el wp-content/themes directorio y cree una nueva carpeta con un nombre único para el tema de su hijo. 

Para este tutorial, usaremos el nombre "mtschild" para la carpeta del tema secundario.

Este directorio actúa como espacio de almacenamiento principal para los componentes del tema secundario.

Dentro de la carpeta del tema secundario, cree un nuevo archivo titulado style.css. Este archivo contendrá los detalles esenciales para reconocer y activar su tema hijo. Abra el archivo style.css e inserte el código siguiente:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Este código notifica a WordPress que su tema secundario extiende el tema principal especificado. Sustituya "Tema secundario MTS" por el nombre de su tema secundario preferido y el campo de plantilla por el nombre de la carpeta del tema principal.

El siguiente paso consiste en asegurarse de que su tema hijo herede los estilos del tema principal. Para lograr esto, debe poner en cola la hoja de estilo del tema principal.

Para hacer esto, acceda al archivo funciones.php en el directorio de temas de su hijo (cree uno si no está) e implemente cualquiera de los siguientes códigos.

Si su tema principal no carga ninguna hoja de estilo, utilice el siguiente código para cargar style.css a través de funciones.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Este código también puede funcionar si el tema principal carga únicamente su hoja de estilo. 

Sin embargo, si el tema principal carga únicamente la hoja de estilo del tema activo, además debe poner en cola la hoja de estilo del tema principal a través de functions.php usando el siguiente código:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Para el tema Twenty Twenty-Four utilizado en esta guía, aplicaremos el primer código ya que el tema no carga ninguna hoja de estilo. 

Recuerde comenzar con el <?php etiqueta al agregar el código. Modifique estos códigos según sus requisitos, especialmente cuando el nombre del tema mts_child_theme es utilizado.

Una vez que haya completado los pasos anteriores, vuelva a iniciar sesión en su panel de WordPress y continúe con Apariencia → Temas. Pase el cursor sobre el tema secundario y haga clic en Activar del botón.

Dado que aún no ha realizado ningún cambio en su tema secundario, su sitio web mantendrá la funcionalidad y apariencia de su tema principal. 

Sin embargo, lo guiaremos sobre cómo personalizar el tema secundario para prepararlo para futuras modificaciones.

Este es el proceso manual de creación de un tema hijo usando código en WordPress. Si este método parece complejo, puede explorar el método de complemento que cubriremos en la siguiente sección.

5.2 Crear un tema secundario usando un complemento

Crear un tema secundario usando un complemento es simple y fácil. Primero, necesita instalar y activar el Configurador de temas secundarios enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre Cómo instalar un plugin de WordPress.

Una vez que el complemento esté activado, vaya al panel de WordPress y navegue hasta Herramientas → Temas secundarios.

En Seleccione una pestaña Tema principal, elija el tema principal en el menú desplegable para la creación del tema secundario. Normalmente, el tema activo en su sitio está preseleccionado.

A continuación, haga clic en el Analizar botón. El complemento examinará el tema principal seleccionado para determinar si puede generar un tema secundario y si necesita su archivo style.css para su apariencia.

A continuación, asigne un nombre al tema de su hijo. Puede adaptar la hoja de estilo, las funciones y otras configuraciones a su gusto. 

Sin embargo, absténgase de alterar la configuración hasta llegar a la sección 7.

En la sección 7, haga clic en el botón etiquetado Haga clic para editar los atributos del tema secundario.

Desde allí, puede ingresar los detalles del tema de su hijo.

Al crear manualmente un tema secundario, es posible que pierda los menús y widgets del tema principal. 

Sin embargo, el complemento Child Theme Configurator puede transferirlos del tema principal al tema secundario. 

Si desea continuar con esto, marque la casilla de verificación en la Sección 8. Finalmente, haga clic en el Crear nuevo tema secundario botón para crear el tema hijo.

Al finalizar, el complemento creará una carpeta para su tema hijo que contiene archivos esenciales style.css y funciones.php para una futura personalización.

Antes de activar el tema, obtenga una vista previa haciendo clic en el enlace "Vista previa del tema de su hijo" en la parte superior de la pantalla para verificar su apariencia y asegurarse de que no afecte negativamente a su sitio.

Después de verificar que todo funciona correctamente, haga clic en el Activar y publicar botón. Esto hará que el tema de su hijo esté activo en su sitio web.

Una vez que haya activado el tema secundario en su sitio web, es hora de comenzar a personalizarlo. Cubriremos esto en la siguiente sección.

6 Cómo personalizar el tema de su hijo

Antes de profundizar en la personalización, identifique los elementos de su sitio web que desea modificar, como estilos, plantillas, funciones, áreas de widgets o plantillas de páginas personalizadas. 

Tener una visión clara de tus objetivos agilizará el proceso de personalización. Existen varios métodos para personalizar el tema de su hijo, que incluyen:

6.1 Personalizando estilos con CSS

El archivo style.css de su tema hijo sirve como plataforma para modificar el aspecto de su sitio web. Aquí puede insertar reglas CSS personalizadas para alterar o mejorar los estilos del tema principal.

Antes de continuar, es necesario tener conocimientos básicos de HTML y CSS. 

Puede utilizar eficazmente la herramienta Inspeccionar de su navegador o copiar estilos directamente desde el archivo style.css del tema principal.

Para acceder a los códigos CSS de una página web usando su navegador, simplemente haga clic derecho en la página y seleccione Inspeccionar de las opciones que aparecen. Esta herramienta muestra los códigos de estilo CSS, lo que le permite identificar los elementos que desea modificar.

Cuando hace clic derecho y selecciona "Inspeccionar", la pantalla de su navegador se bifurcará y mostrará el HTML y CSS de la página. 

Dependiendo de la configuración de su navegador, los detalles HTML y CSS pueden aparecer en el lado derecho o en la parte inferior de la pantalla.

Al pasar el cursor sobre varias líneas HTML, el inspector de Chrome las resaltará en la pestaña Elementos y mostrará las reglas CSS correspondientes relacionadas con el elemento resaltado.

Puedes experimentar editando el CSS directamente para obtener una vista previa de cómo aparecerá. Por ejemplo, si desea modificar el color de fondo de la página de inicio predeterminada del tema Twenty Twenty-Four de #f9f9f9 a #6841ea.

Una vez que ajusta el color de fondo en el inspector del navegador, la alteración es temporal. Para hacerlo permanente, debes transferir esta regla CSS al archivo style.css de tu tema hijo:

body {
background-color: #6841ea;
}

Después de insertar el código, recuerda guardar tus modificaciones. Puede replicar este proceso para cualquier otro elemento de la página web que desee personalizar.

Por ejemplo, digamos que desea modificar los colores de su sitio web. Podemos proporcionarle algunos códigos CSS que le permitirán hacerlo.

Para cambiar el color del texto a gris oscuro, agregue el siguiente código a su archivo CSS:

body { color: #3b3b3b; } 

Para cambiar el color del encabezado a azul, use el siguiente código:

h1, h2, h3 { color: #007bff; }

Para el color de fondo del encabezado, utilice el siguiente código:

#header { background-color: #f5f5f5; } /* Light grey background for header */

Y para el área de contenido, use este código para establecer el color de fondo en blanco:

.site-container { background-color: #fff; } 

Puede copiar estos estilos CSS al archivo style.css de su tema secundario a través del directorio de temas secundarios de su sitio web o desde su panel de WordPress.

Cuando agregue su código CSS, se parecerá a este formato:

Después de guardar los cambios, intente actualizar la página de su sitio web. Si los cambios no aparecen, borre la memoria caché de su navegador para asegurarse de que está viendo la última versión de CSS.

6.2 Anulación de archivos de plantilla

Si bien la personalización de CSS controla la apariencia de su sitio web, los temas secundarios ofrecen una característica más sólida: anular archivos de plantilla.

Esta capacidad avanzada le permite remodelar el diseño y estructura de las páginas de su sitio web y elementos. Sin embargo, tenga cuidado ya que exige una comprensión más profunda de las plantillas de WordPress, HTML y PHP.

Para anular una plantilla, copie el archivo .php original de la carpeta del tema principal en su tema secundario, manteniendo el nombre de archivo exacto. 

Por ejemplo, para anular header.php, debe copiar el archivo header.php del directorio /parent-theme/ y pegarlo como header.php en el directorio /child-theme/.

Ahora puedes editar el header.php en tu tema hijo.

Algunas plantillas comunes para anular:

• header.php – Contiene etiqueta y marca del sitio, navegación, etc.
• footer.php – El cierre etiqueta y marcado.
• page.php – Plantilla predeterminada para páginas.
• single.php: plantilla utilizada para publicaciones individuales.
• index.php: plantilla de página de inicio.

Por ejemplo, puedes modificar footer.php mostrando un copyright personalizado para tu sitio:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Ampliación de la funcionalidad

El functions.php El archivo en el tema secundario le permite introducir nuevas funciones PHP, ganchos, filtros y código para ampliar las características predeterminadas del tema principal.

Esta flexibilidad le permite registrar tipos de publicaciones personalizadas, incorporar widgets personalizados, crear nuevos códigos cortos, poner en cola scripts adicionales y más.

Por ejemplo, si desea una sección dedicada en su sitio de WordPress para widgets personalizados, utilice el siguiente fragmento de código para establecer un área de widgets llamada "Área de widgets personalizados":

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Después de guardar este código en el archivo funciones.php de su tema hijo, regrese a su sitio de WordPress y acceda Apariencia → Widgets. Notará que el widget "Área de widget personalizado" está disponible para su uso.

7 Preguntas frecuentes

8 Conclusión

Crear un tema secundario en WordPress es una habilidad valiosa que puede ayudarlo a personalizar su sitio web sin correr el riesgo de perder los cambios durante las actualizaciones del tema. Si bien al principio puede parecer desalentador, no se rinda demasiado rápido si comete errores. 

Los errores más comunes que puede encontrar son errores de sintaxis causados ​​por falta de algo en el código. Si algo sale mal, siempre puedes empezar de nuevo. 

Por ejemplo, si elimina accidentalmente algo que requiere su tema principal, simplemente puede eliminar el archivo de su tema secundario y comenzar de nuevo. 

Recuerde, con un poco de perseverancia, crear un tema secundario puede brindarle la flexibilidad de crear una apariencia única para su sitio web mientras mantiene la estabilidad y seguridad de su tema principal.

Pruébelo y vea la diferencia que puede aportar a su sitio web de WordPress.

Esperamos que esta guía le haya ayudado a crear un tema secundario para su sitio web. Si es así, háganoslo saber por Tuiteando @rankmathseo.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• PlatoSalud. Inteligencia en Biotecnología y Ensayos Clínicos. Accede Aquí.
• Fuente: https://rankmath.com/blog/wordpress-child-theme/