Cómo crear, personalizar y utilizar un child theme de WordPress
Si amas tu tema actual pero quieres modificar sus características y apariencia, lo puedes lograr al utilizar su child theme. En este tutorial te explicaremos por qué esta práctica es, además, necesaria y te guiaremos a través del proceso para que puedas crear y editar un child theme de WordPress, independientemente de tus habilidades técnicas.
Tabla de Contenidos
¿Por qué deberías usar Child Themes con WordPress?
Dado que un tema secundario hereda las características de un tema principal, puedes personalizar su código sin romper la funcionalidad del original. De esta manera, si un tema recibe una actualización, no se sobrescribirán todos los cambios que hayas realizado.
Otra razón para utilizar un child theme es que ofrece una solución a prueba de fallas si alguna vez arruinas algo con tus ediciones. Además, te permite realizar un seguimiento eficiente de las partes que has cambiado, ya que los archivos de un tema secundario están separados de los de los temas principales.
Cómo funciona un child theme en WordPress
Como mencionamos antes, un child theme se almacena en un directorio separado del tema principal, cada uno con sus propios archivos style.css y functions.php. Puedes agregar otros archivos según sea necesario, pero esos dos son el mínimo requerido para que utilizar un child theme y que funcione correctamente.
Usando los archivos .css y .php relevantes, puedes modificar todo, desde el estilo, los parámetros de diseño hasta la codificación real y los scripts utilizados por un tema secundario, incluso si los atributos no están presentes en tu tema principal.
Piensa en ello como una superposición. Cuando un visitante carga tu sitio web, WordPress primero carga el subtema y luego llena los estilos y funciones que faltan utilizando partes del tema maestro. Como resultado, obtienes lo mejor de tu diseño personalizado sin sacrificar la funcionalidad principal del tema.
Crear un child theme en WordPress
En el ejemplo que verás en este tutorial crearemos un child theme basado en el tema Twenty Seventeen, puedes usar otro tema si lo prefieres. También vamos a usar el Administrador de archivos de Hostinger para agregar y editar los archivos, aunque con FTP también funciona.
Ahora, sin más preámbulos, te explicamos cómo crear un tema secundario en WordPress:
- Accede al panel de control del Hosting y selecciona ‘Administrador de Archivos’.
- Navega entre las carpetas hacia public_htm l-> wp-content -> themes.
- Selecciona la opción ‘New Folder’ (nueva carpeta) haciendo clic en el icono correspondiente («+«) en el menú superior. Ingresa el nombre del tema secundario y haz clic en Create (crear). Recomendamos utilizar el nombre del tema principal seguido del sufijo -child. En este ejemplo, nombramos la carpeta twentyseventeen-child.
IMPORTANTE: reemplaza los espacios en el nombre de un archivo con guiones (-) para evitar errores.
/* Nombre del Tema: Twenty Seventeen Child URL del Tema: http://tudominio.com Descripción: Twenty Seventeen Child Autor del Tema: Tu Nombre URL del Autor: http://tudominio.com Tema: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
Cómo puedes ver, ¡crear un child theme de WordPress no es más complicado que trabajar con un tema maestro!
Personaliza tu child theme de WordPress
Para personalizar el child theme, necesitas una comprensión básica de las reglas de CSS y el conocimiento sobre cómo inspeccionar los elementos para poder identificar su código CSS y la clase a la que están asignados.
Ahora, echemos un vistazo a los conceptos básicos para personalizar uno. Para hacerlo, haz clic en Personalizar -> CSS adicional desde tu tema secundario activo.
Cambiar el color de fondo
Inserta la siguiente regla CSS si deseas cambiar el color de fondo de tu tema secundario de WordPress:
.site-content-contain { background-color: #DEF0F5; position: relative; }
El valor junto a background-color: corresponde al código hexadecimal del color que elijas. En este ejemplo, dado que lo estamos cambiando de blanco a azul claro, el resultado se ve así:
Cambiar de color de la barra lateral
Puedes crear una visualización agradable de tus widgets agregando algo de color a la barra lateral con el siguiente código CSS:
.widget { background: #B9EBFA; padding: 25px; }
Nuevamente, no olvides editar el código de color con el color que quieres. Deberías obtener un resultado como este:
Cambiar tipos de fuente, tamaños y colores
Para cambiar el tipo de fuente, el tamaño y el color de su tema secundario de WordPress, inserte el siguiente código:
p { color: teal; } p { font-family: Georgia; font-size: 18px; }
La etiqueta p significa párrafo. Como puedes ver a continuación, la regla anterior cambió el aspecto de las fuentes del párrafo en función de los valores especificados.
Para cambiar la fuente de otras partes del texto, como el título o el encabezado, inspecciona los elementos para ver primero tus parámetros CSS. En aras de la ilustración, intentemos cambiar el color de fuente del título.
- Primero, haz clic derecho en el texto y selecciona Inspeccionar. Localiza el enlace de estilo CSS y ábrelo en una nueva pestaña.
- Encuentra la parte exacta que estás buscando usando CTRL+F y copia el código en la pestaña CSS adicional. Cambia los valores en función de lo que quieras.
Puedes hacer lo mismo con cualquier otro elemento que desees cambiar.
Cambiar el diseño de publicaciones y páginas
Al igual que el CSS personalizado de un child theme de WordPress anula el estilo de tu tema principal, los archivos de plantilla te permiten crear tus propios diseños al suplantar los predeterminados.
Tu nueva plantilla debe tener el mismo nombre de archivo y estar en las mismas carpetas que corresponden al original. Es una buena idea copiar el archivo de plantilla maestra a tu directorio de temas secundarios de WordPress y trabajar a partir de ello.
Los archivos de la plantilla principal están en la carpeta principal del tema. Por ejemplo, la plantilla para ver una sola publicación es single.php, y la plantilla para páginas es page.php.
Twenty Seventeen también divide sus plantillas en partes de plantilla (template-parts) a las que se hace referencia en la plantilla principal utilizando la función get_template_part() de WordPress. Por ejemplo, si deseas editar page.php, puedes comenzar localizando las partes de la plantilla para ver si esos son los bits que necesitas editar. En nuestro archivo de ejemplo, la línea 28 dice:
get_template_part( 'template-parts/page/content', 'page' );
¿Cómo leemos esto? template-parts/page/ es la ruta de la carpeta. Mientras tanto, «contenido» se refiere al carácter en el nombre del archivo antes del guión y «página» después del guión.
Juntos forman la ruta completa wp-content/themes/twentyseventeen/template-parts/page/content-page.php.
Siguiendo la estructura, si deseas cambiar el diseño de content-page.php, debes copiarlo en la carpeta de temas secundarios y colocarlo en esta ubicación: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.
¡Y eso es todo!
Agregar y quitar funciones
Otra ventaja significativa de utilizar un child theme en WordPress es la capacidad de tener un archivo functions.php separado, que, al igual que los plugins, se usa para agregar (o eliminar) ciertas características usando el código PHP.
Por ejemplo, las siguientes líneas desactivarán la función del clic derecho en tu tema:
function your_function() { ?> <script> jQuery(document).ready(function(){ jQuery(document).bind("contextmenu",function(e){ return false; }); }); </script> <?php } add_action('wp_footer', 'your_function');
Conclusión
Los temas secundarios de WordPress ofrecen una forma poderosa de crear un proyecto completamente nuevo basado en las características del tema maestro existente sin romper su función principal. Con un poco de codificación simple y administración de directorios, puedes modificar el child theme tan poco o tanto como desees, proporcionando una amplia gama de posibilidades para tu diseño.
Para obtener más tutoriales de desarrollo de WordPress, consulta nuestra sección de tutoriales de WordPress aquí. ¡No dudes en dejar un comentario a continuación si tienes alguna pregunta!
Comentarios
mayo 10 2018
site-content-contain { background-color: #d5ffa0; position: relative; } En este código hay un error, al ser una clase debe colocar asi: .site-content-contain { background-color: #d5ffa0; position: relative; } Saludos.
junio 06 2018
Gracias por avisarnos Adrián. Fue un error de transcripción.
enero 05 2019
Gracias, llevo poco tiempo usando Wordpress y con este post me has ayudado a saber como ordenarme con la personalización de los temas. Saludos!
septiembre 07 2020
Cree mi child theme y ahora estoy experimentando problemas con algunas páginas en Wordpress. Por ejemplo, al querer ir a la página de Blog, me lleva a la de Inicio. Lo mismo con la página de contacto, es como si algo se hubiese desconfigurado y a pesar de que las páginas Blog y contacto existen no puedo entrar a ellas. Alguna recomendación sobre qué validar para resolverlo? Gracias de antemano!
septiembre 23 2020
Hola Facundo, en este caso te sugiero contactar a tu proveedor de hosting para que te ayude. Si estás con Hostinger nuestros agentes te pueden orientar para que puedas encontrar una solución a tu problema.
mayo 23 2021
Hola tengo una duda: ¿como se puede deshacer? Creamos uno con un plugin pero ahora sospechamos que AMP no funciona precisamente porque al crear el child, la configuración normal de WP se ha roto, con lo que el plugin AMP no encuentra los CSS o añade funciones que no estaban. Gracias
mayo 25 2021
Hola Yago, si hiciste una copia de seguridad antes de los cambios, puedes restaurar el sitio desde allí. Si no, te sugiero que contactes al servicio de atención de tu alojamiento para que te asesoren. Si tienes contratado Hostinger, puedes hacerlo desde la sección Ayuda del hPanel. Sin duda, ellos podrán orientarte en una solución. Mucha suerte!