Si vous êtes arrivé.e sur cet article, c'est que la question de la création d'un site Web vous intéresse et que - par goût du challenge, par curiosité intellectuelle ou par souci d'économies - vous aimeriez créer votre site Web par vous-même. Cela vous parait encore impossible pour l'instant mais je vous parie qu'après avoir lu cette série d'articles, vous aurez réalisé votre site Web sans l'aide de personne !
Grâce au premier épidsode Créer un site Web gratuit pour mon activité, vous avez créé votre site Web avec Joomla, vous avez créé une catégorie d'articles, ajouté un nouvel article et vous l'avez affiché sur votre site Web. Et tout cela gratuitement, comme promis !
Grâce au deuxième épisode Créer un site Web gratuit pour mon activité, vous avez ajouté des informations aux livres de votre librairie grâce aux champs personnalisés et créé une page pour présenter chaque auteur.
Aujourd'hui, nous allons poursuivre cette formation en allant encore un peu plus loin pour créer un site web pour son activité.
Rassurez-vous, ce troisième épisode sera toujours aussi amusant et instructif. Au programme :
- Affichage des différents genres littéraires avec mise en avant de certains livres
- Customisation des genres littéraires pour avoir un affichage dédié
Traduisons cela en termes Joomla. Voici ce que vous apprendrez à faire grâce au contenu de ce tutoriel :
- Créer un lien de menu de type blog d'articles
- Modifier l'ordre d'affichage des articles
- Epingler un article en tête de blog
- Créer un template enfant
- Customiser les CSS de ce template enfant
Je sais que cela peut sembler impressionnant mais comme pour les précédents épisodes, vous allez voir que grâce aux qualités natives de Joomla, vous n'aurez aucune difficulté à réaliser tout cela.
Allez, il est temps de se mettre au travail !
Créer un lien de menu de type blog d'articles
Comme dans une librairie physique, les livres doivent être rangés par genre littéraire pour que les visiteurs puissent de repérer facilement. C'est ce que nous allons voir maintenant. Grâce à Joomla, nous allons afficher tous les articles d'un genre littéraire en particulier. Ainsi, vos visiteurs sauront où aller pour chercher un roman policier, un livre pour enfants ou une bande dessinée.
Et comme dans une vraie librairie, vous allez voir que l'on peut vraiment aller assez loin dans la mise en forme de cet affichage.
Le lien de menu de type blog
Depuis le menu latéral du panneau d'administration de Joomla, cliquez sur Menus puis ouvrez le menu de votre choix. Dans cet exemple, nous prendrons le menu principal.
Cliquez sur le bouton Nouveau en haut de la page puis suivez les étapes suivantes :
- Champ Titre : indiquez le nom du genre litteraire (c'est ce nom qui sera affiché sur le site)
Dans l'onglet Détail :
- Cliquez sur le bouton Sélectionner
- Dans la fenêtre modale, cliquez d'abord sur Articles puis sur Blog d'une catégorie
- Sélectionnez ensuite la catégorie d'articles de votre choix grâce au bouton Sélectionner
Enregistrez votre saisie puis affichez votre blog en frontend.
Nous avons effectivement afficher les articles de la catégorie de notre choix, comme voulu.
Si le résultat est pour l'instant simple, nous allons l'améliorer et même le customiser avec ce qui suit.
Reprenons l'édition de notre lien de menu en backend.
Ouvrez maintenant l'onglet Affichage du blog :
- Articles en pleine largeur : vous pouvez choisir le nombre d'articles à afficher en pleine largeur sur la page d'accueil du blog. En règle général, c'est un le dernier article publié dans cette catégorie qui est ainsi mis en avant.
- Classe de l'article principal : Vous pouvez indiquer une classe CSS qui sera appliquée à cet article mis en avant.
- Introduction des articles : Indiquez ici le nombre d'articles (de livres) à afficher sur la page d'accueil du blog.
- Classe d'article : Vous pouvez ajouter n'importe quelle classe CSS pour vos propres idées de style à ces articles.
- Nombre de colonnes : Choisissez le nombre de colonne sur lequel vos articles seront affichés.
- Direction multicolonne : Vous pouvez sélectionner ici si vos articles devront s'afficher en ligne ou en colonne.
- Titres avec lien : Joomla affichera le nombre d'articles indiqués ici simplement avec le titre de ces articles
- Articles épinglés : souhaitez-vous afficher les articles éplinglés sur votre blog ? Oui ? Non ? Uniquement ?
- Image d'introduction liée : Joomla vous donne la possibilité d'ajouter un lien sur l'image d'introdution de vos articles (c'est le même lien que celui qui est sur le titre de l'article)
- Inclure les sous-catégories : souhaitez-vous inclure dans votre blog, les articles contenus dans les sous catégories de la catégorie sélectionnée précédemment?
Vous avez enfin, plusieurs options pour choisir l'ordre d'affichage selon l'ordre des articles, l'ordre des catégories et même selon les dates des articles.
Les possibilités sont quasiment infinies et bien sur, vous pouvez adopter un affichage différent pour chaque lien de menu de type blog. Attention cependant à ne pas dérouter vos visiteurs. Le mieux est encore de garder une cohérence pour faciliter la navigation des internautes.
Je vous invite à jouer avec ces réglages pour voir comment les différents paramètres fonctionnent.
Lorsque vous avez trouvé le bon réglage, cliquez sur le bouton Enregistrez et Fermer lorsque vous avez terminé votre saisie.
La mise en avant d'un article
Vous souhaitez mettre en avant un article sur ce blog et que cet article reste en première place.
Nous avons vu qu'il est possible d'avoir un (ou plusieurs) article mis en avant.
Le problème est que lorsque vous ajouterez un nouvel article dans cette catégorie, il viendra remplacer le précédent. Alors comment faire ?
Reprenez votre lien de menu de type blog et ouvrez l'onglet Catégorie.
- N'afficher aucune sous-catégorie
Ouvrez l'onglet Affichage du blog.
- Afficher un seul article en pleine largeur
- Inclure toutes les sous-catégories
- Choisir Ordre de présentation des articles épinglés pour l'ordre des articles
Vérifiez bien que vous avez choisi d'afficher les articles épinglés.
Dorénavant, tous les nouveaux articles qui seront publiés dans la catégorie parent ou dans les sous-catégories de votre blog, viendront s'afficher sous votre article épinglé.
Créer un template enfant
N'ayez pas peur, vous allez voir que tout va très bien se passer.
Depuis la version 4.1, Joomla offre la possiblité de créer des templates enfants. C'est à dire que vous avez la possibilité de dupliquer votre template pour le modifier à votre guise. Les avantages des templates enfants sont que vous pouvez en avoir autant que vous voulez, que vous pouvez les modifier comme vous voulez et que rien ne disparaitra à la prochaine mise à jour de Joomla ou du template.
Venez, je vous montre comment faire.
Depuis le menu latéral, cliquez d'abord sur Système.
Cliquez ensuite sur Templates du site dans la rubrique Templates.
Cliquez ensuite sur le nom de votre template.
Cliquez sur le bouton Créer un template enfant
Indiquez ensuite le nom de votre template enfant (par exemple: romans_policiers) et sélectionnez les styles de templates supplémentaires à importer depuis le template parent.
Cliquez sur le bouton Créer un template enfant pour valider votre saisie.
Votre template enfant est maintenant disponible dans la liste des templates :
Cas d'usage d'un template enfant
Bon, j'ai comme l'impression que ce template enfant ne vous impressionne pas plus que ça.
Pour vous démontrer le bien fondé de cette fonctionnalité, voici un cas d'école assez amusant que je vous propose de réaliser.
Ouvrez le template enfant que vous venez de créer (dans notre exemple: romans_policiers)
Cliquez sur le bouton Nouveau fichier
Sélectionnez le dossier CSS à gauche puis à droite, indiquez user dans le champ Nom de fichier et sélectionnez css pour le Type de fichier
Cliquez sur le bouton Type de fichier pour terminer
Copiez/*collez ces lignes de code dans votre fichier (merci à Viviana Menzel pour son aide):
.bw {
--cassiopeia-color-primary: #000;
--cassiopeia-color-hover: #999;
--cassiopeia-color-link: #666;
}cliquez sur le bouton Enregistrez et Fermer lorsque vous avez terminé votre saisie.
Ouvrez maintenant le lien de menu de type blog que vous avez créé au début de cet article.
Dans l'onglet Détail:
- Pour le paramètre Style du template, sélectionnez le template enfant que vous venez de créer
Dans l'onglet Affichage de la page:
- Indiquez bw pour le paramètre Classe de page.
cliquez sur le bouton Enregistrez et Fermer lorsque vous avez terminé votre saisie.
Affichez maintenant votre blog affichant les "Romans policiers" pour constater qu'il a adopté une charte graphique beaucoup plus en rapport avec les romans noirs !
Et voilà, nous sommes déjà arrivés à la fin de cet épisode.
Avouez que tout cela n'était finalement pas très compliqué.
Le programme du mois prochain
Dans le 4ème épisode de cette série, nous verrons comment mettre en place un système de recherche de livres. Nous verrons également comment afficher les livres en rapport, les livres du même auteur, et pourquoi pas, les livres du même éditeur.
Et grâce à la magie des overrides, nous verrons comment harmoniser le style et l'affichage de ces modules.
A très bientôt !
