Cómo crear un tema hijo en WordPress (Programáticamente y complemento)

Publicado: 2020-06-11

¿Quiere personalizar el diseño de su sitio e impresionar a sus visitantes? En esta guía, le mostraremos cómo crear un tema secundario en WordPress tanto con un poco de codificación como con complementos .

La personalización es un factor importante en el diseño de su sitio web. Desea asegurarse de hacer todo lo posible para ayudar a que su sitio web se destaque. Y si bien puede usar un tema de WordPress con un diseño que se adapte a sus necesidades, puede hacerlo mucho mejor si agrega un poco de sabor a la configuración predeterminada. Ya sea cambiando algunas configuraciones de fondo o configurando un mega menú para su sitio.

Sin embargo, personalizar su sitio web puede ser una gran tarea, especialmente si está cambiando un diseño que le ha funcionado bien. Por eso, si desea personalizar su tema de WordPress, le recomendamos encarecidamente que utilice un tema secundario. Y eso es lo que te trae el tutorial de hoy: una guía para principiantes sobre cómo crear un child theme en WordPress .

¿Qué es un tema hijo?

En pocas palabras, un tema secundario es un tema adicional que crea que hereda el diseño y la apariencia de un tema principal existente. El tema hijo también hereda todas las funciones y características del tema padre, que también puedes modificar.

Pero si tiene el mismo diseño y funciones que el tema principal, ¿por qué necesita un tema secundario? Hay ciertas ventajas de crear temas secundarios en WordPress. Por un lado, puede mantener la personalización separada del tema principal y personalizarlos individualmente. Por ejemplo, puede realizar cambios en el código del tema secundario y esta personalización permanecerá separada del tema principal, por lo que ninguno de los archivos de los temas principales se verá afectado.

Además, una ventaja clave de usar un tema secundario es que puede conservar todas sus personalizaciones incluso después de actualizar el tema principal. Un gran problema con la personalización de su tema principal es que, cuando actualiza el tema, esas modificaciones se pierden. Por lo tanto, con un tema secundario, independientemente de si cambia estilos, plantillas o funciones, las modificaciones que realice en los archivos del tema permanecerán guardadas incluso después de las actualizaciones.

Los desarrolladores también pueden usar temas secundarios para crear nuevos diseños de temas rápidamente. Al usar temas secundarios, no tienen que comenzar desde cero y pueden optar por modificar los temas principales para que se ajusten a sus diseños de temas también.

Beneficios de los temas secundarios

Entonces, para resumir, si desea una mayor flexibilidad para las personalizaciones de su tema, usar un tema secundario es una excelente idea. Algunos de los principales beneficios al usar temas secundarios son:

  • Cualquier personalización que realice en el tema secundario permanece separada del principal y, por lo tanto, no se revierte ni se pierde después de las actualizaciones.
  • No hay riesgo de romper accidentalmente su tema principal o sus archivos.
  • Los desarrolladores pueden usar temas secundarios y temas principales para ahorrar tiempo de desarrollo mediante la creación de marcos de temas y diseños de temas flexibles.
  • Los temas secundarios son muy livianos y siempre puede revertir cualquier cambio simplemente deshabilitando o eliminando el tema secundario.

Ahora que hemos explicado por qué debería considerar usar un tema secundario, echemos un vistazo a cómo puede crear un tema secundario en WordPress.

Cómo crear un tema hijo en WordPress

Hay 2 formas principales de crear un tema hijo en WordPress:

  1. Usando un complemento
  2. Programáticamente

Ambos métodos tienen sus pros y sus contras, así que usa el que mejor se adapte a tus habilidades y necesidades.

1) Cree un tema secundario usando un complemento de WordPress

Crear un tema hijo usando un plugin es la forma más fácil y amigable para principiantes. Todo lo que tiene que hacer es instalar un complemento, hacer clic en algunos botones aquí y allá, y listo. Y hay una gran cantidad de complementos de temas secundarios que son muy fáciles de usar.

Para esta guía, usaremos el complemento Child Theme Generator. Si desea ver otras opciones, le recomendamos que consulte nuestra lista de los mejores complementos de WordPress Child Theme.

Después de decidir qué complemento prefiere, debe instalarlo. Por lo tanto, abra su Panel de administración de WP, desplace el cursor sobre Complementos y haga clic en Agregar nuevo . Luego, use la barra de búsqueda en la parte superior derecha para buscar cualquier complemento que esté a punto de instalar. Vamos a instalar Child Theme Generator .

crear un tema secundario en WordPress - título del complemento

Luego, instale el complemento que desee. Una vez finalizada la instalación, presione Activar. Alternativamente, también puede activar/desactivar sus complementos yendo a Complementos> Complementos instalados en su barra lateral.

crear un tema hijo en WordPress - instalar complemento

Cómo crear un tema hijo con el complemento Child Theme Generator

Una vez que instale y active el complemento, abra la interfaz del complemento haciendo clic en Configuración > Generación de tema infantil.

crear un tema secundario en WordPress - interfaz de complemento

Luego, en la pestaña Crear nuevo , puede completar varios detalles sobre el tema de su hijo.

Simplemente, elija el tema que desea como tema principal, agregue el encabezado del tema, la descripción, la URL del tema secundario, el autor y otros detalles del tema. Aquí, también puede optar por agregar una licencia GNU GPL junto con sus archivos de tema.

Una vez que haya terminado, haga clic en Crear un nuevo tema secundario y se creará un tema secundario en función de los detalles de entrada.

Luego, puede cambiarlo o activarlo yendo a Apariencia> Temas, seleccionando su tema secundario recién creado y activándolo .

¡Eso es! ¡Acabas de crear tu tema hijo! Ahora puedes personalizarlo y hacer todos los cambios que quieras.

