Cualquier parecido o similitud con otras entradas de este tipo es mera casualidad. Te lo aseguro.<\/code><\/p>\n\n\n\nUn \u00abtema hijo\u00bb en WordPress ? Es un tema que hereda la funcionalidad de otro tema, llamado \u00abtema padre\u00bb. Los temas hijos permiten modificar o a\u00f1adir las funcionalidades del tema padre. <\/p>\n\n\n\n\n\n\n\n
Un tema hijo es la forma m\u00e1s segura y f\u00e1cil de modificar un tema existente, tanto si se quiere hacer peque\u00f1os cambios como otros m\u00e1s amplios. En lugar de modificar los archivos del tema directamente, es posible crear un tema hijo y hacerlo prevalecer sobre el tema padre.<\/p>\n\n\n\n
Si llevas tiempo trabajando con WordPress, probablemente habr\u00e1s escuchado hablar del tema hijo o child theme<\/em>. <\/p>\n\n\n\nEstoy segura de que te gusta la plantilla que est\u00e1s utilizando en tu web (y por eso trabajas con ella) pero quiz\u00e1 no cumple al 100% todas tus necesidades. Es normal, los temas premium<\/em> y gratuitos cubren los requisitos generales de los usuarios, pero en muchas ocasiones el webmaster exige algo m\u00e1s.<\/p>\n\n\n\nSi t\u00fa eres uno de esos usuarios y quieres ampliar y extender las funcionalidades de tu theme sin perder los cambios con cada actualizaci\u00f3n, est\u00e1s en el post adecuado<\/strong>. Voy a ense\u00f1arte qu\u00e9 es un tema hijo, para qu\u00e9 sirve, c\u00f3mo se instala y c\u00f3mo se crea. \u00a1Sigue leyendo!<\/p>\n\n\n\nPOR QU\u00c9 CREAR UN TEMA HIJO EN WORDPRESS Y PARA QU\u00c9 SIRVE<\/strong><\/h2>\n\n\n\nComo te comentaba en la introducci\u00f3n de este art\u00edculo, a veces necesitas personalizar un poco m\u00e1s tu theme y no perder los cambios con cada actualizaci\u00f3n. Para explicarme mejor, voy a ponerte un ejemplo de un caso muy com\u00fan.<\/p>\n\n\n
\n![\"\"](\"https:\/\/xn--nicols-tta.es\/wp-content\/uploads\/2022\/09\/wordpress-multisite-1024x512.jpg\")
<\/figure>\n<\/div>\n\n\nImagina que quieres a\u00f1adir en el header de tu WordPress el c\u00f3digo de Google Analytics<\/a><\/strong>. Adem\u00e1s, no vas a utilizar ning\u00fan plugin solo para eso porque quieres ahorrarte lo m\u00e1ximo posible el consumo de recursos de tu hosting web<\/a><\/strong>. Lo vas a insertar directamente en la cabecera.<\/p>\n\n\n\nAbres header.php y lo pegas entre las etiquetas correspondientes o lo a\u00f1ades con una funci\u00f3n desde el functions.php del tema que est\u00e1 activo. Durante un tiempo, no ocurre nada. El tema se actualiza y t\u00fa sigues trabajando con normalidad. Un tiempo despu\u00e9s, entras al panel de Google Analytics y ves que faltan estad\u00edsticas de varios d\u00edas. \u00bfQu\u00e9 ha pasado?<\/p>\n\n\n\n
Muy simple: cuando un tema principal se actualiza, se sobreescriben sus archivos<\/strong>. Todas las modificaciones que realizas, se borran<\/strong>. Podr\u00edas crear un documento gu\u00eda con todos los cambios y a\u00f1adir el c\u00f3digo en cada archivo despu\u00e9s de cada actualizaci\u00f3n del theme, pero es engorroso, pierdes tiempo y no es viable. Para esto es para lo que se suele usar un child theme<\/em>.<\/p>\n\n\n\nUn tema hijo no se actualiza, no se sobrescribe. S\u00f3lo hereda las funcionalidades del tema padre. <\/strong>Puedes realizar 20.000 cambios y nunca los perder\u00e1s. Es la soluci\u00f3n id\u00f3nea para estos casos.<\/p>\n\n\n\nMi recomendaci\u00f3n es que crees un tema hijo desde el primer momento en que empieces a trabajar con tu web. Si en tu caso ya tienes un WordPress pero no lo has creado un tema hijo, \u00a1ahora es ese momento! Sigue leyendo porque te voy a ense\u00f1ar c\u00f3mo crear un tema hijo<\/strong> de varias maneras diferentes.<\/p>\n\n\n\nC\u00d3MO CREAR UN TEMA HIJO<\/h2>\n\n\n\n\n- <\/a>Crea una carpeta en tu carpeta de temas para albergar el tema hijo. La carpeta de temas est\u00e1 en wp-content\/themes. Debes nombrar la carpeta sin ning\u00fan espacio como parte del nombre, y es habitual usar el nombre del tema padre seguido de \u00ab-hijo\u00bb (o \u00ab-child\u00bb en ingl\u00e9s) adjunto a \u00e9l. Por ejemplo, si est\u00e1s haciendo un hijo del tema twentyfourteen, el nombre de tu carpeta deber\u00eda ser twentyfourteen-hijo (o bien, twentyfourteen-child).<\/li>\n\n\n\n
- En la carpeta del tema hijo, crea un archivo que se llame style.css. Este es el \u00fanico archivo requerido para hacer un tema hijo. La hoja de estilos debe empezar con las siguientes l\u00edneas:<\/li>\n<\/ul>\n\n\n\n
\/*\n Theme Name: Twenty Fourteen Child\n Theme URI: http:\/\/example.com\/twenty-fourteen-child\/\n Description: Twenty Fourteen Child Theme\n Author: John Doe\n Author URI: http:\/\/example.com\n Template: twentyfourteen\n Version: 1.0.0\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n Text Domain: twenty-fourteen-child\n*\/\n\/* =Aqu\u00ed empieza la personalizaci\u00f3n de tu tema\n-------------------------------------------------------------- *\/\n<\/pre>\n\n\n\n
Puedes cambiar cada una de estas l\u00edneas para customizar tu Theme<\/em>. Las l\u00edneas que s\u00f3lo requieren cambios son el nombre del Theme<\/em>, la Plantilla.<\/p>\n\n\n\nLa Plantilla es el nombre del directorio del Theme<\/em> principal. En este caso, el Theme<\/em> de los Parents<\/em> (Padres) es el Theme<\/em> Twenty Fourteen, por lo que la Plantilla es twentyfourteen, que es el nombre del directorio donde se encuentra el tema Twenty Fourteen. Si quieres hacer que un Child<\/em> de un Theme<\/em> con el nombre del directorio ejemplo-theme-nombre, entonces deber\u00edas usar Plantilla: ejemplo-theme-nombre.<\/p>\n\n\n\n@import no debe utilizarse para importar la hoja de estilos de los Parents<\/em> en el Theme<\/em> de los Child<\/em>. El m\u00e9todo correcto es utilizar wp_enqueue_style () para poner en cola la hoja de estilos de los Parents<\/em>, el uso de este c\u00f3digo en \u00abfunctions.php\u00bb a su Child<\/em> de Theme<\/em>. Tendr\u00e1s que crear un archivo functions.php en la carpeta ra\u00edz de su Child<\/em> el Theme<\/em> (Se trata de los dos \u00fanicos archivos necesarios para crear un Theme<\/em> Child<\/em>). Justo al comienzo, en la primera l\u00ednea, se debe a\u00f1adir una etiqueta de apertura de PHP. Todo otro c\u00f3digo estar\u00e1 despu\u00e9s de esta etiqueta de apertura de PHP.<\/p>\n\n\n\nARCHIVOS DE PLANTILLA<\/h2>\n\n\n\n
Si quieres cambiar algo m\u00e1s que la hoja de estilos, tu tema hijo puede sobrescribir cualquier archivo del tema padre: simplemente incluye un archivo del mismo nombre en la carpeta del tema hijo y sobrescribir\u00e1 el archivo equivalente en la carpeta del tema padre. Por ejemplo, si quieres cambiar el c\u00f3digo PHP para la cabecera (header), puedes incluir un header.php en la carpeta de tu tema hijo. De este modo, este archivo se usar\u00e1 en lugar del header.php del tema padre.<\/p>\n\n\n\n
Tambi\u00e9n puedes incluir en el tema hijo archivos que no est\u00e9n incluidos en el tema padre. Por ejemplo, puede que quieras crear una plantilla m\u00e1s espec\u00edfica que la que se encuentra en el tema padre, como una plantilla para una p\u00e1gina espec\u00edfica o categor\u00eda de archivo. Echa un vistazo a Template Hierarchy<\/a> para m\u00e1s informaci\u00f3n sobre c\u00f3mo WordPress decide qu\u00e9 plantilla usar.<\/p>\n\n\n\nUSO DE FUNCTIONS.PHP<\/h3>\n\n\n\n
A diferencia de style.css<\/em>, el functions.php<\/em> de un tema hijo no sobrescribe el tema padre. En lugar de eso, se carga en adici\u00f3n a functions.php<\/em> del tema padre<\/strong> (especificamente, se carga justo antes<\/em> del tema padre).<\/p>\n\n\n\nEn este sentido, el functions.php<\/em> de un tema hijo proporciona un m\u00e9todo inteligente y libre de problemas para modificar la funcionalidad del tema padre. Digamos que quieres agregar una funci\u00f3n PHP a tu tema. La forma m\u00e1s r\u00e1pida podr\u00eda ser abrir su archivo functions.php<\/em> y poner la funci\u00f3n ah\u00ed. Pero no es lo m\u00e1s inteligente: la pr\u00f3xima vez que tu tema se actualice, esa funci\u00f3n desaparecer\u00e1. Pero hay una forma alternativa que es la forma inteligente: puedes crear un tema hijo, a\u00f1adir un archivo functions.php<\/em> en \u00e9l y a\u00f1adir la funci\u00f3n en ese archivo. La funci\u00f3n har\u00e1 exactamente el mismo trabajo desde ah\u00ed, con la ventaja de que no ser\u00e1 afectada por pr\u00f3ximas actualizaciones del tema padre. No copies todo el contenido de functions.php del tema padre en functions.php del tema hijo.<\/p>\n\n\n\nLa estructura de functions.php<\/em> es simple: una etiqueta PHP de inicio, una etiqueta PHP de cerrar al final y, entre ellas, tus bits de PHP. En \u00e9l puedes poner tantas o tan pocas funciones como desees. El ejemplo de abajo muestra un archivo elemental functions.php<\/em> que hace una simple cosa: a\u00f1ade un enlace de favicon al elemento head<\/code> (cabecera) de las p\u00e1ginas HTML.<\/p>\n\n\n\n<?php \/\/Etiqueta PHP de inicio\n\n\/\/ Funcion a nuestro gusto que queramos incluir\nfunction favicon_link() {\n echo '<link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"\/favicon.ico\" \/>' . \"\\n\";\n}\nadd_action( 'wp_head', 'favicon_link' );\n\n?> \/\/Etiqueta PHP de cierre\n<\/pre>\n\n\n\nCONSEJO A DESARROLLADORES DE TEMAS. El hecho de que el functions.php<\/em> del tema hijo se cargue primero significa que puedes convertir las funciones de tu tema en conectables \u2014es decir, sustituirlas por el tema hijo\u2014 anunci\u00e1ndolas condicionalmente. Por ejemplo:<\/p>\n\n\n\nif ( ! function_exists( 'theme_special_nav' ) ) {\n function theme_special_nav() {\n \/\/ Hacer algo.\n }\n}\n<\/pre>\n\n\n\nEn este sentido, un tema hijo puede sustituir una funci\u00f3n PHP del padre simplemente llam\u00e1ndola de antemano.<\/p>\n\n\n\n
REFERENCIANDO \/ INCLUYENDO ARCHIVOS EN TU TEMA HIJO<\/h3>\n\n\n\n
Cuando necesites incluir archivos que residen dentro de la estructura de directorios de tu tema hijo, se utilizar\u00e1 get_stylesheet_directory (). Al ser sustituido el style.css<\/em> del tema padre por el style.css<\/em> de tu tema hijo y residir tu style.css<\/em> en la ra\u00edz del subdirectorio de tu tema hijo, get_stylesheet_directory () apunta al directorio de tu tema hijo (no al directorio del tema padre).<\/p>\n\n\n\nHe aqu\u00ed un ejemplo, utilizando require_once, que muestra c\u00f3mo se puede utilizar get_stylesheet_directory al hacer referencia a un archivo almacenado dentro de la estructura de directorios de tu tema hijo.<\/p>\n\n\n\n
require_once( get_stylesheet_directory() . '\/my_included_file.php' );\n<\/pre>\n\n\n\nOTRA INFORMACI\u00d3N \u00daTIL<\/h2>\n\n\n\nUSANDO FORMATOS DE POST<\/h3>\n\n\n\n
Un tema hijo hereda post formats<\/a> definidos por el tema padre. Pero cuando se crean temas hijos, tenga cuidado al usar add_theme_support(\u2018post-formats\u2019)<\/em> el cual sobreescribir\u00e1<\/strong> los formatos definidos por el tema padre, no los adicionar\u00e1.<\/p>\n\n\n\nSOPORTE RTL<\/h3>\n\n\n\n
Para agregar soporte a lenguajes RTL (Right-to-left, de derecha a izquierda), incluye el archivo rtl.css<\/strong> en tu tema hijo:<\/p>\n\n\n\n\/*\nTheme Name: Twenty Fourteen Child\nTemplate: twentyfourteen\n*\/\n\n@import url(\"..\/twentyfourteen\/rtl.css\");\n<\/pre>\n\n\n\nWordPress s\u00f3lo carga el archivo rtl.css si is_rtl()<\/a> es verdadero.<\/p>\n\n\n\nEs recomendable agregar el archivo rtl.css a tu tema hijo, incluso si el tema padre no lo tiene.<\/p>\n\n\n\n
INTERNACIONALIZACI\u00d3N<\/h3>\n\n\n\n
Temas Child, al igual que otras extensiones, se pueden preparar para ser traducido a otros idiomas mediante el uso de funciones de gettext. For an overview, please see I18n for WordPress Developers<\/a>. This section will address special considerations regarding internationalization of child themes.<\/p>\n\n\n\n\n- Start by adding a languages directory. Something like
my-theme\/languages\/<\/code> works rather well.<\/li>\n\n\n\n- Remember that your filenames have to be
fr_FR.po<\/code> & fr_FR.mo<\/code> (depending on your language) and not domain-fr_FR.xx<\/code> like the plugins do.<\/li>\n\n\n\n- Next, a textdomain needs to be loaded. load_child_theme_textdomain() can be used in functions.php during the after_setup_theme action. The following should illustrate:<\/li>\n<\/ul>\n\n\n\n
<?php\n\/**\n * Setup My Child Theme's textdomain.\n *\n * Declare textdomain for this child theme.\n * Translations can be filed in the \/languages\/ directory.\n *\/\nfunction my_child_theme_setup() {\n\tload_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '\/languages' );\n}\nadd_action( 'after_setup_theme', 'my_child_theme_setup' );\n?>\n<\/pre>\n\n\n\nAt this point, hardcoded strings in the child theme are ready to be prepared to be translated. Here is a simple example of echoing the phrase \u00abCode is Poetry\u00bb:<\/p>\n\n\n\n
<?php\n_e( 'Code is Poetry', 'my-child-theme' );\n?>\n<\/pre>\n\n\n\nThe text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme. In the event that a template file from the parent has been included, the textdomain should be changed from the one defined in the parent to the one defined by the child.<\/p>\n\n\n\n
OTRO EJEMPLO<\/h2>\n\n\n\nC\u00d3MO CREAR UN TEMA HIJO EN WORDPRESS<\/strong><\/h2>\n\n\n\nAhora que ya sabes qu\u00e9 es un child theme<\/strong> y para qu\u00e9 sirve, el siguiente paso es crearlo. Es importante que tengas acceso FTP<\/a><\/strong> a los archivos de tu sitio para poder hacerlo. Hay varias formas de crear un child theme: desde cero o con un plugin.<\/p>\n\n\n\nC\u00d3MO CREAR UN TEMA HIJO EN WORDPRESS DESDE CERO<\/strong><\/h3>\n\n\n\nC\u00f3mo crear un tema hijo desde cero<\/strong>: este es el m\u00e9todo que se utiliza normalmente. Accede por FTP<\/a><\/strong> o a trav\u00e9s del administrador de archivos a tu web. En la estructura de archivos de WordPress<\/a><\/strong> ver\u00e1s que hay una carpeta que se llama wp-content<\/em>. Ah\u00ed dentro se guardan los temas que tienes instalados (est\u00e9n o no activados). Decide para qu\u00e9 theme quieres crear un tema hijo. Lo normal es que sea del tema que tienes activo en este momento.<\/p>\n\n\n\nEn mi caso, voy a crear un tema hijo de Twenty Seventeen. Localiza la carpeta del tema dentro de <\/strong>wp-content\/themes<\/strong>. Ahora, crea una carpeta nueva<\/strong> (que es donde vas a meter los archivos) y n\u00f3mbrala de la siguiente forma: <\/strong>nombretheme<\/em><\/strong>-child<\/strong>, donde \u201cnombretheme<\/em>\u201d es el nombre de la carpeta del tema del que quieres crear el child theme<\/em>. <\/p>\n\n\n\n\nEl nombre de la carpeta de mi theme es \u201ctwentyseventeen\u201d, por lo que la carpeta que tengo que crear para el tema hijo ser\u00e1: twentyseventeen-child. Pero \u00a1ojo! no a\u00f1adas ning\u00fan espacio en blanco en el nombre<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n![\"Carpeta](\"https:\/\/i2.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/carpeta-child-theme.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\nSit\u00faate dentro de la carpeta<\/strong> que acabas de generar y crea un archivo nuevo que se llame<\/strong> style.css<\/strong>. M\u00e1s adelante te contar\u00e9 qu\u00e9 hace y para qu\u00e9 sirve style.css. Ahora me voy a centrar simplemente en indicarte c\u00f3mo lo tienes que rellenar para que funcione tu child theme<\/em>. style.css debe contener una cabecera especial, as\u00ed que ed\u00edtalo y a\u00f1ade el siguiente c\u00f3digo<\/strong>: \/* Theme Name: Twenty Seventeen Child Theme URI: http:\/\/raiolanetworks.es Description: Twenty Seventeen Child Theme Author: Angela Author URI: http:\/\/raiolanetworks.es Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: twenty-seventeen-child *\/<\/p>\n\n\n\n
![\"Nombre](\"https:\/\/i1.wp.com\/serv3.raiolanetworks.es\/blog\/wp-content\/uploads\/theme-name-child-theme.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Descripci\u00f3n](\"https:\/\/i0.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/detalles-child-theme.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Listar](\"https:\/\/i2.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/listar-child-theme.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Panel](\"https:\/\/i0.wp.com\/serv1.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-inicio.jpg?ssl=1\")
<\/figure>\n\n\n\n![\"Paso](\"https:\/\/i0.wp.com\/serv3.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-paso-1.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Paso](\"https:\/\/i1.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-paso-2.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Paso](\"https:\/\/i1.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-paso-3.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Paso](\"https:\/\/i1.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-paso-4.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n![\"Paso](\"https:\/\/i2.wp.com\/serv2.raiolanetworks.es\/blog\/wp-content\/uploads\/child-theme-configurator-paso-5.jpg?ssl=1\" "\\"Child")
<\/figure>\n\n\n\n