mayo 7, 2020
5min Leer
Gustavo B.
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.
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.
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.
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:
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!
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.
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í:
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:
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.
Puedes hacer lo mismo con cualquier otro elemento que desees cambiar.
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!
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');
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!
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.
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!
Respondido en 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.
Gustavo Bustos
Respondido en junio 06 2018
Gracias por avisarnos Adrián. Fue un error de transcripción.