Share
In diesem zweiten Artikel unserer Magento-Themenentwicklungsreihe werden wir die Grundlage für unser neues Thema schaffen. Wir werden die grundlegende Verzeichnisstruktur unseres neuen Themas einrichten, sie von Magentos Standard-Responsive-Design übernehmen, CSS, JS und Bilder an den entsprechenden Speicherorten platzieren und eine neue local.xml-Datei für unser neues Theme erstellen, um diese aufzunehmen CSS- und JS-Dateien in den Header unserer Website. Also lasst uns anfangen.
Der erste Schritt beim Erstellen unseres neuen Magento-Themes ist das Einrichten der Ordnerstruktur, in der wir unsere neuen Themendateien ablegen können. Wir müssen unsere Themendateien an zwei Orten platzieren:
Accentsconagua
App / Design / Frontend Ordner, in dem wir unsere HTML- und XML-Dateien hinzufügenskin / frontend Ordner, wo wir unsere CSS-, JS- und Theme-bezogenen Bilddateien hinzufügen werdenBevor wir mit dem Erstellen neuer Verzeichnisse in den oben genannten Verzeichnissen beginnen, sollten Sie zwei Namen auswählen, die wir fortlaufend verwenden möchten. Der erste wird der Name unseres Pakets sein - es könnte der Firmenname, der Name des Designautors oder irgendetwas sein - und der zweite ist der Name des Themas. Für dieses Tutorial verwenden wir 'tutsplus'als Paketname und'vstyle'als Name des Themas. Sobald diese beiden Namen festgelegt sind, beginnen wir mit dem Erstellen der Ordner.
Zunächst erstellen wir diese Pfade in unserem App- und Skin-Ordner:[Magento-Verzeichnis] / app / design / frontend / Paketname / Themenname / [Magento-Verzeichnis] / skin / frontend / Paketname / Themenname /
Was in unserem Fall wird: [Magento-Verzeichnis] / app / design / frontend / tutsplus / vstyle / [Magento-Verzeichnis] / skin / frontend / tutsplus / vstyle /
Nachdem Sie diese Ordner erstellt haben, fügen Sie diese vier Ordner im Ordner hinzu App / Design / Frontend / Tutsplus / Vstyle Verzeichnis:
Und diese vier Ordner in der skin / frontend / tutsplus / vstyle Mappe:
Lassen Sie uns jetzt das Thema aktivieren, um zu sehen, wie die Dinge aussehen. Dafür gehen Sie zu System> Einstellungen> Design, Geben Sie 'tutsplus' in das Feld ein Aktueller Paketname Feld und "vstyle" in der Vorlage Feld und speichern. Aktualisieren Sie jetzt die Titelseite unseres Shops, und Sie werden feststellen, dass die gesamte Seite fehlerhaft ist. Das ist okay; Wir machen es zum Erfolg, indem wir es im nächsten Schritt von Magentos Standard-Responsive Theme erben.
Vor Magento 1.9 hatte Magento kein untergeordnetes Thema. Früher haben wir uns auf das Fallback-Modell von Magento verlassen, um das Standarddesign von Magento für viele Funktionen zu nutzen. Glücklicherweise können wir jetzt in der Magento-Version 1.9 ein untergeordnetes Thema für jedes Thema erstellen und dessen Aussehen und Funktionalität problemlos erweitern.
In diesem Tutorial werden wir unser neues Thema zu einem Kindenthema von Magentos RWD-Thema machen. Dafür müssen wir einfach eine neue theme.xml-Datei in diesem Ordner erstellen: app / design / frontend / tutsplus / vstyle / etc.
Fügen Sie diesen Code in diese XML-Datei ein:
rwd / default
Aktualisieren Sie jetzt die Titelseite Ihres Magento-Stores, und Sie sehen eine vollständig funktionierende Site.
Der Grund, warum die Seite nun perfekt funktioniert, ist, dass wir unser neues Thema jetzt vom RWD-Thema geerbt haben. Das heißt, wenn Magento beim Rendern unseres neuen Themas keine Datei in diesem neuen Design findet, wird es im Magento RWD-Design nachgeschlagen, und wenn es dort gefunden wird, wird es von Magento verwendet.
Da unser neues Design noch keine Dateien enthält, werden alle Dateien von Magentos RWD-Theme abgerufen. Das aktuelle Erscheinungsbild unserer Website ist daher identisch mit dem RWD-Theme. Jetzt haben wir jedoch die Flexibilität, diese Looks zu bearbeiten, indem wir unsere eigenen Designdateien erstellen, wo immer dies erforderlich ist. Alle übrigen Dateien werden vom RWD-Design übernommen.
Ein weiterer Vorteil dieses Ansatzes ist, dass mit dem Update der Magento-Versionen auch das Magento RWD-Design häufig aktualisiert wird. Auf diese Weise hat unser Thema immer einen Rückfall auf das neueste Magento-Thema, um Unterstützung für die neuesten Funktionen und Fehlerbehebungen zu bieten.
Nun beginnen wir mit der Modifizierung dieses neuen untergeordneten Designs, das wir gerade erstellt haben. Dazu kopieren wir zunächst die CSS-, JS- und Bilddateien von unserer HTML-Site an diesen Speicherort in unserem Magento-Shop:
skin / frontend / tutsplus / vstyle /
Wie bereits erwähnt, haben wir an diesem Ort drei Ordner erstellt, nämlich js, Bilder, Schriftarten, und css. Platzieren Sie die CSS-, JS- und Bilddateien in den entsprechenden Ordnern.
Wenn Sie diese CSS- und JS-Dateien dort ablegen, werden sie nicht in Ihre Magento-Site aufgenommen. Dazu müssen wir sie manuell in den Header-Block unseres Magento-HTML-Codes einfügen.
In diesem Lernprogramm erstellen wir nur eine XML-Datei. Alle Änderungen werden in dieser einen Datei gespeichert. Wir nennen diese XML-Datei local.xml, da diese Datei am Ende aller anderen XML-Dateien gerendert wird und auch die Funktionalität anderer XML-Dateien überschreibt. Wir erstellen diese Datei in diesem Ordner:
App / Design / Frontend / Tutsplus / Vstyle / Layout
Sobald diese Datei erstellt wurde, fügen wir den folgenden Code in diese Datei ein, um die CSS- und JS-Dateien in den Header unserer Website aufzunehmen.
skin_js js / bootstrap.min.js skin_js js / jquery.carouFredSel-6.2.1-package.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 / sequence-looptheme.css css / style.css css / style8.css
Lassen Sie mich den obigen Code Schritt für Schritt erklären. Beim Layout (das bedeutet, dass dieses Handle sich auf das Layout bezieht) und beim Standard-Handle (da dies für alle Standardfälle verwendet wird) haben wir einen neuen Block erstellt und auf 'head' verwiesen. Dies bedeutet, dass diese Änderungen nur im wirksam werden "Kopf" -Block. Als Nächstes haben wir zwei Aktionsmethoden verwendet, um CSS- und JS-Dateien separat hinzuzufügen. Zum Hinzufügen von JS-Dateien haben wir diesen XML-Code verwendet:
Und um CSS-Dateien einzubinden, haben wir diesen XML-Code verwendet:
Um sicherzustellen, dass diese CSS- und JS-Dateien tatsächlich in unserem neuen Design enthalten sind, aktualisieren Sie die Startseite des Geschäfts und drücken Sie Control-U um den Quellcode der Seite zu überprüfen. Hier im Kopfbereich, wo Sie Ihre neu hinzugefügten CSS- und JS-Dateien sehen sollten. Klicken Sie auf jeden dieser Links, um sicherzustellen, dass diese mit den richtigen Dateien verknüpft sind und keine fehlerhaften Links vorhanden sind.
Inzwischen werden Sie hoffentlich bereits einige Änderungen im Erscheinungsbild Ihrer Website feststellen. Wir haben gerade erst mit der Bearbeitung dieses Themas begonnen. Im nächsten Artikel dieses Kurses beginnen wir mit der Bearbeitung der HTML-Dateien der Kopf- und Fußzeile sowie einiger anderer Vorlagenseiten. So sieht unser Thema in dieser Phase aus.
Teilen Sie uns in den Kommentaren unten mit, ob Sie den bisherigen Anweisungen folgen können. Lassen Sie mich auch wissen, ob Ihnen der Artikel gefallen hat. Wir würden gerne Ihre Meinung hören.
