{"id":7204,"date":"2019-01-31T11:02:34","date_gmt":"2019-01-31T11:02:34","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7204"},"modified":"2019-04-15T15:48:05","modified_gmt":"2019-04-15T15:48:05","slug":"como-crear-un-tema-hijo-en-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/","title":{"rendered":"C\u00f3mo crear un tema hijo en PrestaShop 1.7"},"content":{"rendered":"<p><strong>PrestaShop 1.7<\/strong> trae muchos cambios con respecto a las versiones anteriores relacionados principalmente con su aspecto. Una de las novedades m\u00e1s interesantes y evolutivas es la nueva forma para <strong>crear temas personalizados<\/strong>. Ahora se pueden usar los temas hijos de forma muy parecida a <strong>WordPress<\/strong> para extender el aspecto y comportamiento de otra plantilla.<\/p>\n<p>De este modo, no hace falta duplicar o crear un tema completo. Puedes heredar aspectos y\/o comportamientos del tema padre. En este punto recomiendo que el tema padre sea el tema \u201cclassic\u201d que trae por defecto <strong>PrestaShop<\/strong> ya que recibe actualizaciones peri\u00f3dicamente pero, en la pr\u00e1ctica puedes usar como padre cualquier otro tema que haya sido desarrollado para <strong>PrestaShop 1.7<\/strong>.<\/p>\n<p>Si tienes conocimientos sobre la base de <strong>PrestaShop<\/strong>, crear un tema hijo o subordinado te resultar\u00e1 muy f\u00e1cil.<\/p>\n<h2>Tema padre y estructura de archivos<\/h2>\n<p>En primer lugar debes tener localizado el tema que deseas usar como padre disponible en la carpeta de temas de la instalaci\u00f3n de tu tienda. En el caso del tema que vamos a crear usaremos como padre el tema \u00abclassic\u00bb que trae <strong>PrestaShop<\/strong> por defecto.<\/p>\n<p>A partir de ah\u00ed puedes crear una nueva carpeta con los archivos que representar\u00e1n el tema hijo. En el caso del ejemplo que vamos a ilustrar crearemos una\u00a0 nueva carpeta llamada \u201cmytheme\u201d con algunos directorios y archivos vac\u00edos. En nuestro tema hijo \u00abmytheme\u00bb tendremos la siguiente estructura:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7205\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura1.png\" alt=\"\" width=\"526\" height=\"208\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura1.png 526w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura1-300x119.png 300w\" sizes=\"auto, (max-width: 526px) 100vw, 526px\" \/><\/p>\n<h3>CSS y JavaScript del tema hijo<\/h3>\n<p>Dentro de la carpeta <em>assets<\/em> de tu tema debes agregar todos los archivos CSS y JavaScript que formar\u00e1n parte del tema hijo. Dentro de la carpeta <em>assets<\/em> debes crear una carpeta llamada <em>css<\/em> para los estilos y <em>js<\/em> para los archivos JavaScript. Si tienes dudas, en todo momento puedes revisar como est\u00e1 estructurado el tema \u00abclassic\u00bb de <strong>PrestaShop<\/strong>. La estructura de directorios y nombres de ficheros a sobrescribir deben ser con el mismo nombre y localizaci\u00f3n.<\/p>\n<p>Cuando creas un tema hijo es porque necesitas modificar algunos detalles del tema padre o incluso tambi\u00e9n puede ser ideal para crear un tema completo totalmente diferente al tema padre. Hacerlo con un tema hijo te ahorrar\u00e1 mucho tiempo. A partir de ahora todos los archivos que necesites modificar, los puedes sobrescribir si es necesario.<\/p>\n<p>Si necesitas modificar la hoja de estilos, lo ideal es sobrescribirlo en el tema hijo utilizando el archivo que trae por defecto vac\u00edo para los estilos propios:<\/p>\n<p>\/themes\/mytheme\/assets\/css\/custom.css<\/p>\n<p>El archivo custom.css est\u00e1 en el tema padre vac\u00edo. Lo podemos aprovechar para agregar nuestros estilos propios.<\/p>\n<p>Para diferenciar el tema hijo del tema padre vamos a agregar las siguientes l\u00edneas al archivo <em>custom.css<\/em> y as\u00ed identificarlo:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"css\" style=\"font-family:monospace;\"><span class=\"re0\">#wrapper<\/span> <span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">background-color<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">red<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En este caso, tan solo agregamos al tema hijo un color de fondo para el contenedor principal de la tienda.<\/p>\n<p>Para agregar nuevo c\u00f3digo <strong>JavaScript<\/strong> puedes sobrescribir el archivo que viene vac\u00edo en el padre:<\/p>\n<p>\/themes\/mytheme\/assets\/js\/custom.js<\/p>\n<h3>El archivo de configuraci\u00f3n del tema hijo<\/h3>\n<p>Dentro de la carpta <em>config<\/em> debe estar el archivo m\u00e1s importante y el que primero deber\u00e1s rellenar. Se trata del archivo de configuraci\u00f3n de la plantilla.<\/p>\n<p>El archivo de configuraci\u00f3n <em>theme.yml<\/em> que debe estar dentro del tema hijo es muy importante. En \u00e9l puedes indicar todos los detalles de la plantilla tales como layouts, posiciones de los m\u00f3dulos, formatos y tama\u00f1os de imagen, etc.<\/p>\n<p>Este debe estar situado en la siguiente ruta del tema hijo:<\/p>\n<p>\/themes\/mytheme\/config\/theme.yml<\/p>\n<p>En la primera parte de este archivo agregaremos:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"text\" style=\"font-family:monospace;\">parent: classic\nname: mytheme\ndisplay_name: JA Modules theme.\nversion: 1.0.0\nauthor:\n  name: &quot;Jose Aguilar&quot;\n  email: &quot;info@jamodules.com&quot;\n  url: &quot;http:\/\/www.jose-aguilar.com&quot;\n&nbsp;\nassets:\n  use_parent_assets: false<\/pre><\/div><\/div>\n<p>En este caso estamos indicando que el el nombre del tema es \u201cmytheme\u201d y su padre es el \u201cclassic\u201d y esto significa que \u201cmytheme\u201d hereda de \u201cclassic\u201d todo su aspecto y comportamiento. Puedes agregar un nombre para mostrar en el directorio de m\u00f3dulos, la versi\u00f3n y la informaci\u00f3n del autor.<\/p>\n<p>Despu\u00e9s de esto, en el mismo archivo de configuraci\u00f3n, puedes agregar m\u00e1s informaci\u00f3n tales como la compatibilidad, los tipos de plantilla disponibles, algunas configuraciones, m\u00f3dulos habilitados, posiciones de los m\u00f3dulos, tipos y tama\u00f1os de im\u00e1genes, etc.<\/p>\n<p>A continuaci\u00f3n el c\u00f3digo completo de la configuraci\u00f3n de nuestro tema \u00abmytheme\u00bb:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"text\" style=\"font-family:monospace;\">parent: classic\nname: mytheme\ndisplay_name: JA Modules theme.\nversion: 1.0.0\nauthor:\n  name: &quot;Jose Aguilar&quot;\n  email: &quot;info@jamodules.com&quot;\n  url: &quot;http:\/\/www.jose-aguilar.com&quot;\n&nbsp;\nassets:\n  use_parent_assets: false\n&nbsp;\nmeta:\n  compatibility:\n      from: 1.7.0.0\n      to: ~\n&nbsp;\n  available_layouts:\n    layout-full-width:\n      name: Full Width\n      description: No side columns, ideal for distraction-free pages such as product pages.\n    layout-both-columns:\n      name: Three Columns\n      description: One large central column and 2 side columns.\n    layout-left-column:\n      name: Two Columns, small left column\n      description: Two columns with a small left column\n    layout-right-column:\n      name: Two Columns, small right column\n      description: Two columns with a small right column\n&nbsp;\nglobal_settings:\n  configuration:\n    PS_IMAGE_QUALITY: png\n  modules:\n   to_enable:\n     - ps_linklist\n  hooks:\n    modules_to_hook:\n      displayNav1:\n        - ps_contactinfo\n      displayNav2:\n        - ps_languageselector\n        - ps_currencyselector\n        - ps_customersignin\n        - ps_shoppingcart\n      displayTop:\n        - ps_mainmenu\n        - ps_searchbar\n      displayHome:\n        - ps_imageslider\n        - ps_featuredproducts\n        - ps_banner\n        - ps_customtext\n      displayFooterBefore:\n        - ps_emailsubscription\n        - ps_socialfollow\n      displayFooter:\n        - ps_linklist\n        - ps_customeraccountlinks\n        - ps_contactinfo\n      displayLeftColumn:\n        - ps_categorytree\n        - ps_facetedsearch\n      displaySearch:\n        - ps_searchbar\n      displayProductAdditionalInfo:\n        - ps_sharebuttons\n      displayReassurance:\n        - blockreassurance\n      displayOrderConfirmation2:\n        - ps_featuredproducts\n      displayCrossSellingShoppingCart:\n        - ps_featuredproducts\n&nbsp;\n  image_types:\n    cart_default:\n      width: 125\n      height: 125\n      scope: [products]\n    small_default:\n      width: 98\n      height: 98\n      scope: [products, categories, manufacturers, suppliers]\n    medium_default:\n      width: 452\n      height: 452\n      scope: [products, manufacturers, suppliers]\n    home_default:\n      width: 250\n      height: 250\n      scope: [products]\n    large_default:\n      width: 800\n      height: 800\n      scope: [products, manufacturers, suppliers]\n    category_default:\n      width: 141\n      height: 180\n      scope: [categories]\n    stores_default:\n      width: 170\n      height: 115\n      scope: [stores]\n&nbsp;\ntheme_settings:\n  default_layout: layout-full-width\n  layouts:\n    category: layout-left-column\n    best-sales: layout-left-column\n    new-products: layout-left-column\n    prices-drop: layout-left-column\n    contact: layout-left-column<\/pre><\/div><\/div>\n<p>Toda esta informaci\u00f3n se puede copiar del tema \u201cclassic\u201d y modificarlo seg\u00fan las necesidades o deseos para el tema hijo.<\/p>\n<h3>Im\u00e1genes para el tema hijo<\/h3>\n<p>Dentro de la estructura de carpetas y ficheros del tema hijo tambi\u00e9n puedes incorporar una carpeta <em>img<\/em> para las im\u00e1genes del tema. Si necesitas agregar alguna imagen extra puedes usar un directorio de im\u00e1genes:<\/p>\n<p>\/themes\/mytheme\/img\/<\/p>\n<p>Por temas de rendimiento desaconsejo utilizar im\u00e1genes en la medida de lo posible. Cuantas menos im\u00e1genes use tu tema mucho mejor.<\/p>\n<h3>Plantillas de emails en el tema hijo<\/h3>\n<p>Si vas a hacer modificaciones en las plantillas de los emails, puedes crear la carpeta <em>mails<\/em> y agregar tus plantillas personalizadas. Siempre con el mismo nombre de archivo que utiliza <strong>PrestaShop<\/strong>. La ruta donde debes agregar tus plantillas ser\u00eda:<\/p>\n<p>\/themes\/mytheme\/mails\/<\/p>\n<h3>Plantillas de los m\u00f3dulos en el tema hijo<\/h3>\n<p>Si necesitas modificar visualmente alg\u00fan m\u00f3dulo en tu tema hijo tan solo debes mover los archivos de visualizaci\u00f3n del m\u00f3dulo a tu tema hijo justamente dentro de la carpeta:<\/p>\n<p>\/themes\/mytheme\/modules\/<\/p>\n<h3>Plantillas para las facturas en el tema hijo<\/h3>\n<p>Las plantillas que se usan para la factura tambi\u00e9n pueden ser modificadas en tu tema hijo agregando los archivos sobrescritos en la carpeta pdf:<\/p>\n<p>\/themes\/mytheme\/pdf\/<\/p>\n<h3>Plantillas categor\u00edas, productos, mi cuenta, etc en el tema hijo<\/h3>\n<p>Si necesitas modificar visualmente alguna parte de tu plantilla, como por ejemplo la p\u00e1gina del producto, tendr\u00e1s que copiar el fichero que desees editar de la plantilla padre y depositarlo en el directorio del tema hijo correspondiente para sobrescribirlo. Las plantillas o archivos .tpl est\u00e1n todos dentro de la carpeta:<\/p>\n<p>\/themes\/mytheme\/templates\/<\/p>\n<h3>Vista previa<\/h3>\n<p>El archivo <em>preview.png<\/em> es necesario agregarlo para mostrar una vista r\u00e1pida del tema hijo. Esta imagen ser\u00e1 la que se ver\u00e1 en la configuraci\u00f3n del dise\u00f1o y tema para tu tienda.<\/p>\n<h3>Dise\u00f1o &#8211; Elegir tema<\/h3>\n<p>Una vez tenemos los archivos completados de nuestro tema hijo es posible seleccionar nuestro tema hijo desde el Backoffice.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7208 size-full\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1.png\" alt=\"\" width=\"1896\" height=\"926\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1.png 1896w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1-300x147.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1-768x375.png 768w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura2-1-1024x500.png 1024w\" sizes=\"auto, (max-width: 1896px) 100vw, 1896px\" \/><\/a><\/p>\n<p>Si nos situamos por encima de nuestro tema \u00abmytheme\u00bb y pulsamos en el bot\u00f3n \u00abUtilizar este tema\u00bb se sit\u00faa nuestro tema hijo como tema actual de la tienda:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7209 size-full\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3.png\" alt=\"\" width=\"1893\" height=\"903\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3.png 1893w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3-300x143.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3-768x366.png 768w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura3-1024x488.png 1024w\" sizes=\"auto, (max-width: 1893px) 100vw, 1893px\" \/><\/a><\/p>\n<p>Al visitar la parte frontal de la tienda ya se muestra con el tema hijo que hemos creado de ejemplo.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7211 size-full\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4.png\" alt=\"\" width=\"1897\" height=\"963\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4.png 1897w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4-300x152.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4-768x390.png 768w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/Captura4-1024x520.png 1024w\" sizes=\"auto, (max-width: 1897px) 100vw, 1897px\" \/><\/a><\/p>\n<h3>Conclusiones<\/h3>\n<p>Ahora ya puedes personalizarlo a tu gusto modificando los archivos correspondientes y sobrescribiendo en el tema hijo las plantillas deseadas del tema padre.<\/p>\n<p>De esta forma, en el caso de utilizar el tema \u00abclassic\u00bb como padre siempre podr\u00e1s actualizar <strong>PrestaShop<\/strong>\u00a0y tu tema hijo seguir\u00e1 funcionando ya que heredar\u00e1 tambi\u00e9n las novedades introducidas en el tema padre.<\/p>\n<p>Personalmente pienso que este sistema puede mantenerse por bastante tiempo o eso espero. Es un gran inconveniente tener que rehacer una plantilla de nuevo para poder actualizar despu\u00e9s de un a\u00f1o. Es mucho trabajo que esperamos se pueda ahorrar con el tema hijo.<\/p>\n<p>Todo apunta a que PrestaShop mantendr\u00e1 este sistema por mucho tiempo. En <strong>WordPress<\/strong> hice un tema hace m\u00e1s de 10 a\u00f1os y todav\u00eda sigue funcionando en nuevas versiones de <strong>WordPress<\/strong>. \u00bfEsto ser\u00eda un sue\u00f1o en <strong>PrestaShop<\/strong>? \u00bfQu\u00e9 opin\u00e1is?<\/p>\n<p style=\"text-align: center;\"><a class=\"btn btn-primary\" href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/mytheme.zip\" target=\"_blank\" rel=\"noopener noreferrer\"><i class=\"fa fa fa-download\"><\/i> Descargar tema hijo de ejemplo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.<\/p>\n","protected":false},"author":1,"featured_media":7283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149,21],"tags":[175,124],"class_list":["post-7204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacados","category-prestashop","tag-actualizaciones-prestashop","tag-modulos-prestashop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-31T11:02:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-15T15:48:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/\",\"name\":\"C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png\",\"datePublished\":\"2019-01-31T11:02:34+00:00\",\"dateModified\":\"2019-04-15T15:48:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear un tema hijo en PrestaShop 1.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog","description":"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog","og_description":"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-01-31T11:02:34+00:00","article_modified_time":"2019-04-15T15:48:05+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/","name":"C\u00f3mo crear un tema hijo en PrestaShop 1.7 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png","datePublished":"2019-01-31T11:02:34+00:00","dateModified":"2019-04-15T15:48:05+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Crea un tema para PrestaShop 1.7 de forma r\u00e1pida usando el nuevo sistema para crear temas hijos. Ahorra tiempo herendando aspectos y comportamientos del tema padre.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/01\/tema-hijo-en-prestashop-1-7.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-un-tema-hijo-en-prestashop-1-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear un tema hijo en PrestaShop 1.7"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7204"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7204\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7283"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}