Share
In dit tweede artikel van onze reeks Magento-thema's ontwikkelen we de basis van ons nieuwe thema. We zullen de basismapstructuur van ons nieuwe thema instellen, het overnemen van Magento's standaard Responsive-thema, de CSS, JS en afbeeldingen op de juiste locaties plaatsen en een nieuw local.xml-bestand maken voor ons nieuwe thema om deze op te nemen CSS- en JS-bestanden in de header van onze website. Dus laten we beginnen.
De eerste stap bij het maken van ons nieuwe Magento-thema is het instellen van de mappenstructuur, waar we onze nieuwe themabestanden kunnen plaatsen. We moeten onze themabestanden op twee locaties plaatsen:
Accentsconagua
app / design / frontend map, waar we onze phtml- en xml-bestanden zullen toevoegenskin / frontend map, waar we onze CSS, JS en themagerelateerde afbeeldingsbestanden zullen toevoegenVoordat we beginnen met het maken van nieuwe mappen binnen de hierboven genoemde mappen, is het het beste om twee namen te kiezen die we continu gaan gebruiken. De eerste is de naam van ons pakket - dit kan uw bedrijfsnaam zijn, de naam van het thema van de auteur of iets anders - en de tweede is de naam van het thema. Voor deze zelfstudie gebruiken we 'tutsplus'als de pakketnaam en'vstyle'als de naam van het thema. Zodra deze twee namen zijn besloten, gaan we beginnen met het maken van de mappen.
Laten we eerst deze paden maken in onze app- en skinmap:[Magento Directory] / app / ontwerp / frontend / package_name / theme_name / [Magento Directory] / skin / frontend / package_name / theme_name /
Wat in ons geval zal worden: [Magento Directory] / app / ontwerp / frontend / tutsplus / vstyle / [Magento Directory] / skin / frontend / tutsplus / vstyle /
Zodra deze mappen zijn gemaakt, laten we deze vier mappen toevoegen in de app / design / frontend / tutsplus / vstyle directory:
En deze vier mappen in de skin / frontend / tutsplus / vstyle map:
Laten we het thema nu activeren om te zien hoe de dingen eruit zien. Ga daarvoor naar Systeem> Instellingen> Ontwerp, voer 'tutsplus' in de Huidige pakketnaam field en 'vstyle' in de Sjabloon veld en opslaan. Vernieuw nu de voorpagina van onze winkel en u zult zien dat de hele pagina is verknoeid. Dat is goed; we zullen het laten werken door het over te nemen van Magento's standaard responsieve thema in de volgende stap.
Voorafgaand aan Magento 1.9 had Magento geen onderliggende themafunctie. Vroeger vertrouwden we op Magento's fallback-model om het standaardthema van Magento te gebruiken om voor veel functies te zorgen. Maar gelukkig kunnen we nu in Magento versie 1.9 een kindthema maken van elk thema en het uiterlijk en de functionaliteit ervan zonder problemen uitbreiden.
In deze tutorial gaan we van ons nieuwe thema een kindthema maken van Magento's RWD-thema. Daarvoor moeten we gewoon een nieuw theme.xml-bestand maken op deze maplocatie: app / design / frontend / tutsplus / vstyle / etc.
Zet deze code in dit XML-bestand:
rwd / default
Vernieuw nu de voorpagina van je Magento-winkel en je ziet een volledig werkende site.
De reden dat de site nu prima werkt is dat we ons nieuwe thema nu hebben geërfd van het RWD-thema. Dat betekent dat Magento, bij het weergeven van ons nieuwe thema, als het geen enkel bestand vindt in dit nieuwe thema, in het Magento RWD-thema zal kijken, en als het daar wordt gevonden, zal Magento het dan gebruiken.
Omdat ons nieuwe thema nog geen bestanden heeft, worden alle bestanden opgehaald uit het RWD-thema van Magento, dus het huidige uiterlijk van onze site is identiek aan het RWD-thema. Maar nu hebben we de flexibiliteit om deze looks te bewerken door onze eigen themabestanden te maken waar nodig, en alle rest van de bestanden zullen worden overgenomen van het RWD-thema.
Een ander voordeel van het gebruik van deze benadering is dat met de update van Magento-versies ook het Magento RWD-thema vaak wordt bijgewerkt. Op die manier zal ons thema altijd een terugval hebben op het nieuwste Magento-thema om ondersteuning te bieden voor de nieuwste functies en bugfixes.
Nu gaan we dit nieuwe kindthema aanpassen dat we zojuist hebben gemaakt. Laten we daarvoor beginnen met het kopiëren van de CSS-, JS- en afbeeldingsbestanden van onze HTML-site naar deze locatie in onze Magento-winkel:
skin / frontend / tutsplus / vstyle /
Zoals hierboven vermeld, hebben we op deze locatie drie mappen gemaakt, namelijk js, afbeeldingen, fonts, en css. Plaats de CSS-, JS- en afbeeldingsbestanden in hun respectievelijke mappen.
Het plaatsen van deze CSS- en JS-bestanden zal deze niet bevatten op uw Magento-site. Daarvoor moeten we ze handmatig toevoegen aan het headerblok van onze Magento HTML.
Voor deze tutorial zullen we slechts één XML-bestand maken en al onze wijzigingen in dat ene bestand plaatsen. We zullen dat XML-bestand local.xml noemen, omdat dit bestand aan het einde van alle andere XML-bestanden wordt weergegeven en het ook de functionaliteit van andere XML-bestanden opheft. We zullen dit bestand op deze maplocatie maken:
app / design / frontend / tutsplus / vstyle / layout
Nadat dit bestand is gemaakt, zullen we de volgende code in dit bestand toevoegen om de CSS- en JS-bestanden op te nemen in de kop van onze website.
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 / sequentie-looptheme.css css / style.css css / style8.css
Laat me de bovenstaande code stap voor stap uitleggen. Onder de lay-out (waarbij dit handvat gerelateerd is aan de lay-out) en de standaard handle (zoals deze zal worden gebruikt voor alle standaardgevallen), hebben we een nieuw blok gemaakt en ernaar verwezen naar 'head'-dat betekent dat deze wijzigingen alleen in de 'hoofd' blok. Vervolgens hebben we twee actiemethoden gebruikt om CSS- en JS-bestanden afzonderlijk toe te voegen. Voor het toevoegen van JS-bestanden hebben we deze XML-code gebruikt:
En om CSS-bestanden op te nemen, hebben we deze XML-code gebruikt:
Om ervoor te zorgen dat deze CSS- en JS-bestanden daadwerkelijk worden opgenomen in ons nieuwe thema, vernieuwt u de voorpagina van de winkel en drukt u op Besturing U om de broncode van de pagina te controleren. Hier in de kopsectie, waar u uw nieuw toegevoegde CSS- en JS-bestanden zou moeten zien. Klik op elk van die links om te controleren of ze linken naar de juiste bestanden en er zijn geen verbroken koppelingen.
Inmiddels ziet u hopelijk al enkele veranderingen in de weergave van uw website. We zijn net begonnen met het bewerken van dit thema. In het volgende artikel van deze cursus gaan we de phtml-bestanden van de koptekst, voettekst en enkele andere sjabloonpagina's bewerken. Dit is hoe ons thema naar dit stadium kijkt.
Laat het ons weten in het opmerkingengedeelte hieronder of je de instructies tot nu toe kunt volgen. Laat me ook weten of je het artikel leuk vond. We horen graag uw mening.
