{"id":33,"date":"2024-01-26T19:41:14","date_gmt":"2024-01-26T19:41:14","guid":{"rendered":"https:\/\/bitacora.lado.mx\/?p=33"},"modified":"2024-01-26T19:42:19","modified_gmt":"2024-01-26T19:42:19","slug":"creacion-y-personalizacion-de-temas","status":"publish","type":"post","link":"https:\/\/bitacora.lado.mx\/index.php\/2024\/01\/26\/creacion-y-personalizacion-de-temas\/","title":{"rendered":"Magento2 &#8211; Creaci\u00f3n y Personalizaci\u00f3n de Temas"},"content":{"rendered":"\n<p>La creaci\u00f3n y personalizaci\u00f3n de temas en Magento es esencial para dar a tu tienda una apariencia \u00fanica y adaptada a la identidad de tu marca. Magento utiliza un sistema de temas basado en la arquitectura de dise\u00f1o de Magento (XML, PHTML, CSS, etc.). Aqu\u00ed te explico c\u00f3mo puedes abordar este tema:<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Estructura de un Tema en Magento:<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Directorio del Tema:<\/strong> Un tema en Magento se organiza dentro del directorio <code>app\/design\/frontend\/[Vendor]\/[Theme]\/<\/code>.<\/li>\n\n\n\n<li><strong>Archivos Principales:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>layout.xml:<\/strong> Define la estructura de la p\u00e1gina y la disposici\u00f3n de los bloques.<\/li>\n\n\n\n<li><strong>template.phtml:<\/strong> Contiene el HTML y las directivas de presentaci\u00f3n.<\/li>\n\n\n\n<li><strong>styles.css:<\/strong> Contiene las reglas de estilo espec\u00edficas del tema.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h5 class=\"wp-block-heading\">Creaci\u00f3n de un Nuevo Tema:<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Creaci\u00f3n de la Estructura:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Crea un nuevo directorio para tu tema dentro de <code>app\/design\/frontend\/<\/code>.<\/li>\n\n\n\n<li>Estructura del directorio: <code>app\/design\/frontend\/[Vendor]\/[Theme]\/<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Definici\u00f3n del Tema:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Define tu tema en el archivo <code>theme.xml<\/code> ubicado en <code>app\/design\/frontend\/[Vendor]\/[Theme]\/<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Herencia de Temas Padre:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Puedes heredar de un tema padre para aprovechar su estructura y personalizar solo lo necesario.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h5 class=\"wp-block-heading\">Personalizaci\u00f3n del Tema:<\/h5>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Modificaci\u00f3n de Layout:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Utiliza archivos <code>local.xml<\/code> o archivos de dise\u00f1o XML para personalizar la disposici\u00f3n de los bloques.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Modificaci\u00f3n de Plantillas (PHTML):<\/strong>\n<ul class=\"wp-block-list\">\n<li>Modifica los archivos <code>.phtml<\/code> para personalizar el HTML de los bloques.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Estilos Personalizados:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Agrega o modifica estilos en el archivo <code>styles.css<\/code> para cambiar la apariencia.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">7.1.2 Archivos que se Pueden Modificar:<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>layout.xml:<\/strong> (<code>app\/design\/frontend\/[Vendor]\/[Theme]\/layout\/default.xml<\/code>)\n<ul class=\"wp-block-list\">\n<li>Modifica la disposici\u00f3n de los bloques en las p\u00e1ginas.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>template.phtml:<\/strong> (<code>app\/design\/frontend\/[Vendor]\/[Theme]\/template\/<\/code>)\n<ul class=\"wp-block-list\">\n<li>Modifica el HTML de bloques y plantillas.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>styles.css:<\/strong> (<code>app\/design\/frontend\/[Vendor]\/[Theme]\/web\/css\/<\/code>)\n<ul class=\"wp-block-list\">\n<li>Agrega o modifica estilos para cambiar la apariencia de la tienda.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>theme.xml:<\/strong> (<code>app\/design\/frontend\/[Vendor]\/[Theme]\/theme.xml<\/code>)\n<ul class=\"wp-block-list\">\n<li>Define la informaci\u00f3n b\u00e1sica del tema.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>local.xml:<\/strong> (<code>app\/design\/frontend\/[Vendor]\/[Theme]\/layout\/local.xml<\/code>)\n<ul class=\"wp-block-list\">\n<li>Agrega ajustes espec\u00edficos del tema en este archivo de dise\u00f1o local.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>La creaci\u00f3n y personalizaci\u00f3n de temas en Magento es esencial para dar a tu tienda una apariencia \u00fanica y adaptada a la identidad de tu marca. Magento utiliza un sistema de temas basado en la arquitectura de dise\u00f1o de Magento (XML, PHTML, CSS, etc.). Aqu\u00ed te explico c\u00f3mo puedes abordar este tema: Estructura de un [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":2,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":35,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions\/35"}],"wp:attachment":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}