Cara membuat Tema Anak di Magento 2

18

Saya ingin memodifikasi aspek-aspek tertentu dari tema Luma out-of-the-box tapi saya ingin melakukannya dengan melestarikan file asli dan memastikan bahwa setiap kali saya memperbarui Magento saya juga menyimpan perubahan saya.

Saya ingin melakukan ini dengan Tema Anak.

Apakah Magento 2 mendukung tema anak dan, jika demikian, bagaimana cara menyusun jalur direktori saya untuk mewujudkannya?

magento2 parent-child-theme H. Ferrence
sumber
1
Saya bersyukur Anda menanyakan pertanyaan ini. Saya bertanya-tanya hal yang sama!
camdixon

Jawaban:

26

Mari kita buat tema anak jadi semua tema khusus kita di Magento 2 ada di sini:

app / design / frontend / company_name / theme_name

Mari kita asumsikan, nama perusahaan kita adalah perusahaanku dan nama tema kita adalah dasar. Kita perlu membuat struktur direktori berikut untuk tema kita:

app
└────design
     └──────frontend
            └──mycompany
               └───basic
                   └──etc
                   └──Magento_Theme
                   │       └─layout
                   │             default.xml
                   └──media
                   │       preview.png
                   └──web
                   │  └─css
                   │  └─fonts
                   │  └─images
                   │  └─js
                   │ theme.xml
                   │ registration.php

perusahaanku :-

Nama paket tema

dasar: - Nama tema. Kami dapat memiliki beberapa tema bernama di dalam folder perusahaan saya.

etc / view.xml: -

File ini digunakan untuk menentukan dimensi gambar produk, thumbnail, dll.

Magento_Theme: - Direktori ini digunakan untuk mengganti file tema Magento yang ada.

Magento_Theme / layout / default.xml: - Secara default Magento2 mengasumsikan bahwa file logo tema Anda seharusnya: /web/media/logo.svg Jika Anda ingin file lain untuk logo, maka Anda harus mendeklarasikannya dalam default.xmlfile.

File ini juga digunakan untuk mengganti pengaturan tema default.

media / preview.png: - Pratinjau tema saat ini.

web: - Direktori ini berisi semua data statis tema seperti gambar, gaya, javascript, font, dll.

registrasi.php: - File ini diperlukan untuk mendaftarkan tema kami ke sistem Magento2.

theme.xml: - Ini adalah file wajib yang mendefinisikan nama tema kami, induknya dan gambar pratinjau tema opsional.

Membuat file tema

Mari kita buat file kita satu per satu.

theme.xml (aplikasi / desain / antarmuka / mycompany / basic / theme.xml)

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registrasi.php (aplikasi / desain / antarmuka / mycompany / dasar / registrasi.php)

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mycompany/basic',
    __DIR__
);

default.xml (aplikasi / desain / antarmuka / mycompany / basic / Magento_Theme / layout / default.xml)

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
           <arguments>
              <argument name="logo_file" xsi:type="string">images/my_logo.png</argument>
              <argument name="logo_img_width" xsi:type="number">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

Pada titik ini, tema kita sudah siap. Kosongkan cache Anda dan kami sekarang akan memilih tema baru kami dari admin.

Sekarang, masuk ke admin dan pindah ke jalur berikut:

Content -> Design -> Themes

Anda harus melihat tema Anda tercantum.

Sekarang buka:

Stores -> Configuration -> Design

Pilih Situs Web Utama di depan Tampilan Toko di kiri atas. Sekarang klik

Desgin -> Design Theme

Hapus centang Gunakan kotak centang Default dan pilih tema Anda. Klik Save Config, kosongkan cache Anda dan tema baru Anda siap. Periksa halaman rumah Anda.

Untuk detail lebih lanjut lihat di sini.

Arunendra
sumber
Terima kasih atas panduan langkah demi langkah yang ekstensif @Arunendra. Saya akan mencobanya sebentar lagi dan mengirim kembali.
H. Ferrence
Ini @Arunendra yang luar biasa. Bekerja dengan sempurna. Hanya perlu mengikuti sepenuhnya tanpa melewatkan langkah apa pun.
H. Ferrence
1
Langkah-demi-langkah hebat @Arunendra. Kalau-kalau ada yang mengalami masalah yang sama dengan saya, lokasi di mana Anda menerapkan tema terdaftar Anda telah berubah dari Design -> Design Thememenjadi Content/Design/Configuration.
Kedmasterk
Catatan penting: File media/preview.pngharus ada jika tidak Magento akan melempar pengecualian.
Salman von Abbas
5

Buat direktori:

Pergi ke root ke direktori root dan arahkan ke aplikasi / desain / antarmuka , buat Demo direktori .

Sekarang buat direktori Mytheme di app / design / frontend / Demo.

Buat direktori Mangento_Theme di app / design / frontend / Demo / Mytheme.

Buat direktori tata letak di aplikasi / desain / antarmuka / Demo / Mytheme / Magento_Theme.

Buat direktori media di app / design / frontend / Demo / Mytheme.

Buat direktori web di aplikasi / desain / antarmuka / Demo / Mytheme.

Buat direktori gambar di aplikasi / desain / antarmuka / Demo / Mytheme / web.

Deklarasi Tema

Buat file theme.xml di app / design / frontend / Demo / Mytheme, dan rekatkan kode berikut di dalamnya:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mytheme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

Pendaftaran Tema

Sekarang buat file pendaftaran.php di app / design / frontend / Demo / Mytheme dan rekatkan kode berikut di dalamnya:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Demo/Mytheme', __DIR__
);

Unggah Gambar Pratinjau Tema

Buka aplikasi / desain / antarmuka / Demo / Mytheme / media dan unggah gambar pratinjau Anda (preview.jpg) di sini.

Deklarasi Logo Tema

Buka aplikasi / desain / antarmuka / Demo / Mytheme / Magento_Theme / layout dan buat file default.xml. Rekatkan kode berikut di dalamnya:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

Unggah Logo Tema

Buka aplikasi / desain / antarmuka / Demo / Mytheme / web / gambar dan unggah logo Anda (mytheme-logo.png) di sini.

Terapkan Tema Anda

  • Buka panel Admin Magento 2 Anda dan buka Konten → Konfigurasi.

  • Klik pada opsi Edit.

  • Pilih Mytheme dari menu turun bawah Applied Theme dan klik
    Simpan Konfigurasi.

Jalankan Perintah

Buka terminal SSH dan buka direktori root Magento Anda 2. Sekarang jalankan semua perintah ini satu per satu:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush
Syed Muneeb Ul Hasan
sumber