Organiser la navigation

Construisez le menu principal

Vous avez rédigé quelques articles. Il est temps, maintenant, de les mettre à la disposition de vos internautes. Le principe de Joomla est assez simple : vous allez créer des entrées dans le menu principal (celui situé à gauche de l’écran, noté Main Menu). Par exemple, vous voulez disposer d’un lien présentant toutes les critiques de films, puis de liens secondaires permettant d’accéder uniquement aux critiques de 2010, de 2009… Avec Joomla, vous pouvez choisir la présentation de chaque élément du menu. Par exemple, vous préférez obtenir une simple liste d’articles ou, au contraire, permettre à vos visiteurs d’afficher le contenu entier d’un ou plusieurs articles. Déroulez le menu Menu, Main Menu. Par défaut, seul Home s’affiche : c’est le lien vers la page d’accueil.

Ajoutez un élément de menu

Cliquez sur le bouton Nouveau. Vous êtes alors invité à choisir le type d’élément de menu. Cliquez sur le lien Articles. Lorsque l’internaute cliquera sur Critiques de Films, il faut qu’il puisse lire les critiques que vous avez rédigées. Choisissez dans Section : Articles d’une section donnée en blog. “ En blog ” signifie que les contenus seront affichés (comme dans un blog) et pas seulement les titres des articles. Dans Titre, saisissez le titre du lien : Critiques de Films.. Dans Paramètres – Basique, sélectionnez la section : Critiques de Films. Les chiffres situés en dessous permettent d’affiner la présentation des articles. Par défaut, une présentation “ blog ” se décompose en trois parties. En haut, les premiers articles prennent toute la largeur de la page. Au milieu, les articles sont répartis sur plusieurs colonnes. En bas, seuls les liens des articles suivants (s’ils existent) s’affichent.

Contrôlez précisément la présentation

Le nombre d’articles dans la première partie est défini par la valeur du paramètre #Principal. La variable #Intro correspond au nombre d’articles placés sous forme de colonnes (le nombre de colonnes étant défini dans le champ Colonnes). Enfin, le nombre de liens affichés est donné par le paramètre #liens. Si vous avez plus d’articles que ceux affichés dans la page, un lien vers la page suivante est automatiquement proposé. Dans le cas de l’exemple illustré ici, nous avons opté pour #Principal à 1, #Intro et Colonnes à 2 et #Liens à 4. Notez qu’en cliquant sur Paramètres Avancés, vous pouvez choisir l’ordre dans lequel seront affichés les articles : soit selon l’Ordre établi dans le menu de gestion des articles, soit selon un ordre différent, par exemple les plus récents en premier ou en ordre alphabétique de titres.

Choisissez les informations à afficher

Par défaut, en regard de chaque article, figurent le nom de l’auteur, la date de création, de modification… Vous pouvez choisir de masquer ces informations en cliquant sur le lien Paramètres Composant et en choisissant de remplacer la valeur par défaut (Paramètres globaux) par Masquer. Validez en cliquant sur Sauver. Si vous avez un doute sur l’une des valeurs par défaut, vous pouvez consulter, voire modifier, les paramètres globaux dans le menu Contenu, Gestion des articles puis en cliquant sur Paramètres. Il ne vous reste plus qu’à ouvrir votre navigateur sur www.monsiteweb.fr et à cliquer sur le lien Critiques de Films pour afficher le résultat.

Insérez d’autres entrées

Nous pouvons, sur le même principe, ajouter d’autres entrées dans le menu. Pour créer par exemple un sous-menu 2010 dans Critiques de Films (regroupant uniquement les films de cette année), cliquez sur Menu, Main Menu puis Nouveau. Cliquez sur Articles puis cette fois sur Articles d’une catégorie donnée en blog. Saisissez le titre 2010 et sélectionnez la catégorie Critiques de Films, 2010. Afin de créer un sous-menu de Critiques de Films, cliquez sur cette option dans la liste Élément parent. Modifiez éventuellement les autres paramètres. Validez en cliquant sur Sauver. Notez qu’il est également possible de créer une entrée vers Un article spécifique, qui pourra, par exemple, contenir une présentation générale du site (page Qui est Fred ?).

