În acest al doilea articol despre dezvoltarea de teme pentru Magento vom efectua configurarea de bază a noilor noastre teme. Vom configura structura de bază a dosarelor noii noastre temă, va fi moștenită de tema implicită adaptivă Magento, aranja CSS, JS, și imaginile în directorul corespunzător și de a crea un nou fișier pentru local.xml noastre noi teme pentru a insera fișierele CSS și JS într-o pălărie site-ul. Deci, să începem.
Crearea unei noi structuri de director de subiecte
Primul pas în crearea unei noi tematici este de a configura structura folderului, unde putem aranja fișierele pentru noua noastră temă. Trebuie să plasăm fișierele temei noastre în două locuri.
- în folderul app / design / frontend. unde vom aranja fișierele noastre phtml și xml.
- în directorul skin / frontend. unde vom adăuga CSS, JS și imagini care participă la tema noastră
[Director Magento] / app / design / frontend ///
[Magento Directory] / skin / frontend ///
Ceea ce va fi în cazul nostru:
[Directorul Magento] / app / design / frontend / tutsplus / vstyle /
[Magento Directory] / skin / frontend / tutsplus / vstyle /
Când aceste foldere sunt create, să adăugăm aceste patru foldere în directorul app / design / frontend / tutsplus / vstyle:
Și aceste patru dosare în folderul skin / frontend / tutsplus / vstyle
Activarea unei teme
Să activăm acum subiectul pentru a vedea cum sunt lucrurile. Pentru aceasta, mergeți la System> Settings> Design. introduceți "tutsplus" în câmpul Nume pachet curent și "vstyle" în câmpul Șablon și salvați. Acum reîmprospătați pagina site-ului și veți vedea că totul de pe pagină este încurcat. Acest lucru este normal, vom moșteni de la tema standard de adaptare Magento pentru a face să funcționeze.
moștenire
Înainte de versiunea 1.9 Magento nu a existat suport pentru temele copilului. Ne bazăm pe modelul Magento, în care folosim tema implicită Magento pentru a procesa multe detalii. Dar, din fericire, acum, în Magento 1.9, putem face o temă copilă pentru orice altă temă și putem extinde aspectul și funcționalitatea fără probleme.
În acest training, vom face subiectul nostru ca o filială a temei RWD. Pentru a face acest lucru, trebuie doar să creați un nou fișier tematic.xml de-a lungul acestei căi: app / design / frontend / tutsplus / vstyle / etc
Inserați codul în acest fișier XML:
Acum, actualizați site-ul și veți vedea un site complet de lucru.
Site-ul funcționează acum cum era de așteptat, deoarece am moștenit noua noastră temă din tema RWD. Acest lucru înseamnă că, atunci când construirea tema noastră dacă Magento nu găsește nici un fișier în această nouă temă, se pare în tema RWD Magento și, dacă este găsit, se folosește.
Deoarece nu există încă un fișier în subiectul nostru, toate fișierele sunt obținute din tema Magento RWD, astfel încât vizualizarea curentă a temei noastre este identică cu tema RWD. Dar acum avem ocazia să editați în mod flexibil această vizualizare, creând fișiere de tema proprie acolo unde este necesar și toate celelalte fișiere vor fi moștenite din tema RWD.
Un alt avantaj al utilizării acestei abordări este că atunci când actualizați versiunea Magento, tema RWD este, de asemenea, actualizată adesea. Prin urmare, tema noastră va avea întotdeauna în rezervă ultimul subiect al Magento care oferă cele mai recente caracteristici și editări de bug-uri.
Acum vom începe să modificăm această temă nouă pe care am creat-o. Pentru a face acest lucru, să copiem CSS, JS și fișierele imagine de pe site-ul nostru HTML de-a lungul acestei căi în Magento Magento:
După cum am menționat mai sus, am creat patru foldere de-a lungul acestei căi, denumindu-le js, imagini, fonturi și css. Plasați CSS, JS și fișiere imagine în dosarele corespunzătoare.
Crearea unui nou fișier local.xml
Pur și simplu punerea acestor fișiere CSS și JS în acest dosar nu le va adăuga pe site-ul nostru Magento. Pentru a face acest lucru, trebuie să le adăugăm manual în blocul de antet în HTML Magento.
În scopul instruirii noastre, am creat un singur fișier XML și vom posta toate modificările noastre în acest fișier. Am denumit acest fișier local.xml deoarece acest fișier este procesat după toate celelalte fișiere XML și suprascrie funcționalitatea tuturor celorlalte fișiere XML. Vom crea acest fișier de-a lungul acestei căi:
Când acest fișier este creat, adăugați următorul cod în acest fișier pentru a adăuga fișiere CSS și JS în secțiunea cap.
Voi explica codul de mai sus în pași. Aspectul procesorului (presupune că handler este asociat cu schema) am creat un bloc nou și a făcut referire lui la „cap“ și implicit manipulant (acesta va fi utilizat în toate celelalte cazuri, implicit) - acest lucru înseamnă că aceste modificări vor fi utilizate numai pentru blocul "cap". Apoi, am folosit două metode în eticheta "acțiune" pentru a adăuga separat fișierele CSS și JS. Pentru a adăuga fișiere JS, am folosit acest cod XML:
Și pentru a adăuga fișiere CSS am folosit acest cod XML:
Sper că ați început să vedeți câteva modificări în afișarea site-ului dvs. Web. Tocmai am început să editați acest subiect. În următorul articol, vom începe să editați fișierele phtml ale antetului, subsolului și ale altor pagini ale șablonului. În această etapă, tema arată astfel.
Articole similare
Trimiteți-le prietenilor: