Share
În acest al doilea articol al seriei noastre de dezvoltare a temelor Magento, vom pune bazele noii noastre teme. Vom configura structura directorului de bază al noii noastre teme, vom moșteni din tema Responsabil implicită a Magento, vom plasa CSS, JS și imaginile în locațiile corespunzătoare și vom crea un nou fișier local.xml pentru noua noastră temă pentru a include aceste Fișiere CSS și JS în antetul site-ului nostru. Deci sa începem.
Primul pas în crearea noii noastre teme Magento este setarea structurii de directoare, unde putem plasa noile noastre fișiere tematice. Trebuie să plasăm fișierele tematice în două locații:
Accentsconagua
app / proiectare / front-end folder, unde vom adăuga fișierele noastre phtml și xmlpiele / front-end , unde vom adăuga fișierele noastre imagine CSS, JS și tematiceÎnainte de a începe să creați directoare noi în directoarele menționate mai sus, este mai bine să decideți două nume pe care le vom folosi în mod continuu. Primul va fi numele pachetului nostru - ar putea fi numele companiei dvs., numele autorului temei sau orice altceva - iar al doilea va fi numele temei. Pentru acest tutorial, vom folosi "tutsplus"ca numele pachetului și"vstyle"ca nume de temă. Odată ce aceste două nume sunt hotărâte, să începem să creăm folderele.
Mai întâi, să creăm aceste căi în dosarul nostru pentru aplicații și pentru skin:[Directorul Magento] / app / design / frontend / nume_pachet / theme_name / [Directorul Magento] / skin / frontend / nume_pachet / theme_name /
Ceea ce va deveni în cazul nostru: [Directorul Magento] / app / design / frontend / tutsplus / vstyle / [Magento Directory] / skin / frontend / tutsplus / vstyle /
Odată ce aceste foldere sunt create, să adăugăm aceste patru foldere în app / proiectare / Frontend a / tutsplus / vstyle director:
Și aceste patru dosare în piele / front-end / tutsplus / vstyle pliant:
Să activăm acum tema, pentru a vedea cum arată lucrurile. Pentru asta, du-te la Sistem> Setări> Design, introduceți "tutsplus" în Numele curent al pachetului câmp și "vstyle" în Format câmp și salvați. Acum, reîmprospătați prima pagină a magazinului nostru și veți vedea că întreaga pagină este încurcată. Este în regulă; o vom face să funcționeze moștenind-o din tema implicită implicită a Magento în pasul următor.
Înainte de Magento 1.9, Magento nu avea o funcție tematică pentru copii în ea. Obișnuiam să ne bazăm pe modelul de rezervă al Magento pentru a utiliza tema implicită a Magento pentru a avea grijă de multe caracteristici. Dar, din fericire, acum în versiunea 1.9 a Magento, putem face o temă de copil a oricărei teme și putem extinde aspectul și funcționalitatea fără probleme.
În acest tutorial, vom face noua noastră temă o temă de copil a temei RWD a Magento. Pentru aceasta, trebuie doar să creați un nou fișier tematic.xml în această locație: app / proiectare / Frontend a / tutsplus / vstyle / etc.
Puneți acest cod în acest fișier XML:
RWD / default
Acum, reîmprospătați pagina principală a magazinului Magento și veți vedea un site pe deplin funcțional.
Motivul pentru care site-ul funcționează acum perfect bine este că acum am moștenit noua noastră temă din tema RWD. Asta inseamna ca in timp ce redarea noii noastre teme, daca Magento nu gaseste nici un fisier in aceasta tema noua, va merge si arata in tema Magento RWD, iar daca este gasit acolo, Magento o va folosi.
Deoarece noua noastră temă nu are încă fișiere, toate fișierele sunt preluate din tema RWD a Magento, astfel încât aspectul actual al site-ului nostru este identic cu tema RWD. Dar acum avem flexibilitatea de a edita aceste aspecte prin crearea de fișiere tematice proprii ori de câte ori este nevoie, iar restul fișierelor vor fi moștenite din tema RWD.
Un alt avantaj al utilizării acestei abordări este că, odată cu actualizarea versiunilor Magento, tema Magento RWD este de asemenea actualizată. În acest mod, tema noastră va avea întotdeauna o rezervă pentru cea mai recentă temă Magento pentru a oferi suport pentru cele mai recente caracteristici și corecții de erori.
Acum, vom începe să modificăm această nouă temă pentru copii pe care tocmai am creat-o. Pentru aceasta, să începem prin copierea fișierelor CSS, JS și imagine de pe site-ul nostru HTML în această locație în Magento Magento:
piele / front-end / tutsplus / vstyle /
După cum am menționat mai sus, am creat trei dosare în această locație, și anume js, imagini, fonturi, și css. Plasați fișierele CSS, JS și imagini în dosarele respective.
Doar plasarea acestor fișiere CSS și JS nu le va include în site-ul dvs. Magento. Pentru aceasta, trebuie să le adăugăm manual în blocul de antet al Magento HTML.
În scopul acestui tutorial, vom crea doar un fișier XML și vom plasa toate modificările în acel fișier. Vom numi acest fișier XML local.xml, deoarece acest fișier este redat la sfârșitul tuturor celorlalte fișiere XML și de asemenea suprascrie funcționalitatea altor fișiere XML. Vom crea acest fișier în această locație:
app / proiectare / Frontend a / tutsplus / vstyle / aspect
Odată ce acest fișier este creat, vom adăuga următorul cod în acest fișier, pentru a include fișierele CSS și JS în antetul site-ului nostru.
skin_js js / bootstrap.min.js skin_js js / jquery.carouFredSel-6.2.1-packed.js skin_js js / jquery.easing.1.3.js skin_js js / jquery.elevatezoom.js skin_js js / jquery.flexslider.js skin_js js / owl.carousel.js skin_js js / jquery.sequence-min.js skin_js js / script.min.js css / bootstrap.css css / bootstrapTheme.css css / font-awesome.min.css css / flexslider.css css / owl.carousel.css css / owl.theme.css css / secvență looptheme.css css / style.css css / style8.css
Permiteți-mi să explic codul de mai sus pas cu pas. Sub structura (presupunând că acest mâner este legat de aspect) și mânerul implicit (așa cum va fi folosit pentru toate cazurile implicite), am creat un nou bloc și l-am referit la "cap" - ceea ce înseamnă că aceste modificări vor intra în vigoare numai în bloc "cap". Apoi am folosit două metode de acțiune pentru a adăuga separat fișierele CSS și JS. Pentru adăugarea fișierelor JS, am folosit acest cod XML:
Și pentru a include fișiere CSS, am folosit acest cod XML:
Pentru a vă asigura că aceste fișiere CSS și JS sunt de fapt incluse în noua noastră temă, reîmprospătați pagina principală a magazinului și apăsați Control-U pentru a verifica codul sursă al paginii. Aici, în secțiunea cap, unde ar trebui să vedeți fișierele CSS și JS recent adăugate. Faceți clic pe fiecare dintre aceste link-uri, pentru a vă asigura că acestea fac legătura cu fișierele corespunzătoare și că nu există link-uri întrerupte.
Până acum, sperăm că veți începe deja să vedeți câteva modificări în aspectul site-ului dvs. Tocmai am început să editați această temă. În următorul articol al acestui curs, vom începe să editați fișierele phtml ale antetului, subsolului și ale altor pagini de șablon. Așa arată tema noastră în această etapă.
În secțiunea de comentarii de mai jos, anunțați-ne dacă sunteți în măsură să urmați instrucțiunile până acum. De asemenea, dați-mi voie să știu dacă ți-a plăcut articolul. Ne-ar plăcea să vă auzim opiniile.
