Panduan Membuat Tema di Magento 2

Hai! Apakah Anda merasa penasaran dengan Magento 2.0 dengan banyak pembaruan dan perubahan? Hari ini, kami ingin berbagi dengan Anda posting blog tentang Panduan Membuat Tema di Magento 2. Selalu update dengan berlatih setiap hari.

Pembaruan Terbaru: Kami baru saja merilis versi 2.0 dari Claue Multipurpose Magento 2 Theme dengan banyak peningkatan kinerja dan fitur eksklusif. Lihat tema ini sekarang: Claue Magento Theme 2. 0

Demo Langsung

Claue - Bersih, Minimal Magento 2 & 1 Tema adalah templat yang sangat baik untuk toko e-commerce modern dan bersih dengan 40+ tata letak beranda dan banyak pilihan untuk toko, blog, portofolio, tata letak locator lainnya, dan halaman lain yang bermanfaat. Claue versi 2. 0 hadir dengan banyak fitur eksklusif termasuk:

• Berbasis pada tema Luma.
• Memenuhi semua standar Tema Magento
• Peningkatan kinerja yang signifikan
• Kompatibel dengan sebagian besar ekstensi pihak ketiga.
• Sepenuhnya kompatibel dengan Magento 2.4.x

Versi lanjutan kedua ini benar-benar berbeda dari yang sebelumnya. Jadi, jika Anda menggunakan Claue versi 1 dan ingin memperbarui ke Claue versi 2, Anda hanya dapat membangun kembali situs web baru, bukan memperbarui dari versi lama. Sekarang, mari kita kembali ke topik utama.

Sistem tema telah berubah sedikit di Magento 2 tetapi ada kesamaan. Topik ini membahas cara membuat file yang membentuk tema, cara menambahkan logo ke tema, dan cara mengatur ukuran gambar.

Buat direktori tema

Untuk membuat direktori untuk tema Anda:

1. Pergi ke <your Magento install dir>/app/design/frontend .
2. Buat direktori baru bernama sesuai dengan nama vendor Anda: /app/design/frontend/<Vendor> .
3. Di bawah direktori vendor, buat direktori bernama sesuai dengan tema Anda.

 aplikasi/desain/tampilan depan/
<Penjual>/
...<tema>/
...
...

Nama folder secara konvensional cocok dengan penamaan yang digunakan dalam kode tema: set karakter alfanumerik apa pun, sesuai keinginan vendor, dapat diterima. Konvensi ini hanyalah rekomendasi, jadi tidak ada yang mencegah penamaan direktori ini dengan cara lain.

Nyatakan tema Anda

Setelah Anda membuat direktori untuk tema Anda, Anda harus membuat theme.xml yang berisi setidaknya nama tema dan nama tema induk (jika tema mewarisi dari satu). Secara opsional, Anda dapat menentukan di mana gambar pratinjau tema disimpan.

1. Tambahkan atau salin dari theme.xml yang ada ke direktori tema Anda app/design/frontend/<Vendor>/<theme>
2. Konfigurasikan menggunakan contoh berikut:

 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

Buat tema Anda paket komposer (opsional)

tema default gento didistribusikan sebagai paket Komposer.

Untuk mendistribusikan tema Anda sebagai sebuah paket, tambahkan file composer.json ke direktori tema dan daftarkan paket tersebut pada server pengemasan. Server pengemasan publik default adalah https://packagist.org/.

composer.json menyediakan informasi ketergantungan tema.

Contoh dari composer.json tema :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

Anda dapat menemukan detail tentang integrasi Composer dalam sistem Magento dalam integrasi Composer.

Tambahkan pendaftaran.php

Untuk mendaftarkan tema Anda di sistem, di direktori tema Anda tambahkan file registration.php dengan konten berikut:

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

Dimana <Vendor> adalah nama vendor Anda, <theme> adalah kode tema.

Sebagai ilustrasi, lihat file Registration.php dari tema Magento Luma.

Konfigurasikan gambar

Ukuran gambar produk dan properti lain yang digunakan di etalase dikonfigurasi dalam file konfigurasi view.xml . Ini diperlukan untuk tema, tetapi opsional jika ada di tema induk.

Jika ukuran gambar produk tema Anda berbeda dari tema induk, atau jika tema Anda tidak mewarisi dari tema apa pun, tambahkan view.xml menggunakan langkah-langkah berikut:

1. Masuk ke server Magento Anda sebagai pengguna dengan izin untuk membuat direktori dan file di direktori instalasi Magento. (Biasanya, ini adalah pemilik sistem file magento.)
2. Buat direktori etc di folder tema Anda
3. Salin view.xml dari direktori etc dari tema yang ada (misalnya, dari tema Blank) ke direktori etc tema Anda.
4. Konfigurasikan semua ukuran gambar produk etalase di view.xml . Misalnya, Anda dapat membuat kategori grid view citra produk persegi dengan menentukan ukuran 250 x 250 piksel, berikut adalah bagaimana konfigurasi yang sesuai terlihat seperti:

 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Untuk detail tentang konfigurasi gambar di view.xml , lihat Mengkonfigurasi properti gambar untuk topik tema.

Buat direktori untuk file statis

Tema Anda kemungkinan akan berisi beberapa jenis file statis: gaya, font, JavaScript, dan gambar. Setiap jenis harus disimpan dalam sub-direktori web terpisah di folder tema Anda:

 aplikasi/desain/<area>/<Vendor>/<tema>/
web/
css/
sumber/ 
font/
gambar/
js/

Struktur direktori tema Anda sekarang

Pada titik ini struktur file tema Anda terlihat sebagai berikut:

 aplikasi/desain/frontend/<Vendor>/
<tema>/
dll/
view.xml
web/
gambar
logo.svg
theme.xml
komposer.json

Logo tema

Pada aplikasi Magento, format default dan nama gambar logo adalah logo.svg . Saat Anda meletakkan gambar logo.svg di lokasi konvensional, yaitu <theme_dir>/web/images , maka secara otomatis dikenali sebagai logo tema. Ini ditampilkan di header halaman toko Anda setelah tema diterapkan.

Dalam tema khusus Anda, Anda dapat menggunakan file logo dengan nama dan format yang berbeda, tetapi Anda mungkin perlu mendeklarasikannya.

Perlunya deklarasi tergantung pada apakah tema Anda memiliki tema induk dan gambar logonya. Kasus-kasus berikut mungkin terjadi:

• Tema Anda tidak memiliki tema induk:
  • jika nama dan format gambar logo Anda adalah default, logo.svg , tidak perlu mendeklarasikannya;
  • jika nama atau format gambar logo Anda tidak default, Anda perlu mendeklarasikannya dalam tata letak.
• Tema Anda memiliki tema induk:
  • jika gambar logo tema Anda memiliki nama dan format yang sama dengan logo tema induk, tidak perlu mendeklarasikannya;
  • jika gambar logo Anda memiliki nama atau format yang berbeda, nyatakan dalam tata letak.

Mendeklarasikan logo tema

Untuk mendeklarasikan logo tema, tambahkan tata letak <theme_dir>/Magento_Theme/layout/default.xml yang diperluas.

Misalnya, jika file logo Anda adalah my_logo.png berukuran 300x300px, Anda harus mendeklarasikannya sebagai berikut:

 <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" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

Mendeklarasikan ukuran logo adalah opsional.

Kunjungi blog Magesolution untuk membaca tutorial lengkap Magento 2 dan update tutorial terbaru tentang Magento 2.

Sumber: magento.com