Ahora, echemos un vistazo a cómo puede crear un tema secundario mediante programación sin usar un complemento.

2) Crear un tema Child programáticamente

Si no desea instalar ningún complemento, puede crear un tema secundario de WordPress mediante programación . Esto requiere un poco de codificación, pero aún así es bastante fácil incluso para principiantes. Todo lo que necesita hacer es crear la carpeta del tema de su hijo y crear un par de archivos dentro de ella.

Activar el tema principal

Entonces, primero, debe activar el tema principal desde el que desea crear un tema secundario en su sitio web.

Luego, debe usar el panel de control de alojamiento web de su sitio web y acceder a las carpetas de su servidor. Deberá usar el administrador de archivos de su panel o el cliente FTP para abrir la carpeta de temas de su sitio. Esto se encuentra en public_html/wp-content/themes .

Pasos

Una vez que haya localizado la carpeta del tema, siga estos sencillos pasos:

1) Cree una carpeta dentro del directorio de temas con el nombre de su tema secundario. Por ahora, usaremos Demo Child Theme . También puede usar el nombre de su tema principal, seguido de un sufijo secundario, para que sea más fácil de administrar. Por ejemplo, Flash-Child o Blacklite-Child .

2) Luego, cree un archivo style.css y copie el siguiente código dentro del archivo style.CSS.

 /*
Nombre del tema: tema infantil de demostración
Plantilla: Blacklite
URL del tema: Quadlayers.com/blog
Descripción: Tema infantil de demostración
Autor del tema: Quadlayers
Autor URL: Qualayers.com
Versión: 1.0.0
*/

Esto se llama una hoja de estilo. Recuerde cambiar esta información para su tema hijo. Simplemente agregue la información después de los dos puntos para cada línea del código. Las partes más importantes aquí son el Nombre del tema que debe ser único y el nombre de la plantilla que está utilizando, ya que debe designar qué tema principal está utilizando.

3) A continuación, cree un archivo llamado Functions.php dentro de la carpeta del tema secundario y copie el siguiente código:

 <?php
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
función enqueue_parent_styles() {
wp_enqueue_style( 'estilo-principal', get_template_directory_uri().'/style.css' );
}
?>

4) Guarde ambos archivos y luego vaya a su Tablero> Apariencia> Temas. ¡Verá un nuevo tema secundario con la descripción que insertó en su carpeta Style.CSS !

Y así es como creas un tema hijo en WordPress programáticamente. Ahora, veamos cómo personalizarlo.

¿Cómo personalizar su tema infantil de WordPress?

En esta sección, veremos qué puede hacer para personalizar el aspecto de su tema hijo en un nivel más profundo. Por un lado, cambiemos la configuración de la fuente y el color de fondo usando un poco de CSS.

Personaliza tu tema CSS

Primero, ve a Apariencia > Personalizar para abrir tu personalizador de temas. Luego, haga clic en CSS adicional en el menú de la barra lateral.

crear un tema hijo en WordPress - personalizador

Aquí, puede agregar algunos códigos CSS que sobrescribirán la configuración de su tema directamente. Por ejemplo, puedes agregar este pequeño código:

 pags {
color: gris;
}
pags {
familia de fuentes: Helvetica;
tamaño de fuente: 18px;
}

Y a medida que inserte ese pequeño fragmento de código, verá los cambios en el personalizador de Live. Necesitamos un poco más de color, así que cambiemos el color de fondo de la barra de widgets de su sitio:

 .widget {
fondo: #00FFFF;
relleno: 25px;
}

Ahora, agreguemos una línea adicional de código para eliminar el pie de página de derechos de autor "Desarrollado por WordPress":

 .site-info { pantalla: ninguno; }

Y ahí vamos, ha personalizado su tema hijo con un poco de CSS. Esto es solo rascar la superficie de estas modificaciones. Hay mucho más que puedes hacer.

Personaliza tu archivo Theme Functions.php

Puede personalizar directamente sus archivos de temas yendo a Apariencia > Editor de temas . Luego, haga clic en su archivo Functions.php para agregar funciones personalizadas a su tema.

crear un tema hijo en WordPress - funciones

Por ejemplo, para deshabilitar el clic derecho en su sitio web, agregue estas líneas de código a su archivo Functions.php:

 funcion tu_funcion() {
?>
<script>
jQuery(documento).ready(función(){
jQuery(documento).bind("menú contextual",función(e){
falso retorno;
});
});
</script>
<?php
}
add_action('wp_footer', 'tu_funcion');

Luego, haga clic en Actualizar archivo.

Finalmente, si estropea algo, simplemente puede eliminar su tema secundario, crear uno nuevo y luego comenzar desde cero sin afectar su tema principal.

Conclusión

Con todo, la creación y personalización de temas secundarios abre una vía completamente nueva de modificaciones de temas para cada tipo de usuario de WordPress. Lo mejor de esto es la flexibilidad que brinda, ya que puede revertir cualquier cosa que pudiera haber estropeado su tema. Además, todas sus personalizaciones permanecen separadas del tema principal y no se pierden después de las actualizaciones. Por lo tanto, le recomendamos encarecidamente que cree un tema infantil y juegue con él para mejorar su sitio.

Esto puede sonar complicado pero no lo es. Todo lo que necesita es agregar un poco de código a los archivos de su tema y administrar un par de carpetas.

Sin embargo, no todos los usuarios pueden encontrar fácil crear y crear temas secundarios mediante programación, especialmente los principiantes. Si ese es tu caso, puedes usar un plugin para crear tu tema. Si tiene problemas en algún momento, no dude en dejarnos un comentario y nos pondremos manos a la obra.

Finalmente, si desea personalizar su tema aún más, puede consultar nuestras guías sobre cómo editar pies de página y cómo personalizar encabezados en WordPress .