Share
Magento är en otroligt kraftfull e-handelsplattform. I dessa miniserier lär vi oss hur vi ska komma igång med plattformen, lära känna terminologierna, skapa en butik och alla relaterade aspekter av det och äntligen lära oss hur vi anpassar det för att göra det till vårt eget.
I den här tredje delen kommer vi att fokusera på processen bakom teman Magento: hur man installerar teman, de olika begrepp som du behöver förstå för att skapa ett tema och den allmänna filstrukturen. Upphetsad? Låt oss börja!
I den sista delen såg vi hur du får din Magento-butik från att installeras för att kunna installeras, inklusive hur du ställer in dina produkter, produktkategorier, skatter, frakt, betalningsgränser och många fler.
Idag ser vi på grunderna i Magento-teman. Vi lär oss den allmänna idén bakom Magento-teman, de olika terminologierna bakom den och det grundläggande tematiska strukturen.
Först och främst är teman Magento inte så svårt som det påstås. Det är lite annorlunda än hur WordPress eller Joomla hanterar teman, ja, men definitivt inte svårt. Allt du behöver veta är lite vet hur du börjar theming som ett proffs!
För att göra det brutalt enkelt är ett Magento-tema en samling av PHTML, CSS och JS-filer som kastas ihop tillsammans med XML-filer för att definiera strukturen. En PHTML-fil består av regelbunden HTML-markering som spridas av PHP-kod för funktionaliteten. Om du är förvirrad ser ett slumpmässigt block av kod ut så här:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
Se? Det är väldigt enkelt när du lägger huvudet runt det. Om du har arbetat med att skapa teman för andra system, bra, tar du upp det här ganska snabbt. Om inte, inga bekymmer, jag går igenom hela processen.
Observera att i Magento skinnas främre änden och bakänden helt separat. Jag antar att de flesta av dig inte kommer behöva skina backend så jag håller fast vid teman på framsidan ensam.
Innan vi börjar, skickade ett antal personer mig via Twitter / mailade mig och frågade samma fråga: hur man installerar ett tema. Jag ska prata om det först.
Det finns två sätt att installera ett Magento-tema:
Jag ska prata kort om båda.
Den första metoden är den du är van vid. Ladda ner ett tema, ladda upp det och gjort det. Men du måste veta var du ska ladda upp eftersom det här fungerar lite annorlunda än du antar.
Teman är förpackad annorlunda enligt källan men i kärnan har du 2 mappar:
Du kan bara dra dessa till roten på installationen och låta den sammanfoga med befintliga data.
Om du av en slump får du temat förpackat som en samling av 3 mappar, oroa dig inte.
Mappen som innehåller PHTML-filer och den som innehåller XML-filerna går in i root / app / design / frontend / default / THEME medan den som innehåller CSS-filer, bilder och andra tillgångar går in i root / hud / frontend / default / THEME.
Just nu är det allt du behöver göra. Jag förklarar varför varje del går till en viss plats senare nedan. Du kan aktivera ditt tema nu.
Navigera till System -> Design och klicka på Lägg till designändring.
Välj det tema du vill ha, klicka på Spara och du är klar.
Använda Magento Connect är lättare förutsatt att den är tillgänglig där. Navigera till System -> Magento Connect -> Magento Connect Manager.
Efter inloggning kommer du att bli ombedd att ange förlängningsnyckeln för det tema du vill installera. Skriv in nyckeln och vänta på att systemet ska göra det.
Efter att ha laddat ned de nödvändiga filerna och placerat dem där de behöver vara kan du nu aktivera temat som tidigare.
När du jobbar med Magento finns det några designrelaterade begrepp som du behöver sätta på dig innan du kan börja ändra modifieringstema.
Layouts är en smart, ny idé i Magento. Med det här systemet kan du definiera en sida, vilken sida som helst, strukturera genom korrekt formaterade XML-taggar.
I huvudsak kan du diktera vilken del av sidan som går där genom att ändra bara några attribut i en XML-fil. Varje vy eller modul får den layout som anges av sin egen XML-fil.
Layouts i Magento är ett stort ämne och bara några stycken här gör det inte rättvisa. Under vägen täcker jag all nödvändig information som du behöver bygga ditt eget tema tillsammans med en detaljerad artikel om layouter för att täcka alla avancerade saker du kan göra med denna funktion.
För närvarande, om du är intresserad, här är ett litet fragment för att få en uppfattning om vilka layouter som är:
top-behållare
Mallar består av PHTML-filer fyllda med regelbunden HTML-markup och PHP-kod. På samma sätt som WordPress använder du ett antal fördefinierade metoder för att specificera produktionen. Precis som med andra populära system placeras viktiga avsnitt som rubrik, sidfot och sidofält i separata filer och dras in när det behövs.
Du kan ha olika mallar för varje vy av Magento. Till exempel kan du ha olika kod för en önskelista eller en kassa sida istället för att använda samma utseende för hela webbplatsen.
Här är en bit av en mall för nyfiken:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>>  -> init ($ _ produkt, 'small_image') -> resize (100, 100); ?> )
Ser lite rörigt ut, jag vet men tar bort PHP-delarna och du ser hur liknande det är för andra system.
Skinn är inget annat än CSS-filer, JavaScript-filer, bilder och andra tillgångar du använder i markeringen för att skapa din design. I huvudsak går alla icke-PHP-tillgångar här. Typsnitt för inbäddning? Vissa swanky flash demo? En spiffy bit av SVG? Alla dessa faller under denna kategori.
Block är de integrerade byggstenarna i ett tema och låter dig bygga ditt tema på ett modulärt sätt.
Som en del av layouter bildar detta ryggraden i Magentos starka templerande system. Block är i huvudsak sektioner som du kan flytta runt med XML som nämns ovan för att ändra hur en sida presenteras.
Block måste referera till en relevant mallfil så att Magento kan dra in den önskade filen. Lite förvirrad? Här är ett exempel.
Vi definierar väsentligen ett nytt block, vilken mall som ska laddas genom att specificera typen av block och ett namn. Det är lite annorlunda än vad vi har varit vana vid men litar på mig att du kommer att få det när du börjar utvecklas. Hur som helst, jag täcker blocken lite mer i detalj när vi bygger vårt tema och ännu mer jag gör en fullständig skrivning på layouter och blockerar ner linjen så oroa dig inte om det inte klarar sig känna nu. Få en allmän känsla för de aktuella ämnena.
Ett strukturblock definierar grundstrukturen på en sida. Tänk på HTML 5-rubrik, sidfot och sidor. De skapades för det enda syftet med visuell avgränsning av en design.
Från Magento-dokumenten Innehållsblock liknar dina vanliga DIV-element för behållare / omslag som du använder i en design. Precis som med design innehåller varje innehållsblok en specifik funktionalitet eller syfte. En meny i din rubrik, en callout i sidofältet, juridiska förtydliganden i sidfoten går alla in i separata innehållsblock.
Kom ihåg att innehållsblokken fortfarande är block och kartlägga till en specifik PHTML-fil för att generera och göra dess HTML-innehåll.
Från Magento-dokumenten Nämnde äntligen för att det inte skulle komma till spel för en stund under ett strängt temaperspektiv av en nybörjare.
För att vara enkelt är ett gränssnitt en namngiven samling teman som du kan utnyttja för att definiera utseendet på din butik.
Precis som annan kraftfull mjukvara har Magento en komplex filstruktur. Men för teman längs, kan du begränsa ditt fokus ner betydligt.
Här är de platser du ska jobba på när du skapar ett tema:
Magento kräver att ditt körbara PHP-innehåll placeras separat från dina statiska tillgångar, varför du har en separat hudkatalog på din rot. Även om detta kan verka kontraproduktivt först, när du en gång har anpassat ditt arbetsflöde något, kommer du att inse att detta drag ökar den allmänna säkerheten för din installation ...
Ändå delas ett tema vanligtvis i följande delar.
Och vi är klara! Vi tittade på de grundläggande begreppen bakom teman Magento och hanterar teman. Förhoppningsvis har det varit användbart för dig och du tyckte det var intressant. Eftersom det här är ett ganska nytt ämne för många läsare kommer jag att vara noga med att titta på kommentarerna så chime där om du har några tvivel.
Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Lycklig kodning!
Hittills har vi hanterat strikt teoretiskt med plattformen. En nödvändighet med tanke på Magentos storlek och omfattning. Men nu när vi har alla grunderna nailed ner kan vi gå vidare till den roliga delen.
Kom ihåg hur man skapar en hud för ett CMS / generiskt system, börjar du alltid från ett skelett och bygga utåt? Gilla Kubrick för WordPress? Om du trodde att vi skulle ta en och börja bygga ett tema ut av det, tänkte du fel. Nej, herrn. Vi kommer att bygga en anpassad, nakna benhår som liknar den tomma huden helt från början. En hud som du kan använda som en bas för din egen hud.
Allt detta och mer i de kommande delarna. Håll dig igång!
Visste du att din vänliga stadsdel ThemeForest säljer högkvalitativa Magento-teman? Oavsett om du är en skicklig Magento-utvecklare som vill börja dra nytta av dina ansträngningar, eller en köpare, hoppas kunna bygga din första e-handelsbutik, har vi täckt dig!
Accentsconagua