Comment créer votre premier modèle Joomla

Dans ce tutoriel, vous allez apprendre les bases d’un modèle Joomla et en créer un de toutes pièces. Nous allons rapidement passer en revue l’installation d’un serveur local et de Joomla, puis créer un modèle de fonctionnement de base..


1. préparation

Avant de commencer notre modèle, vous devez préparer quelques éléments..
Comme la plupart des CMS, Joomla nécessite un serveur sur lequel PHP et MySQL sont installés. L'installation manuelle de ce qui précède peut être assez ennuyeuse et, pour être honnête, une perte de temps (à moins que vous ne vouliez vous en tenir à la façon exacte).
Ce que nous allons faire est de télécharger un seul programme d’installation correspondant à tout ce qui précède, qui collera un serveur local sur votre système et vous fournira également un panneau de configuration vraiment astucieux..

Alors rendez-vous sur WAMP et téléchargez la dernière version (MAMP pour Mac).

Une fois le programme d'installation téléchargé, exécutez-le et installez WAMP à un endroit facile à mémoriser. Si tout se passe comme prévu, vous devriez regarder un dossier nommé: wamp

Vous devriez maintenant aussi avoir une icône dans votre barre de notification (où se trouve l’horloge) qui vous donne accès au panneau de contrôle de WAMP. Vous pouvez l'utiliser pour un certain nombre de choses, y compris le redémarrage du serveur..


2. Télécharger et installer Joomla

Maintenant que nous avons un serveur installé, nous pouvons obtenir Joomla et le configurer. Allez sur Joomla et téléchargez la dernière version..

Avant de continuer, jetons un œil à notre dossier wamp. À l'intérieur, vous trouverez un tas de dossiers, mais celui qui nous intéresse est le dossier www..
C’est la racine de la configuration de votre serveur et c’est là que nous installerons Joomla. (note: vous pouvez installer autant de copies de Joomla ici que vous voulez, ou n'importe quoi d'autre d'ailleurs)

Alors, décompressez votre téléchargement Joomla dans le dossier www. À ce stade, je le renomme habituellement par le nom de mon site ou le réduis simplement à joomla.

Joomla est maintenant sur notre serveur. Cependant, il nous reste une dernière chose à faire avant l’installation: créer une base de données. Ouvrez votre navigateur et accédez à http: // localhost .
Ici vous trouverez la zone d’administration de votre serveur, c’est là que nous créons notre base de données.

Pour créer la base de données, cliquez sur phpmyadmin dans la section Vos alias..

Dans l'intérêt de ce tutoriel, nous allons appeler notre base de données joomla. Vous ne créerez pas d'utilisateur avec mot de passe ici, mais vous utiliserez les détails de l'utilisateur root. Il est fortement recommandé de créer un utilisateur avec un mot de passe fort en situation réelle..

Maintenant que nous avons une base de données, nous pouvons commencer à installer Joomla. Lancez votre navigateur et accédez à http: // localhost / joomla (ou ce que vous avez appelé votre site lors de son décompression).

Le premier écran parle assez bien pour lui-même. Choisissez une langue et appuyez sur suivant.

L'écran suivant que vous voyez est la liste de contrôle de pré-installation. Voici une liste des éléments requis et des paramètres que Joomla doit installer avec succès. Assurez-vous que vous avez la configuration nécessaire et cliquez sur Suivant.

Sur la page suivante, lisez attentivement la licence, puis cliquez sur Suivant pour entrer les informations requises (nom d'hôte: localhost, nom d'utilisateur: root, aucun mot de passe et joomla comme nom de base de données), puis appuyez sur suivant..

Ignorez l’écran de configuration FTP en cliquant sur Suivant et sur la page suivante, entrez le nom de votre site, une adresse électronique et choisissez un mot de passe. Ce sera le mot de passe que vous utiliserez pour vous connecter à la zone d'administration de joomla avec le nom d'utilisateur: admin.
Nous n'allons pas installer d'exemples de données pour l'instant, car nous souhaitons ajouter les modules un par un pour voir comment notre modèle se présentera plus tard dans le tutoriel. Cliquez sur Suivant.

Félicitations! Joomla est opérationnel, mais avant que nous puissions entrer et déconner, nous devons supprimer le dossier d'installation. Allez dans votre dossier www à l’intérieur de wamp, puis dans le dossier joomla et supprimez le dossier d’installation.


3. Regard sur Joomla

De nos jours, il est assez difficile de se lancer dans une discussion sur un CMS Open Source sans que le nom de Joomla ne paraisse..
Son installation et son panneau d’administration intuitif le rendent très populaire auprès des utilisateurs qui recherchent un système de gestion de contenu simple tout en disposant de fonctionnalités qui conservent
des milliers de développeurs sont occupés à faire rouler des applications et des modules. Si nécessaire, familiarisez-vous avec le back-end (je vous recommande de lire rapidement cet article de Joomla 101 sur le blog de Themeforest.)

Pour visiter votre site, cliquez sur Aperçu dans le coin supérieur droit de la zone d'administration. Ce que vous obtiendrez est le modèle par défaut sans contenu et le plus fondamental des modules chargés.


4. Le modèle

Afin de commencer à comprendre la structure du modèle, examinons celui par défaut. Allez dans votre dossier www, puis dans le dossier joomla, vous devriez voir un dossier de modèles.
(wamp / www / joomla / templates). C'est là que vont tous les différents modèles. Vous pouvez basculer entre les modèles dans le panneau d'administration.

Dans le dossier des modèles, vous verrez un dossier pour chaque modèle installé. Joomla est livré avec trois modèles: beez, rhuk_milkyway et ja_purity. Rappelez-vous cet emplacement, car vous y installerez vos nouveaux modèles ultérieurement..

Bien que la plupart des modèles soient constitués de quelques fichiers, il ne vous en faut que deux pour créer un modèle de travail. Ceux-ci sont:

  • index.php
  • templateDetails.xml

Le premier - index.php - est l’endroit où se trouve le balisage dans lequel vous insérez le Joomla. Ceux-ci peuvent être vus comme de petits crochets où joomla raccroche des informations, comme des modules par exemple

Le deuxième fichier est templateDetails.xml. Vous pouvez voir cela comme une liste d'instructions à Joomla. Cette liste doit inclure le nom du modèle, les noms des fichiers utilisés dans le modèle (images, etc.) et les positions que vous souhaitez utiliser (les éléments mentionnés ci-dessus).

   modèle _tut 31-01-2009 Fan Nettut [email protected] http://www.siteurl.com Vous 2009 GNU / GPL 1.0.0 Modèle Tut  index.php templateDetails.xml css / template.css   miette de pain la gauche droite Haut utilisateur1 utilisateur2 utilisateur3 utilisateur4 bas de page  

L'exemple ci-dessus est un exemple de fichier templateDetails.xml. Comme vous pouvez le constater, cette liste indique à Joomla le modèle, comme son nom, son auteur, la date de création, etc.
Notez la section des positions dans le code ci-dessus. Ce sont les positions dont nous avons parlé plus tôt, le comprend.
Certains sont explicites, comme le pied de page.
Si vous mettez le pied de page joomla inclus dans la zone de pied de page de votre conception, vous pourrez contrôler certains aspects du pied de page à l’aide du back-end Joomla. Essayons de réunir un modèle simple.


5. Commencer le modèle

Faisons quelques préparatifs pour que nous puissions travailler avec quelque chose. Accédez à votre dossier de modèles et créez un nouveau dossier. Permet de l'appeler template_tut.

Dans votre nouveau dossier, créez un fichier nommé index.php et un autre appelé templateDetails.xml (copiez / collez le code dans l'exemple ci-dessus)..

Ouvrez votre fichier index.php dans le bloc-notes ou tout ce que vous utilisez pour éditer du code, puis copiez / collez le texte suivant dans:

     

Nous avons un DOCTYPE, un code PHP pour le langage, et notre premier Joomla inclut dans la section head. Ce n'est pas dans la liste xml car ce n'est pas une position.

 

Cela inclut le code d’en-tête joomla (qui inclut le titre de la page), et un tas d’autres choses qui peuvent probablement remplir à elles seules la moitié d’un tutoriel..

Terminez le balisage sur la page en ajoutant les balises body et en fermant la balise html.


6. Utiliser le modèle

Maintenant que nous avons les fichiers de base en place, ajoutons un autre include, cette fois-ci pour afficher le contenu principal de toute page affichée..

 

Vous devriez maintenant avoir ceci dans votre index.php

         

Avant de tester notre modèle, ajoutons un article afin que nous ayons du contenu. Assurez-vous que WAMP est en cours d'exécution et accédez à votre zone d'administration dans Joomla à l'aide de http: // localhost / joomla / administrator.

Maintenant, entrez vos identifiants

Allez au contenu dans le menu puis au gestionnaire d’articles dans le menu déroulant.

Cliquez sur Nouveau pour ajouter un article.

Donnez un titre à votre article, remplissez un alias, assurez-vous qu'il est publié sur la page d'accueil et cliquez sur Enregistrer.

Voyons à quoi notre article ressemble en première page. Cliquez sur l'aperçu dans le coin supérieur droit après la sauvegarde. Vous devriez voir la page d'accueil de votre site avec votre texte.

Maintenant que nous avons publié le contenu, voyons si le modèle que nous avons créé fonctionne réellement. Retournez dans votre zone d'administration et cliquez sur Extensions puis sur Gestionnaire de modèles.

Vous devriez voir template_tut dans la liste, alors allez-y, choisissez-le et définissez-le par défaut..

Hit aperçu et vérifiez votre nouveau modèle glorieux. Eh bien peut-être pas si glorieux, mais votre premier modèle joomla. YAY!


7. Ajouter de la viande à notre modèle

Notre modèle fonctionne, il récupère les informations d'en-tête, y compris le titre, et le contenu créé dans le back-end joomla. Avant d'ajouter d'autres includes, examinons de plus près la position du module includes; ceux que nous avons nommés dans notre fichier xml.

  miette de pain la gauche droite Haut utilisateur1 utilisateur2 utilisateur3 utilisateur4 bas de page 

Ils sont inclus de la manière suivante:

 

Donc, pour ajouter, par exemple, la position de gauche, notre index.php ressemblera à ceci:

          

Pendant que nous y sommes, ajoutons la position du pied de page

           

Si vous retournez dans votre zone d'administration et accédez au Gestionnaire de modules, vous remarquerez un module déjà présent, le module Menu principal. Ce module est installé même si nous choisissons d’installer la version simple de Joomla.

Le menu est déjà accroché à la position gauche (que nous venons d'inclure dans notre modèle), voyons à quoi il ressemble. Hit aperçu

Comme vous pouvez le constater, nous avons maintenant un menu avec un lien vers la page d'accueil. Vous pouvez ajouter d'autres éléments de menu et créer des liens vers différents contenus via le Gestionnaire de menus..

Permet de faire fonctionner un pied de page. Accédez au gestionnaire de modules, cliquez sur Nouveau et sélectionnez Pied de page. Puis appuyez sur suivant.

Sur la page suivante, donnez le titre au nouveau module: Pied de page, et dans le menu déroulant Position, sélectionnez Pied de page..

Cliquez sur Enregistrer, puis affichez un aperçu de la page..
Vous devriez maintenant voir aussi les informations de bas de page sur votre modèle.


8. Ajouter plus de positions et de modules

Permet de styler un peu notre page pour que nous puissions voir ce que nous faisons. Dans votre dossier template_tut, créez un nouveau dossier et appelez-le "CSS", puis créez un fichier appelé "template.css".

Collez les inclus dans index.php dans certains divs et enveloppez le tout dans un conteneur div, puis liez votre feuille de style comme dans l'exemple. N'hésitez pas à copier ma mise en page désordonnée si vous n'utilisez pas déjà l'un des vôtres. J'ai fait le mien très vite pour ce tutoriel.

       
En-tête et d'autres choses
Barre latérale droite

et le CSS

* remplissage: 0; marge: 0;  ul list-style: none;  .float float: left;  .clear clear: les deux;  #container width: 960px; marge: auto;  #header background-color: # 999999; hauteur: 150px;  #content width: 660px; text-align: center;  #sidebar_left text-align: center; couleur de fond: #CCCCCC; largeur: 150px;  #sidebar_right background-color: #CCCCCC; largeur: 90px;  #footer background-color: # 999999; text-align: center; 

Permet d’accrocher notre barre latérale droite et notre en-tête avec des positions. Ajouter la position supérieure à l'en-tête et la position droite à la barre de droite.

et

Créons maintenant les modules pour ces deux positions. Accédez à la zone d'administration de Joomla, connectez-vous si nécessaire et accédez au gestionnaire de modules dans le menu déroulant Extensions. Vous devriez voir le menu principal et le pied de page que nous avons créés précédemment. Suivez les mêmes étapes pour créer deux autres modules. Un module de recherche que vous placerez en première position et un module de connexion que vous placerez à la bonne position.

Prévisualisez votre page, vous devriez maintenant avoir une barre de recherche dans votre en-tête et un formulaire de connexion dans votre barre latérale droite. Ce sont à peu près les bases d'un modèle Joomla. Vous créez des positions dans votre conception, comme des petits crochets pour l’envoi d’informations à Joomla, que vous créez dans la plupart des cas dans le back-end. Vous pouvez l’appliquer à presque tous les modèles en utilisant les nombreux postes proposés par Joomla. J'espère que cela vous a été utile, gardez à l'esprit que ce sont les bases, les modèles Joomla peuvent être rendus aussi complexes et puissants que vous le souhaitez.