Share
I den här andra artikeln i vår Magento-temasutvecklingsserie kommer vi att grunda vårt nya tema. Vi ska ställa in den grundläggande katalogstrukturen för vårt nya tema, ärva det från Magento standard Responsive theme, placera CSS, JS och bilder på lämpliga platser och skapa en ny local.xml-fil för vårt nya tema för att inkludera dessa CSS och JS-filer till vår hemsida. Så, låt oss börja.
Det första steget i att skapa vårt nya Magento-tema är att skapa mappstrukturen, där vi kan placera våra nya temafiler. Vi måste placera våra temafiler på två platser:
Accentsconagua
app / design / frontend mapp, där vi lägger till våra phtml och xml-filerhud / frontend mapp, där vi lägger till våra CSS, JS och temarelaterade bildfilerInnan vi börjar skapa nya kataloger i de ovannämnda katalogerna är det bäst att bestämma två namn vi ska använda kontinuerligt. Den första kommer att vara namnet på vårt paket - det kan vara ditt företags namn, temaförfattarens namn eller något - och det andra kommer att vara namnet på temat. För denna handledning använder vi "tutsplus'som paketets namn och'vstyle"som temanamnet. När dessa två namn har bestämts, låt oss börja skapa mapparna.
Låt oss först skapa dessa banor i vår app- och hudmapp:[Magento Directory] / app / design / frontend / package_name / theme_name / [Magento Directory] / hud / frontend / package_name / theme_name /
Vilket i vårt fall kommer att bli: [Magento Directory] / app / design / frontend / tutsplus / vstyle / [Magento Directory] / hud / frontend / tutsplus / vstyle /
När dessa mappar har skapats, låt oss lägga till de fyra mapparna i app / design / frontend / tutsplus / vstyle katalogen:
Och dessa fyra mappar i hud / frontend / tutsplus / vstyle mapp:
Låt oss aktivera temat nu, för att se hur sakerna ser ut. För det, gå till System> Inställningar> Design, skriv in 'tutsplus' i Nuvarande paketnamn fält och "vstyle" i Mall fält och spara. Uppdatera nu framsidan i vår butik, så ser du att hela sidan är krossad. Det är okej; Vi kommer att få det att fungera genom att ärva det från Magentos standardiserande tema i nästa steg.
Före Magento 1.9 hade Magento inte ett barntema i den. Vi brukade förlita sig på Magentos fallbackmodell för att använda Magento standardtema för att ta hand om många funktioner. Men tack och lov, nu i Magento version 1.9, kan vi göra ett barntema av något tema och utvidga sitt utseende och funktionalitet utan problem.
I denna handledning kommer vi att göra vårt nya tema ett barntema för Magento RWD-tema. För det behöver vi helt enkelt skapa en ny theme.xml-fil i den här mappens plats: app / design / frontend / tutsplus / vstyle / etc.
Sätt den här koden i den här XML-filen:
RWD / default
Uppdatera nu framsidan på din Magento-butik, så ser du en helt fungerande webbplats.
Anledningen till att webbplatsen nu fungerar helt bra är att vi nu har ärft vårt nya tema från RWD-temat. Det betyder att även om Magento inte hittar någon fil i det här nya temat, kommer det att gå och titta i Magento RWD-temat, och om det finns Magento kommer det att använda det.
Eftersom vårt nya tema ännu inte har några filer, hämtas alla filer från Magento RWD-tema, så den nuvarande utseendet på vår webbplats är identisk med RWD-temat. Men nu har vi flexibiliteten att redigera dessa utseende genom att skapa egna temafiler där det behövs, och resten av filerna kommer att vara ärvda från RWD-temat.
En annan fördel med att använda detta tillvägagångssätt är att Magento RWD-temat också uppdateras med uppdateringen av Magento-versionerna. På så sätt kommer vårt tema alltid att ha en återgång på det senaste Magento-temat för att ge stöd för de senaste funktionerna och buggfixarna.
Nu börjar vi ändra det nya barntema som vi just skapat. För det börjar vi att kopiera CSS, JS och bildfiler från vår HTML-sida till den här platsen i vår Magento-butik:
hud / frontend / tutsplus / vstyle /
Som nämnts ovan har vi skapat tre mappar på den här platsen, nämligen js, bilder, typsnitt, och css. Placera CSS, JS och bildfiler i respektive mappar.
Att bara placera dessa CSS- och JS-filer kommer inte att inkludera dem på din Magento-webbplats. För det måste vi manuellt lägga till dem i rubrikblocket i vår Magento HTML.
För syftet med denna handledning skapar vi bara en XML-fil och lägger alla våra ändringar i den ena filen. Vi namnger den XML-filen local.xml, eftersom den här filen görs i slutet av alla andra XML-filer, och det överstyrar också funktionaliteten för andra XML-filer. Vi skapar den här filen i den här mappen:
app / design / frontend / tutsplus / vstyle / layout
När denna fil har skapats lägger vi till följande kod i den här filen, för att inkludera CSS- och JS-filerna i vår webbplatsrubrik.
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
Låt mig förklara ovanstående kod steg för steg. Under layout (vilket innebär att detta handtag är relaterat till layout) och standardhandtaget (eftersom det kommer att användas för alla standardfall) skapade vi ett nytt block och hänvisade det till "head" - det betyder att dessa ändringar endast kommer att träda i kraft i 'huvud' block. Därefter har vi använt två åtgärdsmetoder för att lägga till CSS och JS-filer separat. För att lägga till JS-filer har vi använt den här XML-koden:
Och för att inkludera CSS-filer har vi använt den här XML-koden:
För att säkerställa att dessa CSS- och JS-filer faktiskt ingår i vårt nya tema, uppdatera butikens startsida och tryck på Kontroll-U för att kontrollera sidans källkod. Här i huvudavsnittet, där du ska se dina nyligen tillagda CSS- och JS-filer. Klicka på var och en av dessa länkar, för att se till att de länkar till korrekta filer, och det finns inga trasiga länkar.
Förhoppningsvis börjar du redan nu se några förändringar på webbplatsens utseende. Vi har just börjat redigera detta tema. I nästa artikel i kursen börjar vi redigera phtml-filerna i rubriken, sidfot och några andra mallsidor. Så här ser vårt tema på detta stadium.
I kommentarfältet nedan, låt oss veta om du kan följa instruktionerna hittills. Låt mig också veta om du gillade artikeln. Vi skulle gärna höra era åsikter.