Définissez le contenu de la page d’accueil

Très souvent, la page d’accueil contient le texte intégral du dernier article publié et une liste des articles les plus récents. Pour définir l’aspect des éléments affichés dans la page d’accueil, déroulez à nouveau Menu, Main Menu et cliquez cette fois sur Home : Modifiez les Paramètres basiques par exemple en y indiquant #Principal : 1, #Intro : 0, #Colonnes :1 et #liens : 10 (seul le premier article est affiché, les autres sont visibles sous forme de liens). Dans Paramètres composant, optez pour Titre de la section : Montrer et masquez toutes les icônes. Validez en cliquant sur Sauver.

Ajoutez un texte spécifique

Outre le dernier article, la page d’accueil contient généralement un texte spécifique illustré par exemple avec des images. Ce texte peut être une mini-présentation de votre site ou une annonce importante, que vos visiteurs ne doivent pas rater, quel que soit l’article affiché. Pour réaliser cet ajout, déroulez le menu Extension, Gestion des modules. Les modules permettent d’afficher des informations autour du contenu principal. Cliquez sur Nouveau puis cochez HTML personnalisé et cliquez sur Suivant. Dans Titre, saisissez Accueil. Cochez l’option Montrer le titre : Non. Dans Position, saisissez l’emplacement prédéfini qui accueillera ce bloc dans la page. Choisissez par exemple Right pour le placer tout à droite ou User1 pour le placer juste avant les articles. Saisissez le texte de la page d’accueil dans l’éditeur et insérez les illustrations comme vous l’auriez fait dans un article. Par défaut, votre texte sera visible dans toutes les pages. Pour ne l’affecter qu’à la page d’accueil, cochez Sélectionner le (les) élément(s) de menu depuis la liste et cliquez sur Home. Enfin, cliquez sur Sauver et vérifiez le résultat en vous rendant sur www.monsiteweb.fr.

Changez l’aspect du site

Votre site Web commence à ressembler à quelque chose. Toutefois, la présentation générale laisse encore à désirer. L’image Joomla située en haut de page n’est peut-être pas à votre goût, les couleurs non plus. Pour changer de logo, vous devez disposer d’une image d’environ 95 pixels (ou points) de haut sur 600 pixels de largeur. Commencez par transférer l’image désirée (par exemple logo.jpg) à l’aide du menu Site, Gestion des médias en la plaçant dans le dossier principal (Media). Déroulez ensuite le menu Extension, Gestion des templates. Cochez rhuk_milk-yway (le template actif) puis cliquez sur Éditer. Vous pouvez alors modifier la couleur standard (celle des menus) et celle du fond (par défaut, ils sont bleus). Cliquez sur Appliquer. Pour modifier l’image de logo, cliquez sur l’icône Éditer le CSS. Cochez la case template.css puis cliquez sur Éditer. Descendez dans le code jusqu’à la ligne div#logo {. À la ligne Width, remplacez la valeur actuelle (418px) par la largeur de votre image (600px). Modifiez la ligne commençant par background : en background: url(/images/logo.jpg) 0 0 no-repeat. Enfin, validez en cliquant sur Sauver et vérifiez le résultat en vous rendant sur www.monsiteweb.fr.

Optez pour un autre modèle

Si le modèle par défaut ne vous convient pas, sachez qu’il en existe de très nombreux autres disponibles sur Internet (certains payants, certains gratuits). Rendez-vous par exemple sur la page www.siteground.com/joomla-hosting/joomla15-templates.htm. Cliquez sur le lien Download de votre modèle préféré. Suivez les instructions afin de télécharger le fichier compressé au format Zip. Déroulez le menu Extension, Installer Désinstaller. Cliquez sur le bouton Parcourir afin de sélectionner le fichier Zip et validez par Ouvrir puis Transfert de fichier & installation. Déroulez ensuite le menu Extension, Gestion des templates. Cochez la case correspondant au nouveau template et cliquez sur Défaut afin de l’activer. Le nouveau modèle est immédiatement actif.

🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.

Stéphane Darget