Accueil » Code » Joomla » Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Tuto Joomla | Comment concevoir son propre template Joomla! ?

vidéo 28/43
  • Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

    Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

    La suite de cette vidéo est accessible après achat de la formation.
    previous
    summary
    resume
    next
    play
    Comment concevoir son propre template Joomla! ?
    00:00 / 11:33
    HD
    fullscreen

Ce cours vidéo fait partie de la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation

Détails de la formation

Nous avons vu dans des séquences précédentes comment personnaliser, installer un template, bénéficier également des préréglages de ces templates pour donner un aspect graphique évidemment à l’aide de ces différents paramètres, certains vont plutôt faire le choix d’aller concevoir leur propre template et la difficulté à ce moment-là reste relativement importante puisqu’on intègre maintenant énormément dans ces templates un certain nombre de paramètres et le fait également qu’on face appelle à des modifications HTML, CSS et parfois JavaScript également. La richesse esthétique et la flexibilité de paramétrage de nouveau template Joomla 1.5 a aussi complexifié la structure des templates. Si nous retournons dans gestions des templates et par exemple dans ce template-ci nous avions vue tout à l’heure que les feuilles de styles étaient bien entendu éclatées, ce qui est une bonne chose. Et vous avez également une structure qui est HTML qui s’est enrichi puisque vous avez un certain nombre de paramètres qui sont passés. Vous avez parfois beaucoup de ligne de code intégré dans ce fichier qui est en fait le fichier index.php des structures d’un point de vue HTML, la page maitresse de votre template. Et vous avez également un dossier de ce template Versatility que j’ai ouvert ici qui se trouve, je vous rappelle, à la racine du site dans un répertoire qui s’appelle template. Vous aviez, sur la version précédente un dossier CSS, un dossier image, parfois un dossier JavaScript. Vous aviez ensuite un fichier PNG qui était l’illustration dans le gestionnaire de template. Au survole, vous avez une illustration de ce template, je reviens dans le répertoire et vous aviez ensuite un fichier « index.php » dont nous parlions à l’instant, et un fichier XML qui est là pour décrire le template. Vous voyez qu’ici, la liste s’est enrichie et vous allez avoir parfois, entre autres un fichier PHP supplémentaire qui s’est intégrer dans ce répertoire-là, alors, celui-ci est un exemple, mais si on se remet dans des template pré installés, on va par exemple dans ce template-ci, il faut voir qu’il y a un petit peu moins de répertoires, mais on a toujours cette complexité, mais aussi cet éclatement de feuille de style. Il va falloir également parler d’outils pour développer vos propres templates, donc la première des solutions aurait été de partir dans template édition de personnaliser. Si vous vous lancez dans le développement, il va falloir plutôt choisir des outils d’éditions d’étages, nous allons par exemple ici choisir, « Dreamweaver ». La tache va être relativement complexe puisqu’il va vous falloir recréer toute cette structure donc non seulement partir d’un fichier « index.php » qui contiendra bien entendu tous les éléments nécessaires à votre site et un élément essentiel par exemple d’amener le code qui sera chargé d’aller disposer les positions sur vos templates et la complexité est que cette position est codifier sous forme d’un code PHP. Il faudra également que cette position puisse être mise en forme et qu’il faille également en parallèle que vous ayez une, voir plusieurs feuilles de style qui va également apporter cette esthétique à votre site. C’est pour cela que nous allons plutôt vous conseiller de vous orienter sur une extension qui est disponible sur Joomla .org, qui n’est pas réellement une extension que l’on installe dans Joomla, mais plutôt une extension pour Dreamweaver et c’est justement pour ça que notre choix s’est porté sur cet éditeur. Dans le parti extension, si nous tapons par exemple média, nous allons peut être essayé d’être un peu plus précis puisque je ne trouve pas ce qui m’intéresse. On va essayer avec le mot clé JTK1 et nous tombons justement sur ce Joomla Template Kit, qui je vous rappelle n’est pas une extension, n’est ni un composant, ni un module, ni un pluggin mais ici tout simplement une application tierce permettant de faire des choses compatibles avec votre gestionnaire de contenu. Si vous téléchargez, bien entendu vous tomberez sur le site de média 65 que nous allons charger. Petit rappel qui a son importance que cette extension est payante donc, il va falloir investir si vous voulez l’utiliser. L’avantage également c’est que même si cette est quand même relativement complexe à utiliser, vous avez également des fourni de vidéo des vectoriels il va falloir alors maitriser la langue de Shakespeare puisque toutes ces vidéos sont en anglais. Donc on va également essayer de vous aider. Nous allons temporairement abandonner et nous déconnecter proprement de Joomla, minimiser le navigateur et nous allons fermer de nouveau Dreamweaver pour faire un petit peu de ménage sur l’écran et procéder plutôt à l’installation de l’extension que nous venons de nous procurer qui est ici dans Dreamweaver vous avez un utilitaire spécifique à l’installation de ces extensions, alors pourquoi j’ai fermé Dreamweaver puisque tout simplement parce que je vais installer de nouvelles extensions, il faut que Dreamweaver puisse les charger à l’ouverture et donc il aurait fallu à un moment donner le redémarrer. Nous allons donc installer cette extension. Cliquez sur ce bouton pour ajouter l’extension qui se trouve sur ce bureau, et nous procédant à l’installation. Une fois que cette installation est terminée, nous pouvons lancer Dreamweaver, nous allons ensuite dans le menu fenêtre, trouver cette nouvelle extension « Media 65 Joomla Kit », et nous avons ici représenté sous cet aspect l’extension alors qu’il se décline en 2 zones, une zone plutôt orientée outils et une zone plutôt orientée réglages, des zones qui sont parfois en cours de développement, donc, une version 3.1, qui sera amenée par la suite à évoluer et vous apporter des fonctionnalités complémentaires par exemple, ici des systèmes de vérification de mise à jour. Plutôt que d’avoir ce panneau flottant, nous allons plutôt, dans Dreamweaver demandé à ce que cet élément forme, alors soit vous pouvez les grouper avec un groupe de panneau soit, nous pouvons les intégrer dans un nouveau groupe, alors nous allons plutôt les grouper avec la feuille de groupe de panneau CSCS et nous allons faire de même pour cet élément puisque dans la manipulation de ces éléments, on aura constamment besoin de passer de ces outils à certains réglages, notamment concernant les feuilles de style. Bien entendu vous avez également la possibilité de jongler pour que la lecture soit un peu plus facile. Nous allons finaliser cette installation en allant créer dans Dreamweaver un site qui nous permettra de pouvoir, non seulement concevoir ce template, mais de les mettre également à exécution directement dans notre Joomla et pour cela nous allons dans Dreamweaver, créer un site avec la fonction gérer les sites. Nous allons créer un nouveau site que nous allons appeler mon premier site. Le chemin est le même que celui que nous avions employé lors de l’installation de Joomla, en précisant quand même le répertoire dans lequel cet élément est rangé, ça va mettre cet élément dans le presse-papier puisqu’un peu plus tard, nous en aurons besoin, suivant, nous n’allons pas utiliser l’application de technologie serveur, ça ferait l’objet bien entendu ici d’un choix si vous aviez des développements spécifiques à faire. Nous allons vraiment créer ici un site standard, vérifier qu’il s’agit bien du chemin par défaut où est installé notre Joomla, il s’agit ici de ce cas, suivant, nous allons ici ne pas chercher à nous connecter à distance, suivant et je termine. Dreamweaver procède maintenant au chargement de l’ensemble de ces fichiers et ces fichiers apparaitront dans la zone du panneau latéral que vous aviez en bas à droite. Comme le nombre de fichiers est assez impressionnant, sur Joomla, cette actualisation du cache du site est parfois un tout petit peu longue. Nous pouvons maintenant cliquer sur terminer. Ici, je minimise les autres panneaux par commodité, vous voyez ici, dans Dreamweaver, l’ensemble des structures, on retrouve en l’occurrence le dossier des répertoires, nous avons également à l’intérieur les images avec leur répertoire stories, etc. Nous verrons dans une prochaine séquence comment utiliser en détail cette nouvelle Dreamweaver, nous nous sommes contenté ici tout simplement de l’installer et de commencer le paramétrage dans Dreamweaver.

Cette formation Joomla est également disponible dans les packs suivants

0 Notes et avis
Note moyenne:
5 5 0 1
1
Donnez votre avis sur la formation Apprendre Joomla 1.5 - Installation| Utilisation| Personnalisation !
Vous devez acheter cette formation pour écrire des commentaires