{"id":4947,"date":"2012-10-08T13:33:20","date_gmt":"2012-10-08T13:33:20","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=4947"},"modified":"2019-04-08T10:18:46","modified_gmt":"2019-04-08T10:18:46","slug":"como-crear-tu-propia-plantilla-en-prestashop","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/","title":{"rendered":"Como crear tu propia plantilla en Prestashop"},"content":{"rendered":"<p>El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado <a href=\"http:\/\/www.smarty.net\/\" rel=\"nofollow\">Smarty<\/a>, el cual permite a dise\u00f1adores y desarrolladores web crear f\u00e1cilmente su propio tema, con pocos conocimientos t\u00e9cnicos.<\/p>\n<p>Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual.<\/p>\n<p>Le presentamos algunas peque\u00f1eces a tomar en cuenta:<\/p>\n<ul>\n<li>Todos los temas tienen sus archivos ubicados en la carpeta ra\u00edz <tt>\/themes<\/tt>.<\/li>\n<li>Cada tema contiene su propia sub-carpeta, en la carpeta de temas principales.<\/li>\n<li>Cada tema est\u00e1 compuesto de archivos plantilla (<tt>.tpl<\/tt>), archivos de imagen (<tt>.gif<\/tt>, <tt>.jpg<\/tt>, <tt>.png<\/tt>), uno o m\u00e1s archivos CSS (<tt>.css<\/tt>) e incluso a veces archivos JavaScript (<tt>.js<\/tt>).<\/li>\n<li>Cada tema tiene su propio archivo de imagen <tt>preview.jpg<\/tt> en su carpeta, permitiendo al propietario de la tienda observar la manera como luce el tema directamente desde el back office, y seleccionar el tema apropiado.<\/li>\n<\/ul>\n<p>He aqu\u00ed un resumen de la estructura de archivos de un tema de PrestaShop (la opci\u00f3n por defecto):<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop-theme-structure.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4995\" title=\"prestashop-theme-structure\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop-theme-structure.png\" alt=\"\" width=\"373\" height=\"332\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop-theme-structure.png 373w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop-theme-structure-300x267.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/a><\/p>\n<ul>\n<li>La carpeta <tt>\/css<\/tt> contiene todos los archivos CSS.<\/li>\n<li>La carpeta <tt>\/img<\/tt> contiene todas las im\u00e1genes.<\/li>\n<li>La carpeta <tt>\/js<\/tt> contiene todos los archivos JavaScript.<\/li>\n<li>La carpeta <tt>\/lang<\/tt> contiene traducciones del tema. Sus derechos de acceso deben configurarse en CHMOD 666 (por ejemplo), de modo que la herramienta de traducci\u00f3n de back-office se pueda leer y escribir dentro de la misma.<\/li>\n<li>La ra\u00edz de la carpeta s\u00f3lo contiene archivos TPL (archivos Smarty), as\u00ed como el archivo <tt>preview.jpg<\/tt>.<\/li>\n<\/ul>\n<p>Las carpetas <tt>\/css<\/tt>, <tt>\/img<\/tt> y <tt>\/js<\/tt> son opcionales, el tema puede funcionar perfectamente sin ellas.<\/p>\n<p>Para manejar las traducciones hay que tener en cuenta el sistema que utiliza Prestashop, veremos variables de la siguiente forma:<\/p>\n<div title=\"Hint: double-click to select code\">\n<div><code>{l s=<\/code><code>'My Text'<\/code><code>}<\/code><\/div>\n<\/div>\n<p>Esto permitir\u00e1 a cualquier persona traducir el tema en su propio idioma, utilizando la herramienta de traducci\u00f3n interna, la cual se encontrar en el back-office de PrestaShop, en la pesta\u00f1a \u00abHerramientas\u00bb y su sub-pesta\u00f1a \u00abTraducciones\u00bb. En la secci\u00f3n \u00abModificar traducciones\u00bb, utilice el men\u00fa desplegable, elija la opci\u00f3n \u00abtraducci\u00f3n de Front Office\u00bb, y luego haga clic en la bandera del idioma en que desea traducir sus cadenas. Todas las cadenas del front-office ser\u00e1n mostradas.<\/p>\n<p><strong>Pasos a seguir para personalizar un tema<\/strong><\/p>\n<ol>\n<li>Ubique el directorio <tt>\/themes<\/tt> en su instalaci\u00f3n de PrestaShop y cree una copia del directorio por defecto <tt>..\/themes\/prestashop\/<\/tt>.<\/li>\n<li>Cambie el nombre al duplicado. Por ejemplo <tt>MyStoreTheme<\/tt>.<\/li>\n<li>En la carpeta del tema personalizado, ubique la carpeta <tt>\/css<\/tt>.<\/li>\n<li>Abra el archivo <tt>global.css<\/tt> y c\u00e1mbielo de acuerdo a sus necesidades. Aqu\u00ed estar\u00e1 limitado por su creatividad \u2013 y su conocimiento de CSS.<\/li>\n<li>Las im\u00e1genes nuevas o modificadas deben ser colocados en carpeta del nuevo tema <tt>\/img<\/tt> (e.j., <tt>\/themes\/MyStoreTheme\/img<\/tt>).<\/li>\n<li>Una vez que su tema personalizado se encuentra listo, usted debe colocar un archivo que represente el tema, llamado <tt>preview.jpg<\/tt>, en la carpeta ra\u00edz del tema (ej., <tt>\/themes\/MyStoreTheme<\/tt>). Este archivo debe ser <tt>.jpg<\/tt> de 100 \u00d7 100 p\u00edxeles.<\/li>\n<li>Dir\u00edjase a la secci\u00f3n \u201cTemas\u201d de la sub-pesta\u00f1a \u201cAspecto\u201d en la pesta\u00f1a \u201cPreferencias\u201d de su back office.<\/li>\n<li>Seleccione el nuevo tema y haga clic en Guardar.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/themes.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4996\" title=\"themes\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/themes.jpg\" alt=\"\" width=\"437\" height=\"356\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/themes.jpg 437w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/themes-300x244.jpg 300w\" sizes=\"auto, (max-width: 437px) 100vw, 437px\" \/><\/a>Ten en cuenta que si modificas mucho la estructura te ver\u00e1s en la necesidad de a\u00f1adir c\u00f3digo HTML extra a los archivos .tpl de la plantilla.<\/p>\n<p>Despu\u00e9s tambi\u00e9n tendr\u00e1s que considerar los m\u00f3dulos y en la mayor\u00eda de los casos deber\u00e1s acceder a sus respectivas hojas de estilos para darles el aspecto deseado.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-una-nueva-plantilla-en-prestashop-1-6-x\/\">Como crear una plantilla en Prestashop 1.6.x<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado Smarty, el cual permite a dise\u00f1adores y desarrolladores web crear f\u00e1cilmente su propio tema, con pocos conocimientos t\u00e9cnicos. Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-4947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prestashop"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog<\/title>\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=\"Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado Smarty, el cual permite a dise\u00f1adores y desarrolladores web crear f\u00e1cilmente su propio tema, con pocos conocimientos t\u00e9cnicos. Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/\" \/>\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=\"2012-10-08T13:33:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-08T10:18:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg\" \/>\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\/jpeg\" \/>\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=\"3 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-tu-propia-plantilla-en-prestashop\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/\",\"name\":\"Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg\",\"datePublished\":\"2012-10-08T13:33:20+00:00\",\"dateModified\":\"2019-04-08T10:18:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear tu propia plantilla en Prestashop\"}]},{\"@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":"Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog","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":"Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog","og_description":"El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado Smarty, el cual permite a dise\u00f1adores y desarrolladores web crear f\u00e1cilmente su propio tema, con pocos conocimientos t\u00e9cnicos. Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual. [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-10-08T13:33:20+00:00","article_modified_time":"2019-04-08T10:18:46+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg","type":"image\/jpeg"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/","name":"Como crear tu propia plantilla en Prestashop - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg","datePublished":"2012-10-08T13:33:20+00:00","dateModified":"2019-04-08T10:18:46+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/10\/prestashop.jpg","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-crear-tu-propia-plantilla-en-prestashop\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear tu propia plantilla en Prestashop"}]},{"@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\/4947","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=4947"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/4947\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4997"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=4947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=4947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=4947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}