Magento 2'de Tema Oluşturma Kılavuzu

Merhaba! Birçok güncelleme ve değişiklik içeren Magento 2.0'ı merak ediyor musunuz? Bugün sizlerle Magento 2'de Tema Oluşturma Rehberi hakkında bir blog yazısı paylaşmak istiyoruz. Her gün pratik yaparak her zaman güncel olun.

En Son Güncelleme: Claue Çok Amaçlı Magento 2 Teması'nın 2.0 sürümünü bir dizi performans iyileştirmesi ve özel özelliklerle piyasaya sürdük. Bu temaya şimdi göz atın: Claue Magento Theme 2. 0

Canlı Demo

Claue – Temiz, Minimal Magento 2&1 Teması , 40'tan fazla ana sayfa düzeni ve mağaza, blog, portföy, mağaza bulma düzenleri ve diğer faydalı sayfalar için tonlarca seçenek içeren modern ve temiz bir e-ticaret mağazası için mükemmel bir şablondur. Claue sürüm 2.0, aşağıdakiler de dahil olmak üzere bir dizi özel özellikle birlikte gelir:

• Luma temasına dayalı olmak.
• Magento Temasının tüm standartlarını karşılayın
• Önemli performans artışı
• Çoğu üçüncü taraf uzantıyla uyumludur.
• Magento 2.4.x ile tam uyumlu

Bu ikinci gelişmiş sürüm, öncekinden tamamen farklıdır. Bu nedenle, Claue sürüm 1 kullanıyorsanız ve Claue sürüm 2'ye güncelleme yapmak istiyorsanız, eski sürümden güncelleme yapmak yerine yalnızca yeni bir web sitesi yeniden oluşturabilirsiniz. Şimdi asıl konuya dönelim.

Magento 2'de tema sistemi biraz değişti ama benzerlikler var. Bu konu, bir temayı oluşturan dosyaların nasıl oluşturulacağını, bir temaya nasıl logo ekleneceğini ve görüntülerin nasıl boyutlandırılacağını tartışır.

Bir tema dizini oluşturun

Temanızın dizinini oluşturmak için:

1. <your Magento install dir>/app/design/frontend .
2. Satıcı adınıza göre adlandırılan yeni bir dizin oluşturun: /app/design/frontend/<Vendor> .
3. Satıcı dizini altında, temanıza göre adlandırılmış bir dizin oluşturun.

 uygulama/tasarım/ön uç/
├── <Satıcı>/
│ │ ├──...<tema>/
│ │ │ ├── ...
│ │ │ ├── ...

Klasör adı, geleneksel olarak tema kodunda kullanılan adla eşleşir: satıcının uygun gördüğü herhangi bir alfasayısal karakter kümesi kabul edilebilir. Bu kural yalnızca bir öneridir, bu nedenle bu dizini başka bir şekilde adlandırmayı hiçbir şey engelleyemez.

Temanızı bildirin

Temanız için bir dizin oluşturduktan sonra, en azından tema adını ve ana tema adını (tema birinden miras alıyorsa) içeren theme.xml oluşturmalısınız. İsteğe bağlı olarak, tema önizleme görüntüsünün nerede saklanacağını belirleyebilirsiniz.

1. Mevcut bir theme.xml tema dizininize app/design/frontend/<Vendor>/<theme> ekleyin veya kopyalayın
2. Aşağıdaki örneği kullanarak yapılandırın:

 <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>

Temanızı bir Besteci paketi yapın (isteğe bağlı)

gento varsayılan temaları Composer paketleri olarak dağıtılır.

Temanızı bir paket olarak dağıtmak için tema dizinine bir composer.json dosyası ekleyin ve paketi bir paketleme sunucusuna kaydedin. Varsayılan bir genel paketleme sunucusu https://packagist.org/'dır.

composer.json , tema bağımlılığı bilgisi sağlar.

Bir tema composer.json örneği:

 { "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" ] } }

Magento sisteminde Composer entegrasyonu ile ilgili detayları Composer entegrasyonunda bulabilirsiniz.

kayıt.php ekleyin

Temanızı sisteme kaydetmek için tema dizininize aşağıdaki içeriğe sahip bir registration.php dosyası ekleyin:

 <?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__ );

<Vendor> satıcı adınız olduğunda, <theme> tema kodudur.

Örnek olarak, Magento Luma temasının kayıt.php dosyasına bakın.

Görüntüleri yapılandır

Vitrin üzerinde kullanılan ürün resmi boyutları ve diğer özellikler, bir view.xml yapılandırma dosyasında yapılandırılır. Bir tema için gereklidir, ancak ana temada varsa isteğe bağlıdır.

Temanızın ürün görsel boyutları ana temanınkinden farklıysa veya temanız herhangi bir temadan miras almıyorsa, aşağıdaki adımları kullanarak view.xml ekleyin:

1. Magento kurulum dizininde dizinler ve dosyalar oluşturma izinlerine sahip bir kullanıcı olarak Magento sunucunuzda oturum açın. (Genellikle bu, Magento dosya sistemi sahibidir.)
2. Tema klasörünüzde etc dizinini oluşturun
3. Mevcut bir temanın etc dizininden (örneğin, Boş temadan) view.xml etc dizinine kopyalayın.
4. Tüm vitrin ürün resim boyutlarını view.xml . Örneğin, 250 x 250 piksellik bir boyut belirterek kategori ızgarası ürün resimlerini kare hale getirebilirsiniz, ilgili yapılandırma şöyle görünür:

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

view.xml görüntülerin yapılandırılmasıyla ilgili ayrıntılar için, bir tema konusu için görüntülerin özelliklerini yapılandırma konusuna bakın.

Statik dosyalar için dizinler oluşturun

Temanız muhtemelen birkaç tür statik dosya içerecektir: stiller, yazı tipleri, JavaScript ve resimler. Her tür, tema klasörünüzde ayrı bir web alt dizininde saklanmalıdır:

 app/design/<alan>/<Satıcı>/<tema>/
├── ağ/
│ ├── css/
│ │ ├── kaynak/ 
│ ├── yazı tipleri/
│ ├── görüntüler/
│ ├── js/

Tema dizini yapınız şimdi

Bu noktada tema dosya yapınız aşağıdaki gibi görünür:

 app/design/frontend/<Satıcı>/
├── <tema>/
│ ├── vb/
│ │ ├── view.xml
│ ├── ağ/
│ │ ├── görseller
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── besteci.json

Tema logosu

Magento uygulamasında, bir logo görüntüsünün varsayılan biçimi ve adı logo.svg . Bir logo.svg görüntüsünü <theme_dir>/web/images dizini olan geleneksel konuma yerleştirdiğinizde, otomatik olarak tema logosu olarak tanınır. Tema uygulandıktan sonra mağaza sayfanızın başlığında görüntülenir.

Özel temanızda, farklı bir ad ve biçime sahip bir logo dosyası kullanabilirsiniz, ancak bunu bildirmeniz gerekebilir.

Bildirimin gerekliliği, temanızın ana temasına ve logo görseline sahip olup olmamasına bağlıdır. Aşağıdaki durumlar mümkündür:

• Temanızın bir ana teması yok:
  • logo resim adınız ve biçiminiz varsayılan ise logo.svg , bunu bildirmenize gerek yoktur;
  • logo resmi adı veya formatı varsayılan değilse, bunu düzende bildirmeniz gerekir.
• Temanızın bir ana teması var:
  • tema logosu resminiz ebeveynin tema logosuyla aynı ada ve biçime sahipse, bunu beyan etmenize gerek yoktur;
  • logo resminizin adı veya biçimi farklıysa, bunu düzende bildirin.

Tema logosunu bildirme

Bir tema logosu bildirmek için, genişleyen bir <theme_dir>/Magento_Theme/layout/default.xml düzeni ekleyin.

Örneğin logo dosyanız my_logo.png boyutunda 300x300px ise, bunu aşağıdaki gibi bildirmeniz gerekir:

 <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>

Logo boyutunun bildirilmesi isteğe bağlıdır.

Magento 2 öğreticisinin tamamını okumak ve Magento 2 hakkındaki en son öğreticileri güncellemek için Magesolution blogunu ziyaret edin.

Kaynak : magento.com