Share
Magento is een verbluffend krachtig e-commerceplatform. In deze miniserie leren we hoe je aan de slag kunt met het platform, de terminologieën leert kennen, een winkel en alle gerelateerde aspecten ervan kunt opzetten en uiteindelijk leren hoe je het kunt aanpassen om het ons eigen te maken..
In dit derde deel zullen we ons concentreren op het proces achter het thema Magento: hoe thema's te installeren, de verschillende concepten die u moet begrijpen om een thema te maken en de algemene bestandsstructuur. Opgewonden? Laten we beginnen!
In het laatste deel hebben we gezien hoe u uw Magento-winkel kunt laten installeren tot klaar voor implementatie, inclusief hoe u uw producten, productcategorieën, belastingen, verzending, betalingsgateways en nog veel meer kunt instellen.
Vandaag bekijken we de basis van Magento-thema's. We leren het algemene idee achter Magento-thema's, de verschillende terminologie erachter en de basisstructuur van een thema.
Ten eerste is het thema Magento niet zo moeilijk als het beweert. Het is een beetje anders dan hoe WordPress of Joomla omgaat met thema's, ja, maar beslist niet moeilijk. Het enige dat je moet weten, is een beetje weten hoe je als een professional met het thema kunt beginnen!
Om het eenvoudig te maken, is een Magento-thema een verzameling PHTML-, CSS- en JS-bestanden die samen met XML-bestanden worden ingezameld om de structuur te definiëren. Een PHTML-bestand bestaat uit normale HTML-markeringen die worden afgewisseld door PHP-code voor de functionaliteit. In het geval dat u in de war bent, ziet een willekeurig codeblok er als volgt uit:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
Zien? Het is heel eenvoudig als je je hoofd eromheen wikkelt. Als je hebt gewerkt met het maken van thema's voor andere systemen, geweldig, dan haal je dit snel op. Zo niet, maak je geen zorgen, ik zal je door het hele proces leiden.
Merk op dat in Magento de voorkant en de achterkant volledig afzonderlijk worden gevild. Ik neem aan dat de meesten van jullie de backend niet hoeven te villen, dus ik blijf alleen aan de frontend plakken.
Voordat we van start gaan, heeft een aantal mensen me via Twitter gemasterd / gemaild met de vraag: hoe een thema te installeren. Ik zal er eerst over praten.
Er zijn twee manieren om een Magento-thema te installeren:
Ik zal het kort over beide hebben.
De eerste methode is degene die je gewend bent. Download een thema, upload het en klaar. Maar u moet weten waar u moet uploaden, omdat dit iets anders werkt dan u zou aannemen.
Thema's zijn verschillend verpakt volgens de bron, maar in de kern heb je 2 mappen:
U kunt deze naar de hoofdmap van de installatie slepen en deze laten samenvoegen met de bestaande gegevens.
Als je toevallig het thema verpakt krijgt als een verzameling van 3 mappen, maak je geen zorgen.
De map met de PHTML-bestanden en de map met de XML-bestanden gaat in root / app / design / frontend / default / themename terwijl degene die de CSS-bestanden, afbeeldingen en andere items bevat, wordt gebruikt root / huid / frontend / default / themename.
Op dit moment is dit alles wat je hoeft te doen. Ik zal uitleggen waarom elk onderdeel later naar een specifieke locatie gaat. U kunt uw thema nu activeren.
Navigeren naar Systeem -> Ontwerp en klik op Ontwerpwijziging toevoegen.
Kies het gewenste thema, klik op opslaan en u bent klaar.
Magento Connect gebruiken is eenvoudiger, mits het daar beschikbaar is. Navigeren naar Systeem -> Magento Connect -> Magento Connect Manager.
Nadat u bent ingelogd, wordt u gevraagd om de extensiesleutel in te voeren van het thema dat u wilt installeren. Ga de sleutel in en wacht tot het systeem zijn ding doet.
Nadat het de benodigde bestanden heeft gedownload en geplaatst waar ze moeten zijn, kunt u nu het thema zoals eerder activeren.
Wanneer je met Magento werkt, zijn er een aantal ontwerpgerelateerde concepten die je nodig hebt om helemaal rond te hangen voordat je het standaardthema kunt aanpassen..
Layouts is een slim, nieuw idee in Magento. Met dit systeem kunt u de pagina's, de pagina's en de structuur van een pagina definiëren via correct gevormde XML-tags.
In wezen kunt u bepalen welk gedeelte van de pagina waar naartoe gaat door slechts enkele attributen in een XML-bestand te wijzigen. Elke weergave of module krijgt de lay-out die is gespecificeerd door zijn eigen XML-bestand.
Layouts in Magento is een groot onderwerp en slechts een paar alinea's zullen hier geen recht aan doen. Onderweg zal ik alle nodige informatie behandelen die je nodig hebt om je eigen thema samen met een uitgebreid artikel over lay-outs te maken om alle geavanceerde dingen te bespreken die je met deze functionaliteit kunt doen.
Voor nu, als je geïnteresseerd bent, is hier een klein fragment om een idee te krijgen van wat lay-outs zijn:
-top container
Sjablonen bestaan uit PHTML-bestanden gevuld met normale HTML-markeringen en PHP-code. Net als bij WordPress, gebruik je een aantal vooraf gedefinieerde methoden om de uitvoer te specificeren. Net als bij andere populaire systemen worden belangrijke secties zoals de koptekst, voettekst en de zijbalk in afzonderlijke bestanden geplaatst en indien nodig ingetrokken.
U kunt verschillende sjablonen hebben voor elke weergave van Magento. U kunt bijvoorbeeld verschillende codes voor een verlanglijstje of een afrekenpagina hebben in plaats van dezelfde look voor de hele site te gebruiken.
Hier is een stukje sjabloon voor de nieuwsgierigen:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> formaat wijzigen (100, 100); ?> "<?php echo $this->htmlEscape ($ this -> getImageLabel ($ _ product, 'small_image'))?>")
Ziet er een beetje rommelig uit, ik weet het, maar haal de PHP-delen eruit en je zult zien hoe vergelijkbaar het is met andere systemen.
Skins zijn niets anders dan de CSS-bestanden, JavaScript-bestanden, afbeeldingen en andere items die u in de opmaak gebruikt om uw ontwerp te maken. In wezen gaan alle niet-PHP-middelen hier naartoe. Lettertypen voor insluiting? Een of andere flitsende flash-demo? Een spannend stuk SVG? Al deze vallen onder deze categorie.
Blokken zijn de integrale bouwstenen van een thema en laten je je thema op een modulaire manier bouwen.
Als onderdeel van lay-outs vormt dit de ruggengraat van Magento's sterke template systeem. Blokken zijn in wezen secties die u kunt verplaatsen met de bovenstaande XML om te wijzigen hoe een pagina wordt gepresenteerd.
Blokken moeten verwijzen naar een relevant sjabloonbestand zodat Magento het vereiste bestand kan ophalen. Een beetje verward? Hier is een voorbeeld.
We definiëren in essentie een nieuw blok, welke sjabloon moet worden geladen door het type blok en een naam op te geven. Het is een beetje anders dan wat we gewend zijn, maar geloof me dat je het krijgt als je eenmaal begint met ontwikkelen. Hoe dan ook, ik zal blokken een beetje meer in detail behandelen wanneer we ons thema aan het bouwen zijn en nog meer zal ik een volledige beschrijving geven van lay-outs en blokkeert de rij dus maak je geen zorgen als het niet compleet is voel nu. Krijg gewoon een algemeen gevoel voor de onderwerpen die voorhanden zijn.
Een structureel blok definieert de basisstructuur van een pagina. Denk aan HTML 5 header, footer en aside sections. Ze zijn gemaakt met het enige doel van visuele afbakening van een ontwerp.
Van de Magento-documenten Inhoudsblokken zijn vergelijkbaar met uw gewone container / wrapper DIV-elementen die u in een ontwerp gebruikt. Net als bij het ontwerp bevat elk inhoudsblok een specifieke functionaliteit of doel. Een menu in uw kop, een bijschrift in de zijbalk, juridische verduidelijkingen in het voetgedeelte gaan allemaal naar afzonderlijke inhoudsblokken.
Vergeet niet dat inhoudsblokken nog steeds blokken zijn en toewijzen aan een specifiek PHTML-bestand om de HTML-inhoud te genereren en weer te geven.
Van de Magento-documenten Vermeld ten slotte omdat dit vanuit een strikt thematisch perspectief van een beginner al een tijdje geen rol zou moeten spelen.
Om simpel te zijn, een interface is een benoemde verzameling thema's die u kunt gebruiken om het uiterlijk van uw winkel te bepalen.
Net als andere krachtige software heeft Magento een complexe bestandsstructuur. Je kunt je focus echter aanzienlijk beperken door mee te nemen.
Dit zijn de locaties waar u aan werkt bij het maken van een thema:
Magento vereist dat je uitvoerbare PHP-inhoud afzonderlijk van je statische assets wordt geplaatst, daarom heb je een aparte skindirectory op je root. Hoewel dit in eerste instantie contraproductief kan lijken, zult u zich realiseren dat deze stap, nadat u uw workflow enigszins heeft aangepast, de algemene beveiliging van uw installatie verhoogt ...
Niettemin wordt een thema meestal opgesplitst in de volgende delen.
En we zijn klaar! We hebben gekeken naar de basisbegrippen achter het thema Magento en het beheren van thema's. Hopelijk was dit nuttig voor jou en je vond het interessant. Aangezien dit voor veel lezers een nogal nieuw onderwerp is, zal ik de commentarensectie die daar binnen zit, nauwlettend in de gaten houden als je twijfelt.
Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Happy codering!
Tot nu toe hebben we strikt theoretisch met het platform te maken gehad. Een noodzaak gezien Magento's grootte en reikwijdte. Maar nu we alle basics hebben vastgespijkerd, kunnen we verder gaan met het leuke gedeelte.
Weet je nog hoe je bij het maken van een skin voor een CMS / generiek systeem altijd begint met een skelet en naar buiten bouwt? Zoals Kubrick voor WordPress? Als je dacht dat we er een gingen nemen en er een thema uit zouden bouwen, dan dacht je verkeerd. Nee meneer. We gaan een op maat gemaakte, kale botten-skin maken die lijkt op de lege skin helemaal opnieuw. Een huid die je zelf kunt gebruiken als basis voor je eigen huid.
Dit alles en meer in de komende delen. Blijf kijken!
Wist je dat je vriendelijke buurt ThemeForest premium Magento-thema's verkoopt? Of je nu een ervaren Magento-ontwikkelaar bent die wil profiteren van je inspanningen, of een koper, in de hoop je eerste eCommerce-winkel te bouwen, we hebben jou gedekt!
Accentsconagua