{"id":26,"date":"2024-01-26T19:09:50","date_gmt":"2024-01-26T19:09:50","guid":{"rendered":"https:\/\/bitacora.lado.mx\/?p=26"},"modified":"2024-01-26T19:25:58","modified_gmt":"2024-01-26T19:25:58","slug":"crear-un-nuevo-tema-con-magento2","status":"publish","type":"post","link":"https:\/\/bitacora.lado.mx\/index.php\/2024\/01\/26\/crear-un-nuevo-tema-con-magento2\/","title":{"rendered":"Crear un nuevo tema con Magento2"},"content":{"rendered":"\n
    \n
  1. Crear una carpeta de tema para Magento 2<\/li>\n<\/ol>\n\n\n\n

    Crear una carpeta para el tema:<\/p>\n\n\n\n

    Ir a app\/design\/frontend\nCrear una carpeta de proveedor app\/design\/frontend\/<proveedor> por ejemplo: app\/design\/frontend\/Mageplaza\nCrear una carpeta de tema app\/design\/frontend\/<proveedor>\/<tema> por ejemplo: app\/design\/frontend\/Mageplaza\/simple<\/code><\/pre>\n\n\n\n
      \n
    1. Declarar tu tema<\/li>\n<\/ol>\n\n\n\n
      Ahora que tenemos la carpeta app\/design\/frontend\/Mageplaza\/simple, crea un archivo llamado theme.xml que define informaci\u00f3n b\u00e1sica sobre el tema, como: Nombre, tema padre (en caso de que tu tema herede de un tema existente), imagen de vista previa.<\/p>\n\n\n\n
      <theme xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Config\/etc\/theme.xsd\">\n     <title>Mageplaza Simple<\/title> <!-- nombre de tu tema -->\n     <parent>Magento\/blank<\/parent> <!-- tema padre, en caso de que tu tema herede de un tema existente -->\n     <media>\n         <preview_image>media\/preview.jpg<\/preview_image> <!-- la ruta de la imagen de vista previa de tu tema -->\n     <\/media>\n <\/theme><\/code><\/pre>\n\n\n\n
        \n
      1. Paquete de Composer<\/li>\n<\/ol>\n\n\n\n
        Composer es una herramienta para la gesti\u00f3n de dependencias en PHP. Te permite declarar las bibliotecas en las que tu proyecto depende y gestionar\u00e1 (instalar\/actualizar) esas dependencias por ti.<\/p>\n\n\n\n
        Para distribuir tu tema como un paquete, agrega un archivo composer.json al directorio del tema y registra el paquete en un servidor de empaquetado.<\/p>\n\n\n\n
        Ejemplo de composer.json:<\/p>\n\n\n\n
        {\n    \"name\": \"mageplaza\/simple\",\n    \"description\": \"N\/A\",\n    \"require\": {\n        \"php\": \"~5.5.0|~5.6.0|~7.0.0|~8.0.0\",\n        \"magento\/theme-frontend-blank\": \"100.0.*\",\n        \"magento\/framework\": \"100.0.*\"\n    },\n    \"type\": \"magento2-theme\",\n    \"version\": \"100.0.1\",\n    \"license\": [\n        \"OSL-3.0\",\n        \"AFL-3.0\"\n    ],\n    \"autoload\": {\n        \"files\": [\n            \"registration.php\"\n        ]\n    }\n}<\/code><\/pre>\n\n\n\n
          \n
        1. Archivo registration.php<\/li>\n<\/ol>\n\n\n\n
          Puedes agregar el siguiente contenido para registrar el tema en Magento 2<\/p>\n\n\n\n
          <?php\n\/**\n * Copyright \u00a9 2015 Magento. Todos los derechos reservados.\n * Ver COPYING.txt para los detalles de la licencia.\n *\/\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::THEME,\n    'frontend\/Mageplaza\/simple',\n    __DIR__\n);<\/code><\/pre>\n\n\n\n
          Debes cambiar Mageplaza, simple por tu proveedor y nombre de tema.<\/p>\n\n\n\n
            \n
          1. Crear archivos y carpetas est\u00e1ticos<\/li>\n<\/ol>\n\n\n\n
            En un dise\u00f1o, hay muchos archivos est\u00e1ticos como javascript, css, im\u00e1genes y fuentes. Se almacenan en carpetas separadas en la web del paquete del tema.<\/p>\n\n\n\n
            Aqu\u00ed est\u00e1 la estructura:<\/p>\n\n\n\n
            app\/design\/frontend\/Mageplaza\/simple\/\n\u251c\u2500\u2500 web\/\n\u2502 \u251c\u2500\u2500 css\/\n\u2502 \u2502 \u251c\u2500\u2500 source\/ \n\u2502 \u251c\u2500\u2500 fonts\/\n\u2502 \u251c\u2500\u2500 images\/\n\u2502 \u251c\u2500\u2500 js\/<\/code><\/pre>\n\n\n\n
            Consejos:<\/p>\n\n\n\n
            En Magento 2, desarrollo de temas o extensiones, al actualizar cualquier archivo en la carpeta app\/design\/frontend\/Mageplaza\/simple\/web, debes actualizar las carpetas est\u00e1ticas ubicadas en pub\/static y var\/view_preprocessed; de lo contrario, no ver\u00e1s cambios en el frontend.<\/p>\n\n\n\n
              \n
            1. Configurar im\u00e1genes de productos en el cat\u00e1logo<\/li>\n<\/ol>\n\n\n\n
              Como puedes ver en la estructura del tema que mencion\u00e9 anteriormente, hay un archivo llamado etc\/view.xml. Este es un archivo de configuraci\u00f3n. Este archivo es necesario para el tema de Magento 2, pero es opcional si existe en el tema padre.<\/p>\n\n\n\n
              Ir a app\/design\/frontend\/Mageplaza\/simple\/ y crear una carpeta etc y un archivo view.xml. Puedes copiar el archivo view.xml del tema padre, como el tema Blank app\/design\/frontend\/Magento\/blank\/etc\/view.xml.<\/p>\n\n\n\n
              Actualiza la configuraci\u00f3n de imagen para la p\u00e1gina del cat\u00e1logo de productos.<\/p>\n\n\n\n
              <image id=\"category_page_grid\" type=\"small_image\">\n    <width>250<\/width>\n    <height>250<\/height>\n<\/image><\/code><\/pre>\n\n\n\n
              En view.xml, las propiedades de las im\u00e1genes se configuran en el \u00e1mbito del elemento:<\/p>\n\n\n\n
              <images module=\"Magento_Catalog\">\n...\n<images\/><\/code><\/pre>\n\n\n\n
              Las propiedades de las im\u00e1genes se configuran para cada tipo de imagen definido por los atributos id y type del elemento :<\/p>\n\n\n\n
              <images module=\"Magento_Catalog\">\n    <image id=\"unique_image_id\" type=\"image_type\">\n    <width>100<\/width> <!-- Ancho de la imagen en p\u00edxeles --> \n        <height>100<\/height> <!-- Altura de la imagen en p\u00edxeles -->\n    <\/image>\n<images\/><\/code><\/pre>\n\n\n\n
                \n
              1. Declarar el logotipo del tema<\/li>\n<\/ol>\n\n\n\n
                En Magento 2 por defecto, se utiliza \/web\/images\/logo.svg, en tu tema, puedes cambiar a diferentes formatos de archivo como png, jpg, pero debes declararlo.<\/p>\n\n\n\n
                El tama\u00f1o del logotipo debe ser de 300×300 p\u00edxeles y debes abrir el archivo \/Magento_Theme\/layout\/default.xml<\/p>\n\n\n\n
                <page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"logo\">\n            <arguments>\n                <argument name=\"logo_file\" xsi:type=\"string\">images\/custom_logo.png<\/argument>\n                <argument name=\"logo_img_width\" xsi:type=\"number\">300<\/argument> \n                <argument name=\"logo_img_height\" xsi:type=\"number\">300<\/argument>\n            <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/code><\/pre>\n\n\n\n
                  \n
                1. Elementos b\u00e1sicos del dise\u00f1o<\/li>\n<\/ol>\n\n\n\n
                  Los componentes b\u00e1sicos del dise\u00f1o de p\u00e1gina de Magento son bloques y contenedores.<\/p>\n\n\n\n
                  Un contenedor existe con el \u00fanico prop\u00f3sito de asignar la estructura de contenido a una p\u00e1gina. Un contenedor no tiene contenido adicional excepto el contenido de los elementos incluidos. Ejemplos de contenedores incluyen el encabezado, la columna izquierda, la columna principal y el pie de p\u00e1gina.<\/p>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                    \n
                  1. Tipos y convenciones de archivos de dise\u00f1o
                    Archivos de dise\u00f1o de m\u00f3dulos y temas<\/li>\n<\/ol>\n\n\n\n
                    Se utilizan los siguientes t\u00e9rminos para distinguir los dise\u00f1os proporcionados por diferentes componentes de la aplicaci\u00f3n:<\/p>\n\n\n\n
                    Dise\u00f1os base: Archivos de dise\u00f1o proporcionados por m\u00f3dulos. Ubicaci\u00f3n convencional:\n    Configuraci\u00f3n de p\u00e1gina y archivos de dise\u00f1o gen\u00e9ricos: <module_dir>\/view\/frontend\/layout\n    Archivos de dise\u00f1o de p\u00e1gina<\/code><\/pre>\n\n\n\n
                    : \/view\/frontend\/page_layout
                    Dise\u00f1os de temas: Archivos de dise\u00f1o proporcionados por temas. Ubicaci\u00f3n convencional:
                    Configuraci\u00f3n de p\u00e1gina y archivos de dise\u00f1o gen\u00e9ricos: \/\/layout Archivos de dise\u00f1o de p\u00e1gina: \/<\/em>\/page_layout<\/p>\n\n\n\n
                    Crear un archivo de tema que se extienda<\/p>\n\n\n\n
                    En lugar de copiar extensos c\u00f3digos de dise\u00f1o de p\u00e1gina o configuraci\u00f3n de p\u00e1gina y luego modificar lo que deseas cambiar, en el sistema de Magento, solo necesitas crear un archivo de dise\u00f1o que se extienda y que contenga los cambios que deseas.<\/p>\n\n\n\n
                    Para agregar un archivo de configuraci\u00f3n de p\u00e1gina o un archivo de dise\u00f1o gen\u00e9rico que se extienda:<\/p>\n\n\n\n
                    <theme_dir>\n |__\/<Namespace>_<Module>\n   |__\/layout\n     |--<layout1>.xml\n     |--<layout2>.xml<\/code><\/pre>\n\n\n\n
                    Por ejemplo, para personalizar el dise\u00f1o definido en \/view\/frontend\/layout\/catalog_product_view.xml, debes agregar un archivo de dise\u00f1o con el mismo nombre en tu tema personalizado, como sigue:<\/p>\n\n\n\n
                    <theme_dir>\/Magento_Catalog\/layout\/catalog_product_view.xml<\/code><\/pre>\n\n\n\n
                    <theme_dir>\n |__\/<Namespace>_<Module>\n   |__\/page_layout\n     |--<layout1>.xml\n     |--<layout2>.xml<\/code><\/pre>\n\n\n\n
                    Anular los dise\u00f1os base<\/p>\n\n\n\n
                    Anular no es necesario si un bloque tiene un m\u00e9todo que cancela el efecto del m\u00e9todo originalmente invocado. En este caso, puedes personalizar el dise\u00f1o agregando un archivo de dise\u00f1o donde se invoque el m\u00e9todo de cancelaci\u00f3n.<\/p>\n\n\n\n
                    Para agregar un archivo de dise\u00f1o base que anule (para anular un dise\u00f1o base proporcionado por el m\u00f3dulo): coloca un archivo de dise\u00f1o con el mismo nombre en la siguiente ubicaci\u00f3n:<\/p>\n\n\n\n
                    <theme_dir>\n  |__\/<Namespace_Module>\n    |__\/layout\n      |__\/override\n         |__\/base\n           |--<layout1>.xml\n           |--<layout2>.xml<\/code><\/pre>\n\n\n\n
                    Estos archivos anulan los siguientes dise\u00f1os:<\/p>\n\n\n\n
                    <module_dir>\/view\/frontend\/layout\/<layout1>.xml\n<module_dir>\/view\/frontend\/layout\/<layout2>.xml<\/code><\/pre>\n\n\n\n
                    Anular los dise\u00f1os de temas<\/p>\n\n\n\n
                    Para agregar un archivo de anulaci\u00f3n de tema (para anular un dise\u00f1o de tema principal):<\/p>\n\n\n\n
                    <theme_dir>\n  |__\/<Namespace_Module>\n    |__\/layout\n      |__\/override\n         |__\/theme\n            |__\/<Parent_Vendor>\n               |__\/<parent_theme>\n                  |--<layout1>.xml\n                  |--<layout2>.xml<\/code><\/pre>\n\n\n\n
                    Estos archivos anulan los siguientes dise\u00f1os:<\/p>\n\n\n\n
                    <parent_theme_dir>\/<Namespace>_<Module>\/layout\/<layout1>.xml\n<parent_theme_dir>\/<Namespace>_<Module>\/layout\/<layout1>.xml<\/code><\/pre>\n\n\n\n
                    \u00a1Consejos!<\/p>\n\n\n\n
                      \n
                    • Cambiar el nombre o alias del bloque. El nombre de un bloque no debe cambiarse, al igual que el alias de un bloque que permanece en el mismo elemento principal.<\/li>\n\n\n\n
                    • Cambiar la herencia del identificador. Por ejemplo, no debes cambiar el identificador del tipo de p\u00e1gina principal.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                      Crear una carpeta para el tema: Ahora que tenemos la carpeta app\/design\/frontend\/Mageplaza\/simple, crea un archivo llamado theme.xml que define informaci\u00f3n b\u00e1sica sobre el tema, como: Nombre, tema padre (en caso de que tu tema herede de un tema existente), imagen de vista previa. Composer es una herramienta para la gesti\u00f3n de dependencias en PHP. Te […]<\/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-26","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/26","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=26"}],"version-history":[{"count":4,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":31,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/posts\/26\/revisions\/31"}],"wp:attachment":[{"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.lado.mx\/index.php\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}