{"id":4198,"date":"2017-04-19T01:48:09","date_gmt":"2017-04-19T01:48:09","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriales\/?p=4198"},"modified":"2025-01-15T09:49:20","modified_gmt":"2025-01-15T08:49:20","slug":"utilizar-child-theme","status":"publish","type":"post","link":"\/co\/tutoriales\/utilizar-child-theme","title":{"rendered":"C\u00f3mo crear un tema hijo (child theme) de WordPress y personalizarlo"},"content":{"rendered":"<p>Uno de los mayores puntos fuertes de WordPress es su capacidad de personalizaci&oacute;n, algo que tambi&eacute;n ocurre con los temas de WordPress. Con ellos, los usuarios tienen un alto grado de flexibilidad para crear y modificar la apariencia de su sitio.<\/p><p>Sin embargo, crear un tema completo desde cero puede ser una tarea dif&iacute;cil y que requiere mucho tiempo. Por eso la mayor&iacute;a de la gente prefiere crear temas hijo para sus sitios web de WordPress.<\/p><p>Este tutorial te explicar&aacute; por qu&eacute; es necesaria esta pr&aacute;ctica y te guiar&aacute; en la creaci&oacute;n y edici&oacute;n de tu primer tema hijo o child theme.<\/p><h2 class=\"wp-block-heading\" id=\"h-que-es-un-tema-hijo-de-wordpress-video\">&iquest;Qu&eacute; es un Tema Hijo de WordPress? &ndash; Video<\/h2><p>&iquest;Cuentas con poco tiempo para leer? Mira este tutorial en video en su lugar.<\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"&iquest;Qu&eacute; es un Tema Hijo de WordPress? | Explicado\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/8qoDWAHAnc4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-spain.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Suscribirse \u00a1Para m\u00e1s videos educativos!<\/span>\n          <span class=\"channel-name\">Academia de Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCYmKCu1yo_L0fqKe3U_oMnw?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribirse<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-deberias-usar-los-temas-hijos-child-themes-de-wordpress\">&iquest;Por qu&eacute; deber&iacute;as usar los temas hijos (child themes) de WordPress ?<\/h2><p>Utilizar un tema hijo es una de las formas m&aacute;s eficientes de <a href=\"\/co\/tutoriales\/crear-tema-wordpress-responsive-usando-html5\/\">crear un nuevo tema de WordPress<\/a> basado en uno existente, manteniendo la mayor&iacute;a de sus caracter&iacute;sticas. Esto se debe a que utiliza las caracter&iacute;sticas y elementos de su tema padre u original, por lo que no es necesario codificar todo desde cero.<\/p><p>Como un tema hijo hereda las caracter&iacute;sticas de un tema maestro o padre, es posible personalizar su c&oacute;digo sin romper la funcionalidad del original. De este modo, si un tema recibe una actualizaci&oacute;n, todos los cambios que hayas hecho no se sobrescribir&aacute;n.<\/p><p>Construir un tema hijo o child theme tambi&eacute;n es relativamente f&aacute;cil, ya que no tienes que indagar demasiado en los archivos ra&iacute;z de tu sitio. Tareas como la transferencia de archivos y la personalizaci&oacute;n de los archivos CSS pueden realizarse mediante el administrador de archivos de tu panel de control y el panel de control de WordPress.<\/p><p>Los temas hijos tambi&eacute;n te permiten mantener ciertos aspectos visuales del tema padre y mantenerlos uniformes en varios dominios.<\/p><p>Los aspectos esenciales, como las actualizaciones y los parches de seguridad constantes, estar&aacute;n cubiertos, especialmente si eliges un tema padre de un desarrollador de confianza.<\/p><p>Otra raz&oacute;n para utilizar un tema hijo es que ofrece una soluci&oacute;n a prueba de fallos si alguna vez lo configuras mal. Adem&aacute;s, te permite hacer un seguimiento eficaz de las partes que has cambiado, ya que los archivos de un tema hijo est&aacute;n separados de su padre.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-funciona-un-child-theme-en-wordpress\">C&oacute;mo funciona un child theme en WordPress<\/h2><p>Como mencionamos antes, un child theme se almacena en un directorio separado del tema principal, cada uno con sus propios archivos <strong>style.css<\/strong> y <strong>functions.php<\/strong>. Puedes agregar otros archivos seg&uacute;n sea necesario, pero esos dos son el m&iacute;nimo requerido para que utilizar un child theme y que funcione correctamente.<\/p><p>Usando los archivos<strong> .css<\/strong> y <strong>.php<\/strong> relevantes, puedes modificar todo, desde el estilo, los par&aacute;metros de dise&ntilde;o hasta la codificaci&oacute;n real y los scripts utilizados por un tema secundario, incluso si los atributos no est&aacute;n presentes en tu tema principal.<\/p><p>Piensa en ello como una superposici&oacute;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. <\/p><p>Como resultado, obtienes lo mejor de tu dise&ntilde;o personalizado sin sacrificar la funcionalidad principal del tema.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-crear-un-tema-hijo-o-child-theme-en-wordpress\">C&oacute;mo crear un tema hijo o child theme en WordPress<\/h2><p>Antes de empezar a crear un tema hijo, ten en cuenta que es esencial tener conocimientos b&aacute;sicos de HTML, CSS y PHP, ya que el proceso implica algo de codificaci&oacute;n. Con los numerosos temas padre disponibles, tambi&eacute;n es importante elegir uno que se adapte a tus necesidades.<\/p><p>Hay dos m&eacute;todos comunes para crear un tema de WordPress. Los usuarios pueden utilizar un plugin o crear un tema hijo utilizando un c&oacute;digo personalizado. Cada opci&oacute;n tiene sus puntos fuertes y d&eacute;biles. En este tutorial, nos centraremos en crear un tema hijo b&aacute;sico de forma manual.<\/p><p>Recomendamos <a href=\"\/co\/tutoriales\/instalar-wordpress-en-local\">instalar WordPress localmente <\/a>al desarrollar un child theme. Hacerlo te permitir&aacute; hacer cambios en tu sitio de WordPress sin riesgo de da&ntilde;ar la versi&oacute;n en vivo. Tambi&eacute;n te permite crear un tema hijo sin tener que comprar un nombre de dominio o un plan de alojamiento web o web hosting. <\/p><p>Las siguientes instrucciones utilizan <a href=\"https:\/\/es.wordpress.org\/themes\/twentyseventeen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Twenty Seventeen<\/a> como tema padre, aunque si lo prefieres es posible utilizar otro. Tambi&eacute;n vamos a utilizar el Administrador de Archivos de Hostinger para a&ntilde;adir y editar archivos, aunque con FTP tambi&eacute;n funciona.<\/p><p>Veamos la gu&iacute;a paso a paso sobre c&oacute;mo crear un tema hijo en WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Accede al panel de control y selecciona &lsquo;<strong>Administrador de Archivos<\/strong>&rsquo;.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"298\" height=\"333\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-sidebar-es.png\" alt=\"administrador de archivos de hpanel de hostinger\" class=\"wp-image-32399\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-sidebar-es.png 298w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-sidebar-es-268x300.png 268w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-sidebar-es-134x150.png 134w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Navega entre las carpetas y has clic en <strong>public_htm l-&gt; wp-content -&gt; themes<\/strong>. Aqu&iacute; es donde se ubicar&aacute; la carpeta del tema padre y del tema hijo.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1382\" height=\"661\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es.png\" alt=\"La carpeta de temas donde se ubicar&aacute; el directorio de tu tema padre y del tema hijo en el hPanel\" class=\"wp-image-32401\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es.png 1382w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es-300x143.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es-1024x490.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es-150x72.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-selected-es-768x367.png 768w\" sizes=\"(max-width: 1382px) 100vw, 1382px\" \/><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Crea el directorio de un tema hijo haciendo clic en el icono de <strong>Nueva Carpeta<\/strong> del men&uacute; superior. Introduce un nombre para tu tema hijo y haz clic en <strong>Crear<\/strong>.<br><\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1203\" height=\"640\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es.png\" alt=\"El icono Nueva carpeta en el archivo public_html\" class=\"wp-image-32402\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es.png 1203w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es-300x160.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es-1024x545.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es-150x80.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/hpanel-files-filemanager-publichtml-wpcontent-themes-newfolder-es-768x409.png 768w\" sizes=\"(max-width: 1203px) 100vw, 1203px\" \/><\/figure><\/div><p>\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> reemplaza los espacios en el nombre de un archivo con guiones (-) para evitar errores.<\/p><\/div>\n\n\n\n<\/p><ol class=\"wp-block-list\" start=\"4\">\n<li>Crea un archivo <strong>style.css<\/strong> en la carpeta del tema hijo. Completa su contenido con el siguiente c&oacute;digo:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* \nTheme Name: Twenty Seventeen Child \nTheme URI: http:\/\/yourdomain.com\nDescription: Twenty Seventeen Child \nTheme Author: Your Name\nAuthor URI: http:\/\/yourdomain.com\nTemplate: twentyseventeen \nVersion: 1.0.0\nText Domain: twentyseventeen-child\nLicense: GNU General Public License or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n*\/<\/pre><p>Este c&oacute;digo contiene informaci&oacute;n b&aacute;sica sobre el tema hijo, como su nombre y qu&eacute; tema se utiliza como padre. Los detalles adicionales como el autor y la descripci&oacute;n se utilizan principalmente como identificadores si decides publicar el tema.<\/p><ol class=\"wp-block-list\" start=\"5\">\n<li>Cambia todos los valores en consecuencia. El campo m&aacute;s importante es <strong>Plantilla<\/strong>, ya que indica a WordPress en qu&eacute; tema padre se basa tu tema hijo. Una vez hecho esto, haz clic en <strong>Guardar y Cerrar<\/strong>.<\/li>\n\n\n\n<li>En este paso, pondr&aacute;s en cola las hojas de estilo de los temas padre e hijo. Crea un archivo PHP llamado <strong>functions.php<\/strong> en la carpeta del tema hijo, pero no lo rellenes con el c&oacute;digo del archivo del tema padre porque debe permanecer separado<\/li>\n<\/ol><p>\n\n\n\n<div><p class=\"important\"><strong>&iexcl;Importante!<\/strong> Omite este paso si utilizas WordPress 5.9, ya que el tema hijo heredar&aacute; los estilos globales del archivo theme.json del tema padre.<\/p><\/div>\n\n\n\n<\/p><p>Comienza el c&oacute;digo con una etiqueta PHP de apertura, y luego incluye las funciones que pondr&aacute;n en cola la hoja de estilos del tema principal. Echa un vistazo al siguiente ejemplo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );\nfunction enqueue_parent_styles() {\n   wp_enqueue_style( 'parent-style', get_template_directory_uri().'\/style.css' );\n}\n?&gt;<\/pre><p>Visita tu sitio web y accede a <strong>Apariencia -&gt; Tema<\/strong>. Activa el child theme que acabas de crear y notar&aacute;s que tiene el mismo aspecto que el tema padre o principal.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"269\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-1024x269.png\" alt=\"El bot&oacute;n de activaci&oacute;n de tu tema hijo de WordPress.\" class=\"wp-image-23374\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-300x79.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-150x39.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-768x202.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-1536x404.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/Child-theme-2048x539.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-personalizar-tu-child-theme-de-wordpress\">C&oacute;mo personalizar tu child theme de WordPress<\/h2><p>Para personalizar tu child theme o tema hijo, necesitas un conocimiento y una comprensi&oacute;n b&aacute;sica de las reglas CSS y de c&oacute;mo inspeccionar los elementos para poder localizar su c&oacute;digo CSS y la clase a la que est&aacute;n asignados.<\/p><p>Hay algunos m&eacute;todos para personalizar tu tema hijo. Se puede cambiar el dise&ntilde;o de la p&aacute;gina a&ntilde;adiendo archivos de plantilla a la carpeta del tema hijo. Tambi&eacute;n es posible cambiar el estilo del tema hijo a&ntilde;adiendo c&oacute;digo CSS personalizado.<\/p><p>Por &uacute;ltimo, los temas hijos tambi&eacute;n pueden tener nuevas funcionalidades que anulen su tema padre.<\/p><p>Ahora, veamos los aspectos b&aacute;sicos de la personalizaci&oacute;n de un tema hijo. Para ello, ve a <strong>Apariencia -&gt; Temas<\/strong> y haz clic en <strong>Personalizar<\/strong> en tu tema hijo activo. Cuando se abra el <strong>Editor de Temas<\/strong>, selecciona <strong>CSS adicional<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-1024x584.png\" alt=\"\" class=\"wp-image-23376\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-300x171.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-150x86.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-768x438.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-1536x876.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/adicional-css-boton-2048x1168.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-cambiando-el-color-de-fondo\">Cambiando el color de fondo<\/h3><p>Inserta la siguiente regla CSS si deseas cambiar el color de fondo de tu tema secundario de WordPress:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.site-content-contain {\n    background-color: #DEF0F5;\n    position: relative;\n}\n<\/pre><p>El valor junto a <strong>background-color:<\/strong> corresponde al <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">c&oacute;digo hexadecimal<\/a> del color que elijas. En este ejemplo, dado que lo estamos cambiando de blanco a azul claro, el resultado se ve as&iacute;:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited.png\" alt=\"\" class=\"wp-image-23378\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited-300x161.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited-150x81.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited-768x412.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited-1536x824.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambiar-color-de-fondo-edited-2048x1099.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-cambiar-de-color-de-la-barra-lateral\">Cambiar de color de la barra lateral<\/h3><p>Puedes crear una visualizaci&oacute;n agradable de tus widgets agregando algo de color a la barra lateral con el siguiente c&oacute;digo CSS:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.widget {\nbackground: #B9EBFA;\npadding: 25px;\n}<\/pre><p>Nuevamente, no olvides editar el c&oacute;digo de color con el color que quieres. Deber&iacute;as obtener un resultado como este:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-1024x547.png\" alt=\"Editar el color de la barra lateral del tema secundario de WordPress.\" class=\"wp-image-23380\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-300x160.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-150x80.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-768x410.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-1536x820.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/2022-09-14_23-55-2048x1094.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-cambiar-tipos-de-fuente-tamanos-y-colores\">Cambiar tipos de fuente, tama&ntilde;os y colores<\/h3><p>Para cambiar el tipo de fuente, el tama&ntilde;o y el color de su tema secundario de WordPress, inserte el siguiente c&oacute;digo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\ncolor: teal;\n}\np {\nfont-family: Georgia;\nfont-size: 18px;\n}\n<\/pre><p>La etiqueta<strong> p<\/strong> significa p&aacute;rrafo. Como puedes ver a continuaci&oacute;n, la regla anterior cambi&oacute; el aspecto de las fuentes del p&aacute;rrafo en funci&oacute;n de los valores especificados.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--1024x546.png\" alt=\"Edici&oacute;n de la fuente del tema secundario de WordPress.\" class=\"wp-image-23381\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color-.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--300x160.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--150x80.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--768x409.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--1536x818.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/cambio-de-color--2048x1091.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Para cambiar la fuente de otras partes del texto, como el t&iacute;tulo o el encabezado, inspecciona los elementos para ver primero tus par&aacute;metros CSS. En aras de la ilustraci&oacute;n, intentemos cambiar el color de fuente del t&iacute;tulo.<\/p><ol class=\"wp-block-list\">\n<li>Primero, haz<strong> clic derecho<\/strong> en el texto y selecciona <strong>Inspeccionar<\/strong>. Localiza el enlace de <strong>estilo CSS<\/strong> y &aacute;brelo en una nueva pesta&ntilde;a.<br><img decoding=\"async\" width=\"1024\" height=\"539\" class=\"wp-image-23382\" style=\"width: 1200px\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect.png\" alt=\"\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect-300x158.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect-150x79.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect-768x404.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect-1536x808.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/inspect-2048x1077.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/li>\n\n\n\n<li>Encuentra la parte exacta que est&aacute;s buscando usando <strong>CTRL+F<\/strong> y copia el c&oacute;digo en la pesta&ntilde;a<strong> CSS adicional<\/strong>. Cambia los valores en funci&oacute;n de lo que quieras.<br><img decoding=\"async\" width=\"1024\" height=\"548\" class=\"wp-image-23383\" style=\"width: 1100px\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras.png\" alt=\"\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras-300x161.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras-150x80.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras-768x411.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras-1536x822.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/cambiar-color-letras-2048x1096.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/li>\n<\/ol><p>Puedes hacer lo mismo con cualquier otro elemento que desees cambiar.<\/p><h3 class=\"wp-block-heading\" id=\"h-cambiando-el-diseno-de-publicaciones-y-paginas\">Cambiando el dise&ntilde;o de publicaciones y p&aacute;ginas<\/h3><p>Al igual que el CSS personalizado de un un child theme de WordPress anula el estilo de tu tema principal, los archivos de plantilla te permiten crear tus propios dise&ntilde;os al suplantar los predeterminados.<\/p><p>Cada tema de WordPress tiene un dise&ntilde;o y una estructura de p&aacute;gina diferentes, pero la mayor&iacute;a de ellos constan de secciones como la cabecera, el contenido, el pie de p&aacute;gina y la barra lateral.<\/p><p>Estas secciones est&aacute;n controladas por archivos de plantilla que corresponden a su funci&oacute;n. Por ejemplo, la secci&oacute;n de la cabecera suele estar controlada por el archivo <strong>header.php<\/strong>.<\/p><p>Los archivos de plantilla originales se encuentran en la carpeta del tema principal. Si quieres hacer una plantilla de p&aacute;gina de WordPress, todo lo que tienes que hacer es copiar el archivo de plantilla en la carpeta de tu tema hijo y modificarlo.<\/p><p>Ten en cuenta que tu nuevo archivo de plantilla debe tener el mismo nombre y estar en la carpeta que corresponde al original.<\/p><p>Twenty Seventeen tambi&eacute;n divide sus plantillas en partes de plantilla (<strong>template-parts<\/strong>) a las que se hace referencia en la plantilla principal utilizando la funci&oacute;n <strong>get_template_part()<\/strong> <strong>de WordPress<\/strong>.<\/p><p>Por ejemplo, si deseas editar <strong>page.php<\/strong>, 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&iacute;nea 28 dice:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">get_template_part( 'template-parts\/page\/content', 'page' );<\/pre><p>&iquest;C&oacute;mo leemos esto?<strong> template-parts\/page\/<\/strong> es la ruta de la carpeta. Mientras tanto, <strong>&ldquo;contenido&rdquo;<\/strong> se refiere al car&aacute;cter en el nombre del archivo antes del gui&oacute;n y &ldquo;<strong>p&aacute;gina<\/strong>&rdquo; despu&eacute;s del gui&oacute;n.<\/p><p>Juntos forman la ruta completa <strong>wp-content\/themes\/twentyseventeen\/template-parts\/page\/content-page.php.<\/strong><\/p><p>Siguiendo la estructura, si deseas cambiar el dise&ntilde;o de <strong>content-page.php<\/strong>, debes copiarlo en la carpeta de temas secundarios y colocarlo en esta ubicaci&oacute;n: <strong>wp-content\/themes\/twentyseventeen-child\/template-parts\/page\/content-page.php.<\/strong><\/p><h3 class=\"wp-block-heading\" id=\"h-cambiar-los-estilos-globales-en-wordpress-5-9\">Cambiar los estilos globales en WordPress 5.9<\/h3><p>Personalizar un tema hijo basado en bloques en WordPress 5.9 es f&aacute;cil. El panel de estilos globales te permite cambiar la paleta de colores del tema y el color de fondo sin necesidad de codificar<\/p><p>Si quieres codificar los estilos por defecto, crea un archivo <strong>theme.json<\/strong> para el child theme que contenga s&oacute;lo un bloque CSS personalizado con definiciones de estilos y ajustes.<\/p><p><strong>Uso del panel de estilos globales<\/strong><\/p><p>Ve al <a href=\"\/co\/tutoriales\/gutenberg-wordpress\">editor de Gutenberg<\/a> navegando hasta <strong>Apariencia -&gt; Editar<\/strong>. A continuaci&oacute;n, haz clic en el icono <strong>blanco y negro <\/strong>de la esquina superior derecha de la pantalla para abrir el panel de estilos globales.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-1024x481.png\" alt=\"\" class=\"wp-image-23393\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-300x141.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-150x70.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-768x361.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-1536x721.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/WP-editor-1-2048x962.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>El panel de estilos globales aparecer&aacute; en la parte derecha de la pantalla. Ve a <strong>Colores<\/strong> para encontrar las opciones de personalizaci&oacute;n del color global del fondo, del texto y de los enlaces.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-1024x465.png\" alt=\"\" class=\"wp-image-23394\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-300x136.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-150x68.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-768x349.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-1536x698.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-colores-2048x930.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Para a&ntilde;adir colores personalizados, ve a la configuraci&oacute;n de la <strong>Paleta<\/strong> y encuentra la secci&oacute;n <strong>Personalizado<\/strong> en la parte inferior del panel. Haz clic en el icono del signo <strong>m&aacute;s (+)<\/strong> y aparecer&aacute; la herramienta de selecci&oacute;n de colores. Puedes a&ntilde;adir tantos colores como quieras sin que ello afecte a la configuraci&oacute;n de los estilos globales del tema principal.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta-1024x653.png\" alt=\"\" class=\"wp-image-23395\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta-300x191.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta-150x96.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta-768x490.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2022\/09\/wp-editor-paleta-1536x980.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>Crear un archivo theme.json<\/strong><\/p><p>La creaci&oacute;n de un nuevo archivo <strong>theme.json<\/strong> anular&aacute; la paleta de colores por defecto del tema en lugar de a&ntilde;adir un color personalizado.<\/p><p>S&oacute;lo necesitamos un peque&ntilde;o bloque de c&oacute;digo CSS para hacerlo &ndash; no afectar&aacute; al tema principal.<\/p><p>Utiliza el <strong>administrador de archivos<\/strong> de tu panel de control para abrir el directorio de la carpeta del tema hijo y a&ntilde;ade el archivo theme.json. Despu&eacute;s, simplemente a&ntilde;ade el c&oacute;digo CSS personalizado al archivo.<\/p><p>Por ejemplo, aqu&iacute; tienes un fragmento de c&oacute;digo para sustituir la paleta de colores por defecto del tema:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\"version\": 2,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"foreground\",\n          \"color\": \"#ffffff\",\n          \"name\": \"Foreground\"\n        },\n        {\n          \"slug\": \"background\",\n          \"color\": \"#a88f32\",\n          \"name\": \"Background\"\n        },\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#fffb00\",\n          \"name\": \"Primary\"\n        },\n        {\n          \"slug\": \"secondary\",\n          \"color\": \"#6fff00\",\n          \"name\": \"Secondary\"\n        },\n        {\n          \"slug\": \"tertiary\",\n          \"color\": \"#000000\",\n          \"name\": \"Tertiary\"\n        }\n      ]\n    }\n  }\n}\n<\/pre><p>Al abrir el panel de estilos globales, ver&aacute;s que la paleta de colores por defecto del tema ha cambiado seg&uacute;n el c&oacute;digo CSS.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"426\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-1024x426.png\" alt=\"\" class=\"wp-image-23398\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-300x125.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-150x62.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-768x319.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-1536x638.png 1536w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2017\/04\/WP-PALETA-2048x851.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Utiliza este m&eacute;todo para cambiar otros estilos por defecto, como el filtro duotono y los estilos de bloque.<\/p><h3 class=\"wp-block-heading\" id=\"h-agregando-y-quitando-funciones\">Agregando y quitando funciones<\/h3><p>Otra ventaja significativa de utilizar un child theme en WordPress es la capacidad de tener un archivo <strong>functions.php<\/strong> separado, que, al igual que los <a href=\"\/co\/tutoriales\/tutorial-wordpress-plugins-crear-plugin-wordpress\/\">plugins<\/a>, se usa para agregar (o eliminar) ciertas caracter&iacute;sticas usando el c&oacute;digo PHP.<\/p><p>Sin embargo, el proceso puede ser algo m&aacute;s complicado si quieres anular o cambiar una funci&oacute;n que ya tiene el tema padre. Tendr&aacute;s que anular las funciones del tema principal manualmente. Hay tres formas principales de hacerlo:<\/p><ul class=\"wp-block-list\">\n<li>Sustituir una <a href=\"https:\/\/codex.wordpress.org\/Pluggable_Functions\" target=\"_blank\" rel=\"noreferrer noopener\">funci&oacute;n pluggable<\/a> a&ntilde;adiendo una nueva funci&oacute;n con el mismo nombre al archivo <strong>function.php <\/strong>de tu tema hijo.<\/li>\n\n\n\n<li>Aumentar una funci&oacute;n existente escribiendo otra funci&oacute;n con un nombre diferente en el archivo <strong>function.php <\/strong>del child theme y asegur&aacute;ndote de que se ejecuta despu&eacute;s de la del tema padre.<\/li>\n\n\n\n<li>Desengancha una funci&oacute;n del tema principal para evitar que WordPress la ejecute.<\/li>\n<\/ul><p>Por ejemplo, las siguientes l&iacute;neas desactivar&aacute;n la funci&oacute;n del clic derecho en tu tema:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function your_function() {\n   ?&gt;\n&lt;script&gt;\njQuery(document).ready(function(){\n    jQuery(document).bind(\"contextmenu\",function(e){\n        return false;\n    });\n});\n&lt;\/script&gt;\n&lt;?php\n}\nadd_action('wp_footer', 'your_function');<\/pre><h2 class=\"wp-block-heading\" id=\"h-posibles-problemas-del-uso-de-un-tema-hijo\">Posibles problemas del uso de un tema hijo<\/h2><p>Aunque utilizar un tema hijo puede ser beneficioso, tambi&eacute;n puede tener algunos efectos negativos. Echemos un vistazo a tres posibles problemas que puedes encontrar al utilizar un tema hijo en tu sitio web de WordPress.<\/p><h3 class=\"wp-block-heading\" id=\"h-tiempo-de-carga-de-la-pagina-mas-lento\">Tiempo de carga de la p&aacute;gina m&aacute;s lento<\/h3><p>Cuando un sitio utiliza un tema hijo, existe la posibilidad de que se cargue m&aacute;s lentamente. Esto se debe a que, durante el proceso de carga, WordPress acceder&aacute; primero a la hoja de estilos del tema hijo y acudir&aacute; a la hoja de estilos del tema padre cuando necesite c&oacute;digo que no est&eacute; disponible.<\/p><p>Este proceso de acceso a dos hojas de estilo diferentes puede tener un impacto negativo en el rendimiento del sitio. Sin embargo, los cambios en el tiempo de carga de la p&aacute;gina deber&iacute;an ser relativamente peque&ntilde;os y pasar desapercibidos para la mayor&iacute;a de los usuarios y los rastreadores de los motores de b&uacute;squeda.<\/p><p>Tambi&eacute;n es posible minimizar a&uacute;n m&aacute;s este tiempo de carga manteniendo limpio el c&oacute;digo del tema hijo. En definitiva, recuerda hacer un seguimiento del tiempo de carga de tu sitio si decides utilizar un tema hijo y tomar las medidas necesarias cuando notes una ca&iacute;da significativa de la velocidad.<\/p><h3 class=\"wp-block-heading\" id=\"h-curva-de-aprendizaje-pronunciada\">Curva de aprendizaje pronunciada<\/h3><p>El proceso de aprender c&oacute;mo funciona el tema padre es posiblemente una de las partes m&aacute;s dif&iacute;ciles de crear un tema hijo. Dicho esto, es una inversi&oacute;n que merece la pena.<\/p><p>Entender correctamente la jerarqu&iacute;a de las plantillas puede llevar mucho tiempo, especialmente cuando el tema padre tiene una estructura compleja con ganchos y filtros &uacute;nicos.<\/p><p>Algunos temas padre tambi&eacute;n vienen con numerosas caracter&iacute;sticas y opciones. Aunque esto puede ser una gran ventaja para tu tema hijo, manejar demasiadas funciones puede resultar confuso y prolongar tu proceso de aprendizaje.<\/p><p>En la mayor&iacute;a de los casos, ser&aacute; m&aacute;s f&aacute;cil una vez que entiendas completamente los archivos del tema padre y c&oacute;mo funcionan.<\/p><h3 class=\"wp-block-heading\" id=\"h-dependencia-del-tema-padre\">Dependencia del tema padre<\/h3><p>Existe la posibilidad de que el desarrollador de un tema padre deje de trabajar en una caracter&iacute;stica importante o en el tema por completo. Tambi&eacute;n puede decidir hacer un cambio significativo en el tema que puede afectar a tu tema hijo de alguna manera.<\/p><p>Si un desarrollador abandona un tema padre, tu tema hijo dejar&aacute; de recibir actualizaciones y parches, exponi&eacute;ndolo a diversas amenazas de seguridad. Esto puede tener un gran impacto en cualquier sitio que utilice tu tema hijo: es posible que tengan que dejar de utilizarlo por completo, dependiendo de la gravedad de la situaci&oacute;n.<\/p><p>Sin embargo, los temas genuinos y populares son menos propensos a ser abandonados, por lo que es posible que no tengas que preocuparte por este problema.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-solucionar-los-errores-de-los-temas-hijos-de-wordpress\">&iquest;C&oacute;mo solucionar los errores de los temas hijos de WordPress?<\/h2><p>Es posible que te encuentres con problemas al crear e implementar un tema hijo en un sitio de WordPress. Echemos un vistazo a cinco soluciones comunes para comprobar si tu tema hijo no funciona correctamente.<\/p><ul class=\"wp-block-list\">\n<li><strong>Comprueba el archivo function.php. <\/strong>Si no se pone en cola la hoja de estilos del tema hijo en el archivo <strong>function.php<\/strong>, el sitio cargar&aacute; el tema padre en su lugar. Por lo tanto, aseg&uacute;rate de volver a comprobar el archivo <strong>function.php<\/strong> despu&eacute;s de realizar cambios en un tema.<\/li>\n\n\n\n<li><strong>Haz referencia al tema principal.<\/strong> Si te encuentras con el error de tema roto, puede ser porque WordPress est&aacute; tratando tu tema hijo como un tema independiente. Soluciona este error haciendo referencia a la funci&oacute;n del tema padre en el archivo CSS de tu tema hijo.<\/li>\n\n\n\n<li><strong>Utiliza la regla CSS !Important.<\/strong> Puede darse el caso de que algunos elementos de tu tema hijo no funcionen correctamente porque el c&oacute;digo CSS del tema padre los sobrescribe. La soluci&oacute;n m&aacute;s com&uacute;n para este problema es a&ntilde;adir reglas CSS como !important a la hoja CSS del tema hijo.<\/li>\n\n\n\n<li><strong>Nombra los archivos del tema correctamente. <\/strong>Algunos errores pueden ser causados por nombres de archivo incorrectos. WordPress requiere un nombre espec&iacute;fico para algunos archivos como las hojas de estilo. Si lo nombras de forma diferente a <strong>style.css<\/strong>, el sistema no podr&aacute; localizarlo y renderizarlo para el usuario final.<\/li>\n\n\n\n<li><strong>Borra tu cach&eacute;.<\/strong> El almacenamiento en cach&eacute; puede hacer que tu navegador web muestre el tema padre o una versi&oacute;n m&aacute;s antigua de tu tema hijo. La soluci&oacute;n m&aacute;s sencilla para este problema es borrar la cach&eacute; de WordPress y desactivar los plugins de cach&eacute; si los utilizas.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-consejos-y-trucos-adicionales-para-crear-un-child-them-o-tema-hijo\">Consejos y trucos adicionales para crear un child them o tema hijo<\/h2><p>El proceso de creaci&oacute;n de un nuevo tema hijo puede ser complicado, especialmente para los principiantes. Aqu&iacute; tienes siete consejos adicionales que pueden ayudarte a crear un tema hijo m&aacute;s f&aacute;cilmente:<\/p><ul class=\"wp-block-list\">\n<li>Cuando actives un tema hijo por primera vez, considera la posibilidad de hacerlo en un <a href=\"\/co\/tutoriales\/entorno-staging-wordpress\">entorno de prueba<\/a> en lugar de en un sitio web en vivo.<\/li>\n\n\n\n<li>Los temas hijos deben tener la misma estructura de &aacute;rbol de carpetas que su tema padre. WordPress dar&aacute; prioridad al archivo que est&eacute; primero en <a href=\"\/co\/tutoriales\/jerarquia-de-plantillas-de-wordpress\">la jerarqu&iacute;a de plantillas<\/a>, ya sea del tema hijo o del tema padre.<\/li>\n\n\n\n<li>Aseg&uacute;rate de que tu nueva funci&oacute;n tiene el mismo nombre que la funci&oacute;n del tema padre que quieres anular.<\/li>\n\n\n\n<li>La mejor manera de crear un directorio de tema hijo es darle el mismo nombre que el tema padre a&ntilde;adiendo <strong>-child<\/strong> al final.<\/li>\n\n\n\n<li>Elegir un marco de trabajo para el tema padre de un desarrollador de confianza que lo actualice regularmente es importante para evitar inconvenientes y problemas significativos con tu tema hijo.<\/li>\n\n\n\n<li>Considera la posibilidad de buscar entre los muchos temas hijo ya creados para el tema padre, si es posible. Esto puede darte una idea general del mejor enfoque para diversas tareas.<\/li>\n\n\n\n<li>Recuerda siempre activar tu nuevo tema hijo una vez que lo subas a WordPress.<\/li>\n\n\n\n<li>Ten en cuenta que un tema hijo depende en gran medida del tema padre, as&iacute; que aseg&uacute;rate de mantener todos los archivos del tema padre en tu <a href=\"\/co\/tutoriales\/instalar-tema-wordpress\">instalaci&oacute;n de temas de WordPress<\/a>.<\/li>\n\n\n\n<li>No tengas miedo de volver a empezar si te encuentras con un error.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/co\/hosting-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2024\/06\/ES-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Un tema hijo de WordPress permite a los usuarios de WordPress crear un proyecto completamente nuevo basado en el tema padre existente sin romper su funcionalidad principal.<\/p><p>Con un poco de codificaci&oacute;n sencilla y gesti&oacute;n de directorios, es posible modificar el tema hijo tanto como quieras.<\/p><p>En este art&iacute;culo, hemos conocido las ventajas de utilizar un tema hijo en tu sitio de WordPress y c&oacute;mo funciona. Tambi&eacute;n hemos visto la gu&iacute;a paso a paso para crear un tema hijo y c&oacute;mo personalizarlo.<\/p><p>Sin embargo, antes de proceder con un tema hijo, los usuarios deben ser conscientes de estos posibles problemas al utilizar uno en su sitio de WordPress:<\/p><ul class=\"wp-block-list\">\n<li>Tiempo de carga de la p&aacute;gina m&aacute;s lento.<\/li>\n\n\n\n<li>Curva de aprendizaje pronunciada.<\/li>\n\n\n\n<li>Dependencia del tema padre.<\/li>\n<\/ul><p>Para ver m&aacute;s tutoriales de desarrollo de WordPress, consulta nuestra secci&oacute;n de tutoriales de WordPress. No dudes en dejar un comentario abajo si tienes alguna pregunta.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno de los mayores puntos fuertes de WordPress es su capacidad de personalizaci&oacute;n, algo que tambi&eacute;n ocurre con los temas de WordPress. Con ellos, los usuarios tienen un alto grado de flexibilidad para crear y modificar la apariencia de su sitio. Sin embargo, crear un tema completo desde cero puede ser una tarea dif&iacute;cil y [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/utilizar-child-theme\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":18775,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Utilizar Un Child Theme En WordPress: Gu\u00eda Para Principiantes","rank_math_description":"\u00bfQuieres editar un tema de WordPress? Aseg\u00farate de utilizar un Child Theme. \u00a1En esta gu\u00eda para principiantes te explicamos c\u00f3mo crearlo!","rank_math_focus_keyword":"utilizar child theme","footnotes":""},"categories":[4747,14344],"tags":[5666],"class_list":["post-4198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-temas","tag-child-theme"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/child-theme-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/theme-enfant-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/utilizar-child-theme","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-child-theme-wordpress","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/how-to-create-wordpress-child-theme\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/utilizar-child-theme","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/utilizar-child-theme","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/utilizar-child-theme","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/child-theme-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-wordpress-child-theme","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-wordpress-child-theme","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/4198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=4198"}],"version-history":[{"count":16,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/4198\/revisions"}],"predecessor-version":[{"id":40903,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/4198\/revisions\/40903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media\/18775"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=4198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=4198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=4198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}