{"id":315,"date":"2017-10-31T19:12:24","date_gmt":"2017-10-31T22:12:24","guid":{"rendered":"http:\/\/blog.hostdime.com.ar\/?p=315"},"modified":"2026-04-27T10:12:15","modified_gmt":"2026-04-27T13:12:15","slug":"como-anadir-un-tema-hijo-en-wordpress","status":"publish","type":"post","link":"https:\/\/www.hostdime.com.ar\/blog\/como-anadir-un-tema-hijo-en-wordpress\/","title":{"rendered":"Como a\u00f1adir un tema hijo en WordPress"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Una de las caracter\u00edsticas m\u00e1s apreciadas de<\/span> <strong>WordPress<\/strong><span style=\"font-weight: 400;\">, son las plantillas (aka temas), que te permiten definir la est\u00e9tica y aspecto visual del sitio web.<\/span><!--more--><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Hay miles de temas a tu disposici\u00f3n, de diversos dise\u00f1os, mas o menos personalizables, gratuitos o de pago. Tambi\u00e9n est\u00e1n los temas oficiales de la serie <\/span><strong>Twenty<\/strong><span style=\"font-weight: 400;\">, gratuitos y b\u00e1sicos.&nbsp;<\/span><span style=\"font-weight: 400;\">Si eres inconformista como la gran mayor\u00eda de los webmasters, entre los que me incluyo, ninguno de los que encuentres ser\u00e1 el apropiado para tu proyecto, invariablemente vas a introducir modificaciones en el dise\u00f1o para adecuarlo a tu gusto o necesidades.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Colores, formas, anchos, alturas, tipos de letras,<strong> todo es personalizable si tienes conocimientos<\/strong> y a veces un poco de audacia en hojas de estilo css.&nbsp;<\/span><span style=\"font-weight: 400;\">Una vez que todo ha quedado seg\u00fan lo planeado, con el dise\u00f1o perfecto que estabas buscando, sucede lo impensado, se te ocurre actualizar el tema y entonces pierdes todos los cambios.<\/span><\/p>\n<h1 style=\"text-align: justify;\"><span style=\"font-weight: 400; color: #ff6600;\">\u00bfQu\u00e9 debo hacer para mantener los cambios?<\/span><\/h1>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Para evitar ese inconveniente hay un truco, del cual seguramente ya has escuchado hablar: <\/span><strong>El tema hijo. <\/strong><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Existen plugins (en wordpress siempre los hay para todo), que te permiten instalarlo en tu sitio web con facilidad y los puedes encontrar en el <\/span><a href=\"https:\/\/es.wordpress.org\/plugins\/search\/child+theme\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">repositorio de <\/span><b>wordpress.org<\/b><\/a><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Pero yo prefiero en lo posible evitar el uso de plugins, y en este caso desarrollar un tema hijo es muy sencillo. Aqu\u00ed te voy a explicar c\u00f3mo implementarlo para que puedas mantener el dise\u00f1o intacto, a pesar de las actualizaciones del tema principal.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo primero que har\u00e1s es crear una carpeta en tu directorio de temas de WordPress <\/span><strong>(wp-content\/themes<\/strong><span style=\"font-weight: 400;\"><strong>)<\/strong>, con el nombre del tema hijo que crearas.&nbsp;<\/span><span style=\"font-weight: 400;\">Por ejemplo; si est\u00e1s usando el tema<\/span> <strong>Suevafree<\/strong><span style=\"font-weight: 400;\">, puedes nombrar la carpeta como <\/span><strong>suevafree-child, sueva-hijo<\/strong><span style=\"font-weight: 400;\">, o el nombre que se te ocurra, siempre y cuando no te genere confusiones, en este ejemplo usamos la primera opci\u00f3n.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-323 size-full aligncenter\" src=\"https:\/\/www.hostdime.com.ar\/blog\/wp-content\/uploads\/2017\/10\/Carpeta-tema-hijo-en-Wordpress.jpg\" alt=\"Carpeta tema hijo en WordPress\" width=\"398\" height=\"189\"><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">En la carpeta colocar\u00e1s todos los archivos que necesites en sus respectivas rutas, recuerda que la estructura debe ser igual a la del tema padre.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-321 size-full\" src=\"https:\/\/www.hostdime.com.ar\/blog\/wp-content\/uploads\/2017\/10\/Estructura-tema-padre-Wordpress.jpg\" alt=\"Estructura tema padre, WordPress\" width=\"432\" height=\"230\"><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">La hoja de estilos css ( style.css), es el \u00fanico archivo requerido, para eso debe comenzar con las siguientes l\u00edneas:<\/span><\/p>\n<p><code><span style=\"color: #99cc00;\"><span style=\"font-weight: 400;\">\/*<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Theme Name: SuevaFree Hijo<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Theme URI: <\/span><a href=\"https:\/\/www.imagenesis.com.ar\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/www.imagenesis.com.ar<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/a><span style=\"font-weight: 400;\">Version: 1.0<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Description: Tema SuevaFree hijo para editar sin riesgos<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Author: Carlos Pablak<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Author URI: <\/span><a href=\"https:\/\/www.imagenesis.com.ar\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/www.imagenesis.com.ar<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/a><span style=\"font-weight: 400;\">Template: SuevaFree<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">*\/<\/span><\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><strong>@import url(\"..\/suevaferee\/style.css\")<wbr>;<\/strong><br \/>\n<\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">\/*----------------- Aqui comienza el c\u00f3digo -----------------------*\/<\/span><\/code><\/p>\n<p><code><span style=\"font-weight: 400;\">body {<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">&nbsp; &nbsp; &nbsp; &nbsp;<span style=\"color: #0000ff;\">line-height:<\/span><\/span><span style=\"font-weight: 400;\"> 1;<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">}<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">h1\u2026<\/span><\/code><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">La estructura del encabezado entre comentarios \/**\/, es la que le dar\u00e1 la identificaci\u00f3n al tema, lo dem\u00e1s no difiere de un hoja de estilos est\u00e1ndar, lo importante aqu\u00ed es que indica la ruta relativa de la hoja de estilos original del tema original. Esa es la clave para que el tema hijo funcione y se muestre correctamente en el escritorio de la plataforma.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-322 size-full\" src=\"https:\/\/www.hostdime.com.ar\/blog\/wp-content\/uploads\/2017\/10\/Como-an\u0303adir-un-tema-hijo-en-Wordpress-HostDime.jpg\" alt=\"Como an\u0303adir un tema hijo en WordPress, HostDime\" width=\"609\" height=\"342\"><\/p>\n<p>Espera&#8230; aqu\u00ed no acaba todo:&nbsp;<a href=\"http:\/\/blog.hostdime.com.pe\/desactivar-plugins-wordpress-como-porque-para-que-que-ganamos\/\" target=\"_blank\" rel=\"noopener\">Desactivar los plugins en WordPress, \u00bfC\u00f3mo? \u00bfPorqu\u00e9? \u00bfPara qu\u00e9? \u00bfQue ganamos?<\/a>, <a href=\"https:\/\/www.hostdime.com.ar\/blog\/cosas-que-debes-saber-sobre-el-archivo-robots-txt\/\" target=\"_blank\" rel=\"noopener\">Cosas que debes saber sobre el archivo robots.txt<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una de las caracter\u00edsticas m\u00e1s apreciadas de WordPress, son las plantillas (aka temas), que te permiten definir la est\u00e9tica y aspecto visual del sitio web.<\/p>\n","protected":false},"author":2,"featured_media":329,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,3],"tags":[],"class_list":["post-315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","category-tecnologia"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/www.hostdime.com.ar\/blog\/wp-content\/uploads\/2017\/10\/Como-an\u0303adir-un-tema-hijo-en-Wordpress.png","_links":{"self":[{"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/posts\/315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=315"}],"version-history":[{"count":1,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/posts\/315\/revisions"}],"predecessor-version":[{"id":1590,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/posts\/315\/revisions\/1590"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/media\/329"}],"wp:attachment":[{"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostdime.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}