{"id":1656,"date":"2019-11-17T18:02:19","date_gmt":"2019-11-17T22:02:19","guid":{"rendered":"https:\/\/tecnojupiter.net\/?p=1656"},"modified":"2023-04-24T10:24:23","modified_gmt":"2023-04-24T14:24:23","slug":"personaliza-tu-tema-wordpress-child-theme","status":"publish","type":"post","link":"https:\/\/tecnojupiter.test\/personaliza-tu-tema-wordpress-child-theme\/","title":{"rendered":"Personaliza tu tema WordPress sin perder los cambios"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"1280\" height=\"720\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2019\/11\/child_theme_wordpress.png\" alt=\"personaliza tu tema wordpress de manera segura sin perder los cambios que hagas\" class=\"wp-image-1660\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2019\/11\/child_theme_wordpress.png 1280w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2019\/11\/child_theme_wordpress-800x450.png 800w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2019\/11\/child_theme_wordpress-384x216.png 384w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Los temas WordPress son geniales, pero todos en alg\u00fan momento nos aburrimos del dise\u00f1o del tema WordPress que estemos usando o simplemente queremos a\u00f1adir un color, un tama\u00f1o de fuente diferente o agregar una nueva funcionalidad al tema.<\/p>\n\n\n\n<p>El problema es que modificar los archivos de un tema \u00abprincipal\u00bb, como ejemplo <strong>(style.css o header.php)<\/strong> aunque sea un poco, le funcionara por un tiempo, pero cuando este disponible una nueva versi\u00f3n del tema que est\u00e9s usando y procedes actualizarlo no ser\u00e1 una buena idea.<\/p>\n\n\n\n<p><strong>\u00bfPor qu\u00e9?<\/strong>  porque cualquier cambio personalizado que haya realizado en el c\u00f3digo de su tema se sobrescribir\u00e1 y se reemplazar\u00e1 con la nueva versi\u00f3n del tema.<\/p>\n\n\n\n<p>Es por ello, que en este articulo te hablare sobre una manera correcta de personalizar tu tema WordPress sin perder los cambios que hagas cuando realices una actualizaci\u00f3n del tema o plantilla principal.<\/p>\n\n\n\n<p>Debes utilizar un tema hijo incluso si planea modificar un solo car\u00e1cter del tema principal cuyo funcionalidad no existe.<\/p>\n\n\n\n<p>Antes de ir al trasfondo del asunto aclaremos qu\u00e9 es un tema hijo y por qu\u00e9 es recomendable usar uno.<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">&Iacute;ndice de contenido<\/p><ul class=\"toc_list\"><li><a href=\"#que_es_un_tema_hijo_o_child_theme_en_wordpress\">Qu\u00e9 es un Tema Hijo o Child Theme en WordPress<\/a><\/li><li><a href=\"#por_que_es_recomendable_usar_un_tema_hijo_child_theme_wordpress\">Por qu\u00e9 es recomendable usar un tema hijo (Child Theme) WordPress<\/a><\/li><li><a href=\"#como_crear_un_child_theme_en_wordpress\">C\u00f3mo crear un Child theme en WordPress<\/a><ul><li><a href=\"#metodo_1_instalando_un_plugin_del_repositorio_de_wordpressnbsp\">M\u00e9todo 1: Instalando un plugin del repositorio de WordPress&nbsp;<\/a><\/li><li><a href=\"#metodo_2_creando_manualmente_el_directorio_y_los_archivos_para_el_child_theme\">M\u00e9todo 2: Creando manualmente el directorio y los archivos para el Child Theme<\/a><ul><li><a href=\"#lo_que_necesitaras_para_crear_tu_child_theme_manualmente\">Lo que necesitar\u00e1s para crear tu child theme manualmente<\/a><\/li><li><a href=\"#los_pasos_que_debes_seguir_para_crear_tu_child_theme_de_forma_manual\">Los pasos que debes seguir para crear tu child theme de forma manual<\/a><\/li><li><a href=\"#crear_la_carpeta_para_el_tema_hijo_child_theme\">Crear la carpeta para el tema hijo (Child Theme)<\/a><\/li><li><a href=\"#crea_el_archivo_stylecss\">Crea el archivo style.css<\/a><\/li><li><a href=\"#crea_el_archivo_functionsphp_para_el_child_theme\">Crea el archivo functions.php para el Child Theme<\/a><\/li><li><a href=\"#viste_el_tercer_archivo_dentro_de_la_carpeta\">\u00bfViste el tercer archivo dentro de la carpeta?<\/a><\/li><\/ul><\/li><li><a href=\"#estructura_de_un_child_theme_o_tema_de_wordpress\">Estructura de un child theme o tema de WordPress<\/a><\/li><\/ul><\/li><li><a href=\"#quiero_modificar_otros_archivos_del_tema_padre_aparte_de_stylecss_y_functionsphp\">Quiero modificar otros archivos del tema padre aparte de style.css y functions.php<\/a><\/li><li><a href=\"#activa_tu_tema_wordpress_child_theme\">Activa tu tema WordPress (Child Theme)<\/a><\/li><li><a href=\"#conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"que_es_un_tema_hijo_o_child_theme_en_wordpress\">Qu\u00e9 es un Tema Hijo o Child Theme en WordPress<\/span><\/h2>\n\n\n\n<p>Tema secundario, tema hijo o child theme como se le conoce en el idioma ingl\u00e9s. Es un tema separado que hereda las funciones y apariencia del tema padre (tema principal). <\/p>\n\n\n\n<p>Cuyo objetivo es permitirte a\u00f1adir c\u00f3digo personalizado en cualquier parte del tema sin que estas personalizaciones se sobrescriban o pierdan tras actualizar el tema principal a una nueva versi\u00f3n, preservando as\u00ed el aspecto y la funcionalidad de su tema.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Un tema hijo (<strong>Child Theme<\/strong>) es un nuevo tema con la caracter\u00edstica que le permite actualizar el tema padre sin que las personalizaciones que ha realizado en su sitio se vean afectadas. <\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"por_que_es_recomendable_usar_un_tema_hijo_child_theme_wordpress\">Por qu\u00e9 es recomendable usar un tema hijo (Child Theme) WordPress  <\/span><\/h2>\n\n\n\n<p>Si eres desarrollador web o cualquiera que sepa algo sobre WordPress recomienda el uso de un tema hijo, si usted es el t\u00edpico usuario que ha menudo le gusta jugar con el dise\u00f1o o las funciones de su tema WordPress constantemente.<\/p>\n\n\n\n<p>El temas hijo le permitir\u00e1 agregar c\u00f3digo personalizado para un tema de WordPress y al mismo tiempo proteger que el c\u00f3digo personalizado no se sobrescriba la pr\u00f3xima vez que el tema principal o tema padre se actualiza.&nbsp;<\/p>\n\n\n\n<p>Si no utiliza un tema hijo, pero en su lugar modifica los archivos del tema padre directamente, entonces como mencione al principio la pr\u00f3xima vez que actualice el tema todos los cambios que haya hecho se perder\u00e1n. <\/p>\n\n\n\n<p>Lo que lo deja en la desafortunada situaci\u00f3n de elegir entre rehacer todos los cambios de sus archivos cada vez que este disponible una actualizaci\u00f3n, que seg\u00fan el autor del tema, podr\u00edan ser muchas veces al a\u00f1o. <\/p>\n\n\n\n<p>O asegurarse de que usted y sus clientes nunca actualicen el tema de WordPres en absoluto.<\/p>\n\n\n\n<p>De manera que ninguna de esas opciones son buenas, obviamente. <\/p>\n\n\n\n<p>En este mundo tecnol\u00f3gico usted necesita eficiencia y debe poder actualizar sus temas para corregir un posible \u00abbug\u00bb y obtener un rendimiento \u00f3ptimo. <\/p>\n\n\n\n<p><strong>Pero afortunadamente, tiene una tercera opci\u00f3n: crear un tema hijo de WordPress. <\/strong><\/p>\n\n\n\n<p>\u00a1Entonces se resuelven todos sus problemas y los problemas anteriores se pueden esquivar de manera f\u00e1cil y segura!<\/p>\n\n\n\n<p>Ok, saltemos a c\u00f3mo crear ese tema hijo (Child Theme).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"como_crear_un_child_theme_en_wordpress\">C\u00f3mo crear un Child theme en WordPress<\/span><\/h2>\n\n\n\n<p>Hay dos m\u00e9todos para crear un child theme o tema hijo y no necesitas convertirte en un experto en desarrollo web para hacerlo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"metodo_1_instalando_un_plugin_del_repositorio_de_wordpressnbsp\">M\u00e9todo 1: Instalando un plugin del repositorio de WordPress&nbsp;<\/span><\/h3>\n\n\n\n<p>Es la manera intuitiva y f\u00e1cil para los que no quieren lidiar con tener que iniciar sesi\u00f3n en el panel de administraci\u00f3n de su hosting o usar alg\u00fan programa FTP para subir los archivos necesarios.<\/p>\n\n\n\n<p>En fin, mediante un plugin puedes crear un child theme. <\/p>\n\n\n\n<p>Existen varios en el repositorio de WordPress he probado unos cuantos y en este post te recomiendo solo a Child Theme Configurator.<\/p>\n\n\n\n<p>Creo que no es necesario decirte como loguearte en tu panel de administraci\u00f3n WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"1422\" height=\"403\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/buscar_plugins_wordpress_cm4b1g.png\" alt=\"Plugin Child Theme Configurator\" class=\"wp-image-1662\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/buscar_plugins_wordpress_cm4b1g.png 1422w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/buscar_plugins_wordpress_cm4b1g-600x170.png 600w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/buscar_plugins_wordpress_cm4b1g-300x85.png 300w\" sizes=\"(max-width: 1422px) 100vw, 1422px\" \/><\/figure>\n\n\n\n<p>Una vez que lo hayas hecho el siguiente paso como se muestra en la imagen es buscar el plugins <strong>Child Theme Configurator<\/strong>&nbsp;luego clic en&nbsp;<strong>Instalar ahora<\/strong> y&nbsp;<strong>Activar<\/strong> el complemento al finalizar. <\/p>\n\n\n\n<p>Ahora para <strong>crear el tema hijo<\/strong> debes hacer clic en la nueva Sub-secci\u00f3n que creo el complemento <strong>Child Theme Configurator<\/strong> la ruta es <strong>Herramientas&nbsp;&gt; Child themes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"1410\" height=\"637\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Child_Theme_Configurator_tvhm4q.png\" alt=\"Dashboard Plugin Child Theme Configurator\" class=\"wp-image-1663\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Child_Theme_Configurator_tvhm4q.png 1410w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Child_Theme_Configurator_tvhm4q-600x271.png 600w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/Child_Theme_Configurator_tvhm4q-300x136.png 300w\" sizes=\"(max-width: 1410px) 100vw, 1410px\" \/><\/figure>\n\n\n\n<p>Como podr\u00e1s darte cuenta cuando est\u00e9s en tu panel de administraci\u00f3n el plugin te guiar\u00e1 con un paso a paso.  <\/p>\n\n\n\n<p>Sin embargo te describir\u00e9 brevemente lo que debes hacer para crear el tema hijo. <\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}@media all and (max-width: 1024px){.wp-block-kadence-iconlist.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list{grid-row-gap:5px;}}@media all and (max-width: 767px){.wp-block-kadence-iconlist.kt-svg-icon-list-items_e9c28f-22 ul.kt-svg-icon-list{grid-row-gap:5px;}}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_e9c28f-22 kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\">\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_aa1967-c5\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Primero, selecciona la opci\u00f3n\u00a0<strong>CREATE a new Child Theme<\/strong><\/span><\/li>\n\n\n\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_dd23b3-e2\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Segundo, en el apartado\u00a0<strong>Select a Parent Theme<\/strong>\u00a0selecciona el tema padre (tema principal), en este ejemplo he usado:\u00a0Twenty Sixteen.<\/span><\/li>\n\n\n\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_528f29-79\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Tercero, haz clic en el bot\u00f3n\u00a0<strong>Analyze<\/strong>\u00a0para determinar las dependencias de la hoja de estilo y otros problemas potenciales.<\/span><\/li>\n\n\n\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_1e68b2-a0\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Cuarto, si el chequeo ha salido bien te desplazas hasta el final en el paso 9 y haces clic en bot\u00f3n azul\u00a0<strong>Create New Child Theme<\/strong>.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p>Esperas unos segundos y cuando el plugin haya terminado te mostrara este mensaje en la parte superior del panel:<\/p>\n\n\n<style>.wp-block-kadence-iconlist.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list:not(.this-prevents-issues):not(.this-stops-third-party-issues):not(.tijsloc){margin-top:0px;margin-right:0px;margin-bottom:var(--global-kb-spacing-sm, 1.5rem);margin-left:0px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list{grid-row-gap:5px;}.wp-block-kadence-iconlist.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single{margin-right:10px;}.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list .kt-svg-icon-list-level-0 .kt-svg-icon-list-single svg{font-size:20px;}@media all and (max-width: 1024px){.wp-block-kadence-iconlist.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list{grid-row-gap:5px;}}@media all and (max-width: 767px){.wp-block-kadence-iconlist.kt-svg-icon-list-items_0a1806-bf ul.kt-svg-icon-list{grid-row-gap:5px;}}<\/style>\n<div class=\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_0a1806-bf kt-svg-icon-list-columns-1 alignnone\"><ul class=\"kt-svg-icon-list\">\n<li class=\"wp-block-kadence-listitem kt-svg-icon-list-item-wrap kt-svg-icon-list-item-_9b23c9-d4\"><span class=\"kb-svg-icon-wrap kb-svg-icon-fe_checkCircle kt-svg-icon-list-single\"><svg viewBox=\"0 0 24 24\"  fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg><\/span><span class=\"kt-svg-icon-list-text\">Child Theme Twenty Sixteen Child has been generated successfully.<\/span><\/li>\n<\/ul><\/div>\n\n\n\n<p>Esto quiere decir que el tema hijo se ha creado exitosamente y para comprobarlo te ubicas en <strong>Apariencia &gt; Temas<\/strong> <\/p>\n\n\n\n<p>Y debe estar all\u00ed este tendr\u00e1 la misma imagen destacada que el tema padre, luego solo te queda activar el tema hijo.<\/p>\n\n\n\n<p>Te preguntaras y las <strong>opciones que van desde la 4 hasta el 8<\/strong>, bueno puedes dejarlas por defecto, luego puedes echarle un ojo a todas esas opciones.<\/p>\n\n\n\n<p>Listo ya tienes tu tema hijo creado ya puedes desactivar o eliminar el plugin, ya que no es necesario para el funcionamiento del tema hijo (Child Theme). <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"metodo_2_creando_manualmente_el_directorio_y_los_archivos_para_el_child_theme\">M\u00e9todo 2: Creando manualmente el directorio y los archivos para el Child Theme<\/span><\/h3>\n\n\n\n<p>Si has estado siguiendo mis publicaciones este es mi m\u00e9todo preferido sin utilizar ning\u00fan plugins. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"lo_que_necesitaras_para_crear_tu_child_theme_manualmente\">Lo que necesitar\u00e1s para crear tu child theme manualmente<\/span><\/h4>\n\n\n\n<ul>\n<li>Acceso a los archivos de su sitio a trav\u00e9s de FTP o desde el gestor de archivos que le proporciona su proveedor de alojamiento web com\u00fanmente usan cPanel o DirectAdmin.<\/li>\n\n\n\n<li>Un editor de c\u00f3digo o editor de texto.<\/li>\n<\/ul>\n\n\n\n<p>Estoy usando&nbsp;<strong>Visual Studio Code<\/strong>, que me da la funcionalidad de edici\u00f3n de c\u00f3digo y a\u00f1adiendo una peque\u00f1a extensi\u00f3n FTP obtengo todo en un solo lugar, pero podr\u00eda usar cualquier editor de c\u00f3digo o texto junto con un cliente FTP gratuito como&nbsp;<a href=\"https:\/\/winscp.net\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">WinSCP<\/a> o el gran conocido FileZilla.<\/p>\n\n\n\n<p>Si no ha creado ni subido un archivo a su hosting antes, no se preocupe.&nbsp;Es mucho m\u00e1s simple de lo que piensas.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"los_pasos_que_debes_seguir_para_crear_tu_child_theme_de_forma_manual\">Los pasos que debes seguir para crear tu child theme de forma manual<\/span><\/h4>\n\n\n\n<p>Para crear este tema hijo, deber\u00e1 seguir cinco pasos:<\/p>\n\n\n\n<ol>\n<li>Crear la carpeta para el tema hijo en el directorio <strong>wp-content\/themes<\/strong>.<\/li>\n\n\n\n<li>Crear la hoja de estilos <strong>style.css<\/strong><\/li>\n\n\n\n<li>Crear el archivo <strong>functions.php<\/strong><\/li>\n\n\n\n<li><strong>Subir la carpeta<\/strong> con los ficheros creados al alojamiento web.<\/li>\n\n\n\n<li><strong>Activar el tema<\/strong> wordpress \u00abtema hijo\u00bb.<\/li>\n<\/ol>\n\n\n\n<p>As\u00ed que vamos a ir a trav\u00e9s de los pasos en detalle. Para este ejemplo, voy a crear un tema hijo para la plantilla que estoy usando.     <\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>\u00a1Entonces empecemos!<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"crear_la_carpeta_para_el_tema_hijo_child_theme\">Crear la carpeta para el tema hijo (Child Theme)<\/span><\/h4>\n\n\n\n<p>En primer lugar, como mencione anteriormente un Child Theme es un nuevo tema para WordPress. <\/p>\n\n\n\n<p>As\u00ed que este necesita una carpeta propia dentro de <strong>wp-content\/themes<\/strong> donde estar\u00e1n incluidos los dos archivos principales para que el tema funcione correctamente. <\/p>\n\n\n\n<p>Para este ejemplo voy a crear un tema hijo para mi plantilla <strong>tecnojupiter<\/strong>, y por supuesto para ser m\u00e1s eficiente creare los archivos necesarios en mi entorno de desarrollo local y luego los subir\u00e9 al hosting v\u00eda FTP. <\/p>\n\n\n\n<p>Si no tienes experiencia usando un programa FTP no te preocupes puedes crear o subir la carpeta desde el gestor de archivos que te proporciona tu proveedor de alojamiento web.<\/p>\n\n\n\n<p>Dicho lo anterior, <strong>crea una carpeta a dentro del directorio&nbsp;wp-content\/themes<\/strong>&nbsp;con el nombre que usted quiera. <\/p>\n\n\n\n<p>Para mayor claridad voy a nombrar mi tema <strong>tecnojupiter-child<\/strong>, a\u00f1adiendo el<strong> sufijo -child<\/strong> y usando el mismo nombre del tema padre. <\/p>\n\n\n\n<p>Esto me permite identificarlo f\u00e1cilmente y saber que temas dependen de otros, ya que tengo varios temas en la carpeta. <\/p>\n\n\n<div class=\"wp-block-image \"wp-caption-text\" wp-image-1666 size-full\">\n<figure class=\"aligncenter is-resized &quot;wp-caption-text&quot;\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/folder-child-theme_y81vca.png\" alt=\"Carpeta creada en entorno local\" class=\"wp-image-1666\" width=\"522\" height=\"153\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/folder-child-theme_y81vca.png 522w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/folder-child-theme_y81vca-300x88.png 300w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><figcaption class=\"wp-element-caption\">Carpeta creada entorno Local OS Windows<\/figcaption><\/figure><\/div>\n\n\n<div class=\"wp-block-easyblock-note-warning\">Importante: el nombre de la carpeta siempre en min\u00fasculas y no debe contener espacios.<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"crea_el_archivo_stylecss\">Crea el archivo style.css<\/span><\/h4>\n\n\n\n<p>Ahora el siguiente paso es crear un nuevo archivo, para ello usa el editor de c\u00f3digo de tu preferencia o desde panel de Administrador de Archivos de tu alojamiento web cr\u00e9alo y gu\u00e1rdalo con el nombre<strong>&nbsp;style.css<\/strong> como se muestra en siguiente gif. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"714\" height=\"463\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/new_file_style_css_onndjo.gif\" alt=\"creacion de archivo styles.css para child theme\" class=\"wp-image-1667\"\/><\/figure>\n\n\n\n<p>En el archivo que acabas de crear Copia y Pega lo siguiente:  <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\nTheme Name: Nombre del tema hijo\nTheme URI: https:\/\/tudominio.com\nTemplate: Nombre del tema padre\nDescription: Mi primer tema hijo...\nAuthor: Nombre del creador\nAuthor URI: http:\/\/dominio-del-autor.com\nVersion: 1.0\nText Domain: nombre-del-tema-hijo\n*\/\n\n\/* Debajo de esta l\u00ednea escribe tu personalizaci\u00f3n css *\/<\/code><\/pre>\n\n\n\n<p>Los dos elementos necesarios en el c\u00f3digo de arriba son las l\u00edneas que comienzan con \u00ab<strong>Theme Name<\/strong>\u00bb y \u00ab<strong>Template<\/strong>\u00bb debes respetar estas lineas. <\/p>\n\n\n\n<p><strong>Template<\/strong> &#8211; En esta linea debe<strong> colocar el nombre exacto de la carpeta correspondiente al tema padre<\/strong>, esto le dice a WordPress que tema se debe considerar como el tema principal. <\/p>\n\n\n\n<p><strong>Theme Name<\/strong> &#8211;  Esta linea le dice a WordPress <strong>cu\u00e1l es el nombre de su tema hijo<\/strong>, y esto se muestra en el selector de temas que sirve para identificarlo. <\/p>\n\n\n\n<p><strong>Los dem\u00e1s valores son auto-explicativos<\/strong> y puedes sustituir los que he colocado por otros m\u00e1s conveniente para tu tema, con la excepci\u00f3n de <strong>Text Domain<\/strong> que se utiliza para la traducci\u00f3n de cadenas.&nbsp;<\/p>\n\n\n\n<p>El <strong>Text Domain<\/strong> debe ser \u00fanico para el tema y debe ser utilizado siempre que utilices&nbsp;la funci\u00f3n de traducci\u00f3n.<\/p>\n\n\n\n<p>Cuando ya hayas sustituido los valores <strong>guarda el archivo style.css<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"crea_el_archivo_functionsphp_para_el_child_theme\">Crea el archivo functions.php para el Child Theme<\/span><\/h4>\n\n\n\n<p>Ya sea que uses Notepad++, Visual Studio Code, etc\u00e9tera usando el mismo editor de c\u00f3digo y siguiendo el mismo ejemplo del gif anterior, crea un nuevo archivo con el nombre <strong>functions.php<\/strong> y en el agrega el siguiente c\u00f3digo. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php \nif ( !function_exists( 'my_theme_enqueue_styles_css' ) ):\nfunction my_theme_enqueue_styles_css() {\n    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles_css' );\n}\n\/* Debajo de esta linea puedes a\u00f1adir m\u00e1s acciones y filtros adicionales para tu functions.php *\/<\/code><\/pre>\n\n\n\n<p>Si usted no tiene ninguna idea sobre el <strong>lenguaje de programaci\u00f3n PHP<\/strong> y solo desea cambiar algunos estilos, no te preocupes acerca de por qu\u00e9 esto funciona.&nbsp; <\/p>\n\n\n\n<p>En otras palabras (t\u00e9rminos) el c\u00f3digo anterior carga la hoja de estilos del tema padre para evitar que se rompa el dise\u00f1o de tu web y es el m\u00e9todo recomendado por la comunidad de WordPress.<\/p>\n\n\n\n<p>El c\u00f3digo anterior supone que el tema principal solo tiene una hoja de estilo; Si el tuyo tiene varias hojas de estilo, tendr\u00e1s que poner en cola cada una de ellas.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"viste_el_tercer_archivo_dentro_de_la_carpeta\">\u00bfViste el tercer archivo dentro de la carpeta?<\/span><\/h4>\n\n\n\n<p>Hay un tercer archivo que inclu\u00ed dentro de la carpeta para el tema, es una imagen con el nombre <strong>screenshot.png<\/strong> esta sirve para representar el tema cuando lo visualice desde <strong>Apariencia<\/strong> &gt; <strong>Temas<\/strong>.<\/p>\n\n\n\n<p>Incluir la imagen es completamente opcional, pero para ilustrar mejor si no incluyera esa imagen el tema child desde el selector de temas se mostrar\u00eda como la siguiente imagen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"1439\" height=\"722\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/select_tema_wordpress_wcwfov.png\" alt=\"vista selector de tema wordpress\" class=\"wp-image-1670\" srcset=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/select_tema_wordpress_wcwfov.png 1439w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/select_tema_wordpress_wcwfov-600x301.png 600w, https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/select_tema_wordpress_wcwfov-300x151.png 300w\" sizes=\"(max-width: 1439px) 100vw, 1439px\" \/><\/figure>\n\n\n\n<p>Se ve poco profesional y llamativo \u00bfverdad? <\/p>\n\n\n\n<p>Esta imagen destacada puede ser la misma imagen del tema padre o puedes crear una desde alg\u00fan programa editor de gr\u00e1ficos como Inkscape o Photoshop con las dimensiones 1200&#215;900 y guardarla con el nombre <strong>screenshot<\/strong> en formato<strong> png<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"estructura_de_un_child_theme_o_tema_de_wordpress\">Estructura de un child theme o tema de WordPress <\/span><\/h3>\n\n\n\n<p>La estructura de un tema hijo consta b\u00e1sicamente de la carpeta creada con el nombre que hayas elegido y a dentro de ella los dos archivos necesarios <strong>(style.css y functions.php)<\/strong> para que el tema funcione correctamente. <\/p>\n\n\n\n<p>Y como extra ya que se trata de un tema WordPress puedes a\u00f1adirle su respectiva imagen representativa <strong>screenshot.php<\/strong> de modo esquem\u00e1tico aqu\u00ed tienes otro ejemplo ilustrativo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"low\" decoding=\"async\" loading=\"lazy\" width=\"300\" height=\"300\" src=\"https:\/\/tecnojupiter.test\/wp-content\/uploads\/2020\/04\/estructura-tema-hijo-carpeta-themes-wordpress_umzbuf.png\" alt=\"estructura carpeta tema wordpress\" class=\"wp-image-1661\"\/><\/figure><\/div>\n\n\n<p class=\"has-medium-font-size\"><strong>(Lee tambi\u00e9n<\/strong>: <a href=\"https:\/\/tecnojupiter.test\/seguridad-en-web-wordpress\/\">La seguridad en tu web es tan importante como el dise\u00f1o, en WordPress<\/a><strong>)<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"quiero_modificar_otros_archivos_del_tema_padre_aparte_de_stylecss_y_functionsphp\">Quiero modificar otros archivos del tema padre aparte de style.css y functions.php<\/span><\/h2>\n\n\n\n<p>Si desea extender a\u00fan m\u00e1s la funcionalidad de su tema padre, por ejemplo personalizar la plantilla<strong> comments.php<\/strong> o hacer cambios a la cabecera <strong>header.php<\/strong>, solo debes copiar el archivo del tema padre y pegarlo en la carpeta del tema hijo.<\/p>\n\n\n\n<p>Luego edita el archivo con tus modificaciones, lo guardas y listo as\u00ed de sencillo.<\/p>\n\n\n\n<p>Si el archivo que quieres modificar esta ubicado dentro de una o varias carpetas, debes crear la carpeta con el mismo nombre y pegar el fichero en tu child theme.<\/p>\n\n\n\n<p>Pongamos por caso, que quieres modificar un archivo que esta ubicado en <strong>&#8230;\/inc\/widgets\/social.php<\/strong> del tema padre. <\/p>\n\n\n\n<p>Bueno deber\u00e1s crear la carpeta <strong>inc<\/strong> y a dentro de ella la otra carpeta <strong>widgets<\/strong> y all\u00ed pegar el archivo <strong>social.php<\/strong> del tema padre.<\/p>\n\n\n\n<p>Seguro estar\u00e1s pensando porque perder el tiempo creando las carpetas si puedo copiar la carpeta <strong>inc<\/strong> directo desde el tema padre y estar\u00eda copiando las carpetas y el archivo al mismo tiempo. <\/p>\n\n\n\n<p>Bueno, no hay ning\u00fan problema en hacerlo y estar\u00eda bien. <\/p>\n\n\n\n<p>Pero el punto aqu\u00ed, que quiz\u00e1s no hayas tomado en cuenta es que pueden haber varias carpetas y varios archivos a dentro de la carpeta <strong>inc<\/strong> y t\u00fa solo quieres modificar es uno.<\/p>\n\n\n\n<p>Si lo haces de esa manera y luego de un tiempo quieres modificar algo m\u00e1s que esta a dentro de la carpeta <strong>inc<\/strong> del tema padre y luego vas a la ruta del tema hijo posiblemente hayas olvidado cual de los tantos ficheros fue el primero que modificaste. <\/p>\n\n\n\n<p>Y estoy seguro que no querr\u00e1s pasar horas comparando archivos para ver cu\u00e1l es diferente, entre otros aspectos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"activa_tu_tema_wordpress_child_theme\">Activa tu tema WordPress (Child Theme)<\/span><\/h2>\n\n\n\n<p>Una vez creado el child theme el siguiente paso es activarlo y lo hacemos como lo har\u00edamos con cualquier tema WordPress instalado, iniciamos sesi\u00f3n en nuestro panel de control.<\/p>\n\n\n\n<p>En el men\u00fa lateral pulsa sobre&nbsp;<strong>Apariencia &gt; Temas<\/strong>: <\/p>\n\n\n\n<p>Y deber\u00edas ver el tema hijo en la lista y listo para la activaci\u00f3n, selecci\u00f3nalo y luego haz clic en el bot\u00f3n&nbsp;<strong>Activar<\/strong>.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><strong>Listo tienes activado el tema hijo en tu WordPress.<\/strong>  <\/p>\n\n\n\n<div class=\"wp-block-easyblock-note-warning\">Importante: Despu\u00e9s de activar el tema hijo es posible que deba volver a guardar su men\u00fa de navegaci\u00f3n desde Apariencia > Men\u00fas.<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"conclusion\">Conclusi\u00f3n<\/span><\/h2>\n\n\n\n<p>Es la manera segura de realizar modificaciones si eres el tipo de usuario que necesita implementar funciones personalizadas al tema padre, escribir CSS personalizado, sin perder los cambios cuando actualizas el tema principal a una nueva versi\u00f3n disponible.<\/p>\n\n\n\n<p>No te sientas abrumado por crear un child theme de forma manual es m\u00e1s f\u00e1cil de lo que parece, siguiendo los pasos anteriores no creo que tengas ning\u00fan problema.<\/p>\n\n\n\n<p>\u00bfTienes algo que agregar? \u00bfYo me perd\u00ed de algo? \u00bfTienes alguna duda? No dudes en hac\u00e9rmelo saber en los comentarios a continuaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Los temas WordPress son geniales, pero todos en alg\u00fan momento nos aburrimos del dise\u00f1o del tema WordPress que estemos usando o simplemente queremos a\u00f1adir un color, un tama\u00f1o de fuente diferente o agregar una nueva funcionalidad al tema. El problema es que modificar los archivos de un tema \u00abprincipal\u00bb, como ejemplo (style.css o header.php) aunque&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1660,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[5],"tags":[100,99,102,18],"_links":{"self":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1656"}],"collection":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/comments?post=1656"}],"version-history":[{"count":1,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1656\/revisions"}],"predecessor-version":[{"id":2862,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/posts\/1656\/revisions\/2862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/media\/1660"}],"wp:attachment":[{"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/media?parent=1656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/categories?post=1656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnojupiter.test\/wp-json\/wp\/v2\/tags?post=1656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}