Share
Dans ce deuxième article de notre série de développement de thèmes Magento, nous allons définir les bases de notre nouveau thème. Nous allons définir la structure de répertoires de base de notre nouveau thème, l'hériter du thème Responsive par défaut de Magento, placer le CSS, le JS et les images aux emplacements appropriés et créer un nouveau fichier local.xml pour notre nouveau thème afin de les inclure. Fichiers CSS et JS dans l’en-tête de notre site Web. Alors, commençons.
La première étape dans la création de notre nouveau thème Magento est la configuration de la structure des dossiers, dans laquelle nous pouvons placer nos nouveaux fichiers de thème. Nous devons placer nos fichiers de thèmes à deux emplacements:
Accentsconagua
app / design / frontend dossier, où nous allons ajouter nos fichiers phtml et xmlskin / frontend dossier, où nous allons ajouter nos fichiers image CSS, JS et thèmeAvant de créer de nouveaux répertoires dans les répertoires mentionnés ci-dessus, il est préférable de choisir deux noms que nous allons utiliser en permanence. Le premier sera le nom de notre package (il peut s'agir du nom de votre société, du nom de l'auteur du thème ou de n'importe quoi) et le second sera le nom du thème. Pour ce tutoriel, nous allons utiliser 'tutsplus'comme nom du paquet, et'vstyle'comme nom de thème. Une fois ces deux noms choisis, commençons par créer les dossiers..
Premièrement, créons ces chemins dans notre dossier app et skin:[Répertoire Magento] / app / design / frontend / nom_package / nom_thème / [Répertoire Magento] / skin / frontend / nom_package / nom_thème /
Ce qui dans notre cas deviendra: [Répertoire Magento] / app / design / frontend / tutsplus / vstyle / [Répertoire Magento] / skin / frontend / tutsplus / vstyle /
Une fois ces dossiers créés, ajoutons ces quatre dossiers dans le dossier app / design / frontend / tutsplus / vstyle annuaire:
Et ces quatre dossiers dans le skin / frontend / tutsplus / vstyle dossier:
Actionnons maintenant le thème pour voir comment les choses se présentent. Pour cela, allez à Système> Paramètres> Conception, entrez 'tutsplus' dans le Nom actuel du paquet champ et 'vstyle' dans le Modèle champ, et enregistrez. Maintenant, actualisez la page d'accueil de notre magasin et vous verrez que la page entière est foirée. C'est bon; nous allons le faire fonctionner en l'héritant du thème réactif par défaut de Magento à l'étape suivante.
Avant Magento 1.9, Magento n'avait pas de fonction de thème enfant. Nous nous sommes fiés au modèle de repli de Magento pour utiliser le thème par défaut de Magento afin de prendre en charge de nombreuses fonctionnalités. Mais heureusement, dans la version 1.9 de Magento, nous pouvons créer un thème enfant à partir de n’importe quel thème et étendre son apparence et ses fonctionnalités sans problème..
Dans ce tutoriel, nous allons faire de notre nouveau thème un thème enfant du thème RWD de Magento. Pour cela, nous devons simplement créer un nouveau fichier theme.xml dans cet emplacement de dossier: app / design / frontend / tutsplus / vstyle / etc.
Placez ce code dans ce fichier XML:
rwd / default
Maintenant, actualisez la page d'accueil de votre boutique Magento et vous verrez un site entièrement fonctionnel..
La raison pour laquelle le site fonctionne maintenant parfaitement bien est que nous avons maintenant hérité de notre nouveau thème du thème RWD. Cela signifie que lors du rendu de notre nouveau thème, si Magento ne trouve aucun fichier dans ce nouveau thème, il ira chercher dans le thème Magento RWD, et s'il le trouve, Magento l'utilisera alors..
Comme notre nouveau thème ne contient pas encore de fichiers, tous les fichiers sont extraits du thème RWD de Magento, de sorte que l'apparence actuelle de notre site est identique à celle du thème RWD. Mais nous avons maintenant la possibilité de modifier ces apparences en créant nos propres fichiers de thème, le cas échéant, et tous les autres fichiers seront hérités du thème RWD..
L'utilisation de cette approche présente un autre avantage: avec la mise à jour des versions de Magento, le thème Magento RWD est également souvent mis à jour. Ainsi, notre thème aura toujours recours au dernier thème de Magento afin de prendre en charge les dernières fonctionnalités et corrections de bugs..
Nous allons maintenant commencer à modifier ce nouveau thème enfant que nous venons de créer. Pour cela, commençons par copier les fichiers CSS, JS et image de notre site HTML vers cet emplacement de notre magasin Magento:
skin / frontend / tutsplus / vstyle /
Comme mentionné ci-dessus, nous avons créé trois dossiers à cet emplacement, à savoir: js, images, les polices, et css. Placez les fichiers CSS, JS et images dans leurs dossiers respectifs.
Le simple fait d'y placer ces fichiers CSS et JS ne les inclura pas dans votre site Magento. Pour cela, nous devons les ajouter manuellement au bloc d’en-tête de notre HTML Magento.
Pour les besoins de ce didacticiel, nous allons créer un seul fichier XML et placerons toutes nos modifications dans ce fichier. Nous nommerons ce fichier XML local.xml, car ce fichier est rendu à la fin de tous les autres fichiers XML. Il remplace également la fonctionnalité des autres fichiers XML. Nous allons créer ce fichier dans cet emplacement de dossier:
app / design / frontend / tutsplus / vstyle / layout
Une fois ce fichier créé, nous ajouterons le code suivant dans ce fichier afin d'inclure les fichiers CSS et JS dans l'en-tête de notre site Web..
skin_js js / bootstrap.min.js skin_js js / jquery.carouFredSel-6.2.1 -itted.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
Laissez-moi vous expliquer le code ci-dessus, étape par étape. Sous layout (impliquant que ce handle est lié à layout) et par défaut (comme cela sera utilisé pour tous les cas par défaut), nous avons créé un nouveau bloc et l'avons référencé avec 'head', ce qui signifie que ces modifications ne prendront effet bloc 'tête'. Nous avons ensuite utilisé deux méthodes d’action pour ajouter des fichiers CSS et JS séparément. Pour ajouter des fichiers JS, nous avons utilisé ce code XML:
Et pour inclure les fichiers CSS, nous avons utilisé ce code XML:
Pour vous assurer que ces fichiers CSS et JS sont réellement inclus dans notre nouveau thème, actualisez la page d'accueil du magasin et appuyez sur Control-U pour vérifier le code source de la page. Ici, dans la section head, où vous devriez voir vos fichiers CSS et JS récemment ajoutés. Cliquez sur chacun de ces liens pour vous assurer qu'ils lient aux fichiers appropriés et qu'aucun lien n'est cassé..
J'espère qu'à présent, vous constaterez déjà quelques changements dans l'apparence de votre site Web. Nous venons juste de commencer à éditer ce thème. Dans le prochain article de ce cours, nous commencerons à éditer les fichiers phtml de l’en-tête, du pied de page et d’autres pages modèles. Voici comment notre thème se présente à ce stade.
Dans la section commentaires ci-dessous, indiquez-nous si vous êtes en mesure de suivre les instructions à ce jour. Aussi, laissez-moi savoir si vous avez aimé l'article. Nous aimerions connaître votre opinion.
