Share
Magento er en utrolig kraftig e-handelsplattform. I disse miniseriene lærer vi hvordan du kommer i gang med plattformen, lærer terminologiene, etablerer en butikk og alle relaterte aspekter av den, og lærer deg endelig å tilpasse den slik at den blir vår helt egen.
I denne tredje delen fokuserer vi på prosessen bak temaene Magento: hvordan du installerer temaer, de ulike konseptene du trenger å forstå for å lage et tema og den generelle filstrukturen. Spent? La oss komme i gang!
I den siste delen så vi hvordan du får din Magento-butikk fra installert til klar for distribusjon, inkludert hvordan du setter opp dine produkter, produktkategorier, skatter, frakt, betalingsgateways og mange flere.
I dag ser vi på grunnleggende Magento-temaer. Vi lærer den generelle ideen bak Magento-temaene, de ulike terminologiene bak den og den grunnleggende strukturen i et tema.
Først opp, tema Magento er egentlig ikke så vanskelig som det er påstått. Det er litt annerledes enn hvordan WordPress eller Joomla håndterer temaer, ja, men definitivt ikke vanskelig. Alt du trenger å vite er litt å vite hvordan du starter temaet som en proff!
For å gjøre det brutalt enkelt, er et Magento-tema en samling av PHTML-, CSS- og JS-filer som kastes sammen sammen med XML-filer for å definere strukturen. En PHTML-fil består av vanlig HTML-merking spredt av PHP-kode for funksjonaliteten. Hvis du er forvirret, ser en tilfeldig blokk kode ut slik:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
Se? Det er veldig enkelt når du bryter hodet rundt det. Hvis du har jobbet med å skape temaer for andre systemer, flott, vil du plukke opp dette ganske raskt. Hvis ikke, ingen bekymringer, vil jeg gå gjennom hele prosessen.
Legg merke til at i Magento er frontenden og bakenden skinnet helt separat. Jeg antar at de fleste av dere ikke trenger å skinne på baksiden, så jeg holder meg til å temmere frontenden alene.
Før vi begynner, døde en rekke personer meg via Twitter / sendte meg med meg det samme spørsmålet: Hvordan installere et tema. Jeg snakker om det først.
Det er to måter å installere et Magento-tema på:
Jeg snakker kort om begge deler.
Den første metoden er den du er vant til. Last ned et tema, last det opp og gjort. Men du må vite hvor du skal laste opp siden dette virker litt annerledes enn du antar.
Temaer pakkes annerledes i henhold til kilden, men i kjernen har du 2 mapper:
Du kan bare dra disse til roten til installasjonen og la den fusjonere med eksisterende data.
Hvis du ved en tilfeldighet får temaet pakket som en samling av 3 mapper, ikke bekymre deg.
Mappen som inneholder PHTML-filene og den som inneholder XML-filene, går inn i root / app / design / frontend / default / THEME mens den som inneholder CSS-filer, bilder og andre eiendeler går inn i root / hud / frontend / default / THEME.
Akkurat nå er dette alt du trenger å gjøre. Jeg forklarer hvorfor hver del går til et bestemt sted senere. Du kan aktivere temaet ditt nå.
Navigere til System -> Design og klikk på Legg til designendring.
Velg temaet du vil ha, klikk på lagre og du er ferdig.
Bruke Magento Connect er lettere forutsatt at den er tilgjengelig der. Navigere til System -> Magento Connect -> Magento Connect Manager.
Etter at du har logget inn, blir du bedt om å legge inn utvidelsesnøkkelen til temaet du vil installere. Skriv inn nøkkelen og vent på at systemet skal gjøre det.
Etter at den har lastet ned de nødvendige filene og plassert dem der de trenger å være, kan du nå aktivere temaet som før.
Når du jobber med Magento, er det noen designrelaterte begreper du trenger å vikle deg rundt før du kan begynne å endre standardtemaet.
Layouts er en smart, ny ide i Magento. Dette systemet lar deg definere en side, hvilken som helst side, strukturere gjennom ordentlig dannede XML-koder.
I hovedsak kan du diktere hvilken del av siden som går, ved å endre bare noen få attributter i en XML-fil. Hver visning eller modul får det layout som er angitt av sin egen XML-fil.
Layouter i Magento er et stort tema, og bare noen få avsnitt her vil ikke gjøre det rettferdighet. Underveis vil jeg dekke all nødvendig informasjon du trenger for å bygge ditt eget tema sammen med en detaljert artikkel om layout for å dekke alle avanserte ting du kan gjøre med denne funksjonaliteten.
For nå, hvis du er interessert, her er en liten utdrag for å få en ide om hvilke layouter som er:
topp-container
Maler består av PHTML-filer fylt med vanlig HTML-oppføring og PHP-kode. I likhet med WordPress bruker du en rekke forhåndsdefinerte metoder for å spesifisere utdataene. På samme måte som med andre populære systemer, er viktige seksjoner som topptekst, bunntekst og sidebjørnet plassert i separate filer og trukket inn når det er nødvendig.
Du kan ha forskjellige maler for hver visning av Magento. For eksempel kan du ha forskjellig kode for en ønskeliste eller en betalingsside i stedet for å bruke samme utseende for hele nettstedet.
Her er et stykke av en mal for den nysgjerrige:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>>  -> init ($ _ produkt, 'small_image') -> resize (100, 100); ?> )
Ser litt rotete, jeg vet, men striper ut PHP-delene, og du vil se hvordan lignende er det til andre systemer.
Skins er ingenting annet enn CSS-filene, JavaScript-filer, bilder og andre eiendeler du bruker i oppslaget for å lage ditt design. I hovedsak går alle ikke-PHP-eiendeler her. Fonter for innebygning? Noen swanky flash demo? En spiffy stykke SVG? Alle disse faller under denne kategorien.
Blokker er de integrerte byggeblokkene i et tema, og lar deg bygge temaet ditt på en modulær måte.
Som en del av layoutene, danner dette ryggraden i Magentos sterke templeringssystem. Blokker er i hovedsak seksjoner som du kan bevege deg rundt ved hjelp av XML nevnt ovenfor for å endre hvordan en side presenteres.
Blokker må referere til en relevant malfil, slik at Magento kan trekke inn den nødvendige filen. Litt forvirret? Her er et eksempel.
Vi definerer i hovedsak en ny blokk, hvilken mal som skal lastes ved å spesifisere typen blokk og et navn. Det er litt annerledes enn det vi har vært vant til men stoler på at du får det når du begynner å utvikle. Uansett vil jeg dekke blokkene litt mer detaljert når vi bygger temaet vårt, og enda mer, vil jeg gjøre en full skrive opp på layout og blokkerer ned linjen, så vær ikke bekymret hvis den ikke fullfører fornuftig nå. Få en generell følelse for de aktuelle emnene.
En strukturblokk definerer grunnstrukturen på en side. Tenk HTML-topptekst, bunntekst og sideavsnitt. De ble laget for det eneste formål med visuell avgrensning av et design.
Fra Magento-dokumentene Innholdsblokker ligner de vanlige DIV-elementene du bruker i en design. Akkurat som med design inneholder hver innholdsblokk en bestemt funksjonalitet eller hensikt. En meny i overskriften, en utrop i sidelinjen, juridiske avklaringer i footeren går alle inn i separate innholdsblokker.
Husk at innholdsblokker fortsatt er blokker og kart til en bestemt PHTML-fil for å generere og gjengi HTML-innholdet.
Fra Magento-dokumentene Nevnt til slutt, fordi det fra et strengt temaperspektiv av en nybegynner, bør dette ikke komme til spill for en stund.
For å være enkelt, er et grensesnitt en navngitt samling av temaer du kan utnytte for å definere utseendet til butikken din.
I likhet med annen kraftig programvare har Magento en kompleks filstruktur. Men for temaer sammen, kan du begrense fokuset ditt betydelig ned.
Her er de stedene du vil jobbe med når du oppretter et tema:
Magento krever at ditt kjørbare PHP-innhold plasseres separat fra dine statiske eiendeler, og derfor har du en egen hudkatalog på roten din. Selv om dette kanskje virker mot produktiv først, når du har litt tilpasset arbeidsflyten din, vil du innse at dette trekket øker den generelle sikkerheten til installasjonen din ...
Ikke desto mindre er et tema splittet i følgende deler.
Og vi er ferdige! Vi så på de grunnleggende konseptene bak temaene Magento og administrerende temaer. Forhåpentligvis har dette vært nyttig for deg, og du fant det interessant. Siden dette er et ganske nytt emne for mange lesere, vil jeg være nøye med å se på kommentarseksjonen så chime der inne hvis du har noen tvil.
Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg en kommentar. Glad koding!
Så langt har vi jobbet strengt teoretisk med plattformen. En nødvendighet med tanke på Magento størrelse og omfang. Men nå som vi har alle grunnleggende spikret ned, kan vi gå videre til den morsomme delen.
Husk hvordan når du lager en hud for et CMS / generisk system, starter du alltid fra et skjelett og bygger utover? Liker Kubrick for WordPress? Hvis du trodde vi skulle ta en og begynne å bygge et tema ut av det, tenkte du feil. Nei herre. Vi skal bygge en egendefinert, bare bein hud som ligner den tomme huden helt fra bunnen av. En hud du kan bruke selv som en base for din egen hud.
Alt dette og mer i de kommende delene. Følg med!
Visste du at ditt vennlige nabolag ThemeForest selger premium-Magento-temaer? Enten du er en dyktig Magento-utvikler som ønsker å begynne å dra nytte av din innsats, eller en kjøper, håper å bygge din første e-handelsbutikk, har vi dekket deg!
Accentsconagua