Share
I denne andre artikkelen i vår Magento-temautviklingsserie skal vi sette grunnlaget for vårt nye tema. Vi oppretter den grunnleggende katalogstrukturen til vårt nye tema, arver det fra Magentos standard Responsive Theme, legger CSS, JS og bilder på de aktuelle stedene, og oppretter en ny local.xml-fil for vårt nye tema for å inkludere disse CSS og JS filer inn i vår nettside header. Så, la oss komme i gang.
Det første trinnet i å skape vårt nye Magento-tema er å sette opp mappestrukturen, der vi kan plassere våre nye temafiler. Vi må plassere våre temafiler på to steder:
Accentsconagua
app / design / frontend mappe, hvor vi legger til våre phtml- og xml-filerhud / frontend mappe, hvor vi legger til våre CSS, JS og tema relaterte bildefilerFør vi begynner å lage nye kataloger i de ovennevnte katalogene, er det best å bestemme to navn vi skal bruke kontinuerlig. Den første vil være navnet på vår pakke - det kan være ditt firmanavn, temaforfatterens navn eller noe - og det andre blir navnet på temaet. For denne opplæringen bruker vi 'tutsplus'som pakkenavnet og'vstyle'som tema navn. Når disse to navnene er avgjort, la oss begynne å lage mappene.
La oss først lage disse banene i vår app- og hudmappe:[Magento Directory] / app / design / frontend / package_name / theme_name / [Magento Directory] / skin / frontend / package_name / theme_name /
Som i vårt tilfelle vil bli: [Magento Directory] / app / design / frontend / tutsplus / vstyle / [Magento Directory] / hud / frontend / tutsplus / vstyle /
Når disse mappene er opprettet, la vi legge til disse fire mappene i app / design / frontend / tutsplus / vstyle katalogen:
Og disse fire mappene i hud / frontend / tutsplus / vstyle mappe:
La oss aktivere temaet nå, for å se hvordan ting ser ut. For det, gå til System> Innstillinger> Design, skriv inn 'tutsplus' i Nåværende pakke navn felt og 'vstyle' i Mal feltet, og lagre. Oppdater nå forsiden av butikken vår, så ser du at hele siden er ødelagt. Det er ok; Vi får det til å fungere ved å arve det fra Magento standard responsive tema i neste trinn.
Før Magento 1.9 hadde Magento ikke et barntema i den. Vi pleide å stole på Magentos fallbackmodell for å bruke Magento standardtema for å ta vare på mange funksjoner. Men heldigvis, nå i Magento versjon 1.9, kan vi lage et tema for barn hvert tema, og utvide utseende og funksjonalitet uten problem.
I denne opplæringen skal vi gjøre vårt nye tema et barn tema for Magento RWD tema. For det må vi bare lage en ny theme.xml-fil i denne mappens plassering: app / design / frontend / tutsplus / vstyle / etc.
Sett denne koden i denne XML-filen:
RWD / default
Oppdater nå forsiden av Magento-butikken din, og du vil se et fullt fungerende nettsted.
Grunnen til at nettstedet fungerer nå helt greit er at vi nå har arvet vårt nye tema fra RWD-temaet. Det betyr at når Magento ikke finner noen fil i dette nye temaet, vil det se ut i Magento RWD-temaet, og hvis det finnes Magento vil det da bruke det.
Siden vårt nye tema ikke har noen filer ennå, hentes alle filene fra Magento's RWD-tema, slik at vårt nåværende utseende er identisk med RWD-temaet. Men nå har vi fleksibiliteten til å redigere disse utseende ved å lage egne temafiler hvor det er nødvendig, og resten av filene blir arvet fra RWD-temaet.
En annen fordel ved å bruke denne tilnærmingen er at Magento RWD-temaet med oppdateringen av Magento-versjoner også ofte oppdateres. På den måten vil temaet vårt alltid ha et fallback på det nyeste Magento-temaet for å gi støtte for de nyeste funksjonene og feilrettingene.
Nå begynner vi å endre dette nye barnet temaet som vi nettopp har opprettet. For det, la oss starte med å kopiere CSS, JS og bildefiler fra vår HTML-side til denne plasseringen i Magento-butikken vår:
hud / frontend / tutsplus / vstyle /
Som nevnt ovenfor har vi opprettet tre mapper på denne plasseringen, nemlig js, bilder, fonter, og css. Plasser CSS, JS og bildefiler i deres respektive mapper.
Bare å plassere disse CSS- og JS-filene vil ikke inkludere dem på Magento-siden din. For det må vi manuelt legge dem til toppteksten av Magento HTML.
I denne veiledningen vil vi bare opprette en XML-fil, og legge alle endringene i den ene filen. Vi kaller den XML-filen local.xml, da denne filen blir gjengitt på slutten av alle andre XML-filer, og det tilsidesätter også funksjonaliteten til andre XML-filer. Vi lager denne filen i denne mappens plassering:
app / design / frontend / tutsplus / vstyle / layout
Når denne filen er opprettet, legger vi til følgende kode i denne filen, for å inkludere CSS- og JS-filene i webområdets overskrift.
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 / sekvens-looptheme.css css / style.css css / style8.css
La meg forklare ovennevnte kode trinn for trinn. Under oppsett (som innebærer at dette håndtaket er relatert til oppsettet) og standardhåndtaket (da dette vil bli brukt for alle standard tilfeller), opprettet vi en ny blokk og refererte den til "head" - det betyr at disse endringene bare får virkning i 'hodet' blokk. Deretter har vi brukt to handling metoder for å legge til CSS og JS filer separat. For å legge til JS-filer, har vi brukt denne XML-koden:
Og for å inkludere CSS-filer, har vi brukt denne XML-koden:
For å sikre at disse CSS- og JS-filene faktisk er inkludert i vårt nye tema, oppdaterer du butikkens forside, og trykker på Kontroll-U for å sjekke sidens kildekode. Her i hovedenheten, hvor du bør se dine nylig lagt til CSS- og JS-filer. Klikk på hver av disse linkene for å sikre at de kobler til riktige filer, og det er ingen ødelagte koblinger.
Forhåpentligvis begynner du allerede å se noen endringer i nettstedets utseende. Vi har nettopp kommet i gang med å redigere dette temaet. I neste artikkel av dette kurset begynner vi å redigere phtml-filene i overskriften, bunnteksten og noen andre malingssider. Slik ser vårt tema på dette stadiet.
I kommentarfeltet nedenfor, gi oss beskjed hvis du er i stand til å følge instruksjonene så langt. Også, gi meg beskjed hvis du likte artikkelen. Vi vil gjerne høre dine meninger.
