Comment créer une foire aux questions avec Joomla ?

Comment créer une FAQ juste avec Joomla?

Dans le cadre du #JoomlaOverrideChallenge, nous devons créer une foire aux questions rien qu'avec Joomla, c'est à dire sans installer d'extensions tierces. Voici comment j'ai réalisé ma FAQ.

Une nouvelle demande

En Septembre 1320, le seigneur de Hornshadow convoqua le conseil municipal pour valider l'ajout d'une foire aux questions sur le site Web de la ville. Tout le monde a pensé que c'était une excellente idée car cela pouvait aider les habitants de la ville et les visiteurs.

Le conseil municipal a également souhaité que cette nouvelle section couvre toutes les questions que les utilisateurs peuvent avoir aujourd'hui mais aussi à l'avenir. Pour cette raison, cette section devrait être facile à gérer.

Après cette réunion, les membres du conseil municipal ont commencé à recueillir les questions posées par la population. Quelques semaines plus tard, ils avaient reçu de nombreuses questions (souvent les mêmes) à propos de la ville, des quartiers et des activités.

Créer une Foire Aux Questions avvec Joomla

Basiquement, une Foire Aux Questions est composée de... questions et de réponses. Il y a plusieurs manières de présenter cela sur un site Web mais le mieux, selon moi, est de garder cette section aussi simple que possible en évitant un trop grand nombre de clics à l'utilisateur final. Qui a vraiment envie de cliquer sur une question juste pour être obligé de lire la réponse ?

Si le référencement naturel est important pour vous, il vous faudra également envisager d'ajouter le marquage Schema à votre Foire Aux Questions.

Donc, les caractéristiques de cette Foire Aux Questions seront les suivantes :

  • Aussi simple que possible: le moins de clics possible pour lire une réponse.
  • Facile à gérer pour le.la webmaster: ajouter ou supprimer des questions doit être le plus simple possible.
  • SEO friendly: cette section doit pouvoir inclure le marquage Schema si besoin.

Toutes les questions collectées par le conseil municipal furent réparties en trois catégories: les questions à propos du conseil municipal, les questions concernant les quartiers et les questions relatives aux activités.

I. Les catégories

Toute la partie FAQ du site sera gérée par le composant natif de Joomal com_content. D'abord, il faut créer une catégorie parente Foire Aux Questions et ensuite, ajouter les trois catégories enfant:

  • Le conseil municipal
  • Les quartiers
  • Les activités
Hornshadow foire aux questions categories

Pour chaque catégorie enfant, il y a une brève description et une image.

II. Les Questions (et leurs réponses)

Vous l'avez deviné, une question est le titre d'un article et sa réponse est le contenu de l'article.

Maintenant, ajoutez simplement vos articles dans les catégories adéquates.

Hornshadow foire aux questions article

III. Le lien de menu de la Foire Aux Questions

Pour afficher les catégories, il faut utiliser le lien de menu Liste de toutes les catégories et j'ai sélectionné la catégorie parente Foire Aux Questions.
Voici les paramètres qui ont été appliqués à ce lien de menu :

foire aux questions categories menu item

Onglet catégories

Hornshadow city category menu item

Onglet catégorie

Hornshadow city page title

Onglet Page title

IV. Les liens de menus pour les catégories enfant

La dernière étape ici consiste à créer une lien de menu de type Blod d'une catégorie pour chaque catégorie de votre Foire Aux Questions.
Voici les paramètres qui ont été appliqués ici :

Hornshadow city categories menu item

Onglet Details

Hornshadow city category menu item

Onglet Catégory

Hornshadow menu item tab options

Onglet Options

Hornshadow menu item tab links type

Onglet Type de liens

Le marquage Schema pour une Foire Aux Questions

Bien sur, ce n'est pas indispensable mais si le référencement est important pour vous, alors ce qui suit doit vous intéresser.

Il existe un marquage spécifique pour identifier une page de type Foire Aux Questions grâce aux données structurées. Tout ce qu'il faut savoir à ce sujet est parfaitement expliqué et décrit ici : Baliser vos pages de questions fréquentes avec des données structurées .

Voici le marquage à appliquer pour une page Foire Aux Questions :

<!-- Marquage pour la page -->
<html itemscope itemtype="https://schema.org/FAQPage">
	<body>
	
		<!-- Marquage pour chaque question -->
		<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
			<h3 itemprop="name">Curabitur in felis in nunc?</h3>
			
			<!-- Marquage pour chaque réponse -->
			<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
				<div itemprop="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa felis, feugiat in facilisis quis, eleifend eget sapien. Praesent et molestie orci, consectetur lobortis tortor. Phasellus facilisis, arcu ac tincidunt placerat, ligula nibh vestibulum nibh, eu volutpat libero enim sed lorem. Suspendisse nec ultrices odio.</p>
				</div>
			</div>			
		</div>
	</body>	
</html>

Pour implémenter ce marquage spécifique dans votre site Web, vous devez créer une override pour les fichiers suivants :

  • /html/com_content/category/blog.php qui affiche la page avec tous les articles d'une catégorie.

    Remplacez :

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">

    par

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/FAQPage">
  • Remplacez :

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

    par

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  • /html/com_content/category/blog_item.php

    Remplacez:

    <?php echo $this->item->introtext; ?>

    par

    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">	
    <?php echo $this->item->introtext; ?>
    </div>

Maintenant, vous pouvez appliquer ces overrides pour que vos pages FAQ aient le marquage Schema.

Hornshadow Schema FAQpage markup

Aperçu du code source d'une page FAQ avec les données structurées

Affichons maintenant notre Foire Aux Questions

Amusons nous un peu et créons une override pour afficher les catégories de notre FAQ !

Dans cet exemple, le titre (le titre de la page) est affiché avec un sous-titre en dessous (La description alternative de la catégorie) et centré (la classe CSS de la page). Ensuite, les catégories enfant avec pour chacune d'entres elles: l'image, le titre et la description.

Pour obtenir ceci, il suffit simplement de créer une override du fichier /html/com_content/categories/default_items.php avec ces modifications:

  • Ajouter la classe Bootstrap 4 col-md-4 pour afficher les 3 catégories sur 3 colonnes,
  • Déplace l'image de la catégorie au dessus du titre,
  • Ajouter un lien sur l'image de la catégorie.

Voici le code final :

<?php foreach ($this->items[$this->parent->id] as $id => $item) : ?>
<div class="col-md-4">
	<?php
		if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
		if (!isset($this->items[$this->parent->id][$id + 1]))
		{
			$class = ' class="last"';
		}
	?>
	<div <?php echo $class; ?> >
		<?php $class = ''; ?>
		<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
		<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>"><img src="<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>" /></a>
		<?php endif; ?>
		<h3 class="page-header item-title">
			<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>">
			<?php echo $this->escape($item->title); ?></a>
		</h3>
		<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
		<span class="" title="<?php echo JHtml::_('tooltipText', 'COM_CONTENT_NUM_ITEMS_TIP'); ?>">
			<?php echo JText::_('COM_CONTENT_NUM_ITEMS'); ?>&nbsp;<?php echo $item->numitems; ?>
		</span>
		<?php endif; ?>
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<a id="category-btn-<?php echo $item->id; ?>" href="#category-<?php echo $item->id; ?>"
		data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right" aria-label="<?php echo JText::_('JGLOBAL_EXPAND_CATEGORIES'); ?>"><span class="icon-plus" aria-hidden="true"></span></a>
		<?php endif; ?>          
		
		<?php if ($this->params->get('show_subcat_desc_cat') == 1) : ?>
		<?php if ($item->description) : ?>
		<div class="category-desc ++">
			<?php echo JHtml::_('content.prepare', $item->description, '', 'com_content.categories'); ?>
		</div><br />
		<?php endif; ?>
		<?php endif; ?>
		
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<div class="collapse fade" id="category-<?php echo $item->id; ?>">
			<?php
				$this->items[$item->id] = $item->getChildren();
				$this->parent = $item;
				$this->maxLevelcat--;
				echo $this->loadTemplate('items');
				$this->parent = $item->getParent();
				$this->maxLevelcat++;
			?>
		</div>
		<?php endif; ?>
	</div>
	<?php endif; ?>
</div>
<?php endforeach; ?>

Ce qui doit vous donner le rendu suivant en frontend :

Hornshadow foire aux questions categories

Voir cette page

Maintenant, lorsque vous cliquez sur l'image ou sur le titre d'une catégorie, vous affichez la page où sont listés tous les articles de cette catégorie.

Si besoin,vous pouvez également customiser cette vue en overridant le fichier /html/com_content/article/default.php pour que chaque question / réponse soit plus visible par l'utilisateur final.

N'oubliez pas d'ajouter une solution de contact (formulaire ou bouton) à votre FAQ au cas où les internautes auraient des questions qui ne seraient pas affichées sur votre page.

Hornshadow category FAQ page

Voir cette page

Conclusion

Et voilà!
Cette section Foire Aux Questions est plutôt simple mais elle est efficace et elle fait le job. Les internautes accèdent aux réponses en un seul clic et ils peuvent naviguer les vers autres catégories de votre FAQ si besoin. La gestion de cette section est également très simplifiée si vous voulez ajouter / modifier / supprimer une question dans une catégorie.

N'hésitez pas à copier, améliorer et utiliser cette FAQ dans votre site Web Joomla.

Le Joomla Override Challenge

En partenariat avec Viviana Menzel, nous avons créé le non-officiel Joomla Override Challenge. Notre objectif est de créer chaque mois, une nouvelle override basée sur une extension native de Joomla ou sur un projet. Si vous souhaitez participer, n'hésitez pas à contacter Viviana ou moi :)

Voir la Foire Aux Questions avec Joomla réalisée par Viviana : https://www.dr-menzel-it.de/blog/override-challenge-f-a-q

Dans le cadre du #JoomlaOverrideChallenge, nous devons créer une foire aux questions rien qu'avec Joomla, c'est à dire sans installer d'extensions tierces. Voici comment j'ai réalisé ma FAQ.

Une nouvelle demande

En Septembre 1320, le seigneur de Hornshadow convoqua le conseil municipal pour valider l'ajout d'une foire aux questions sur le site Web de la ville. Tout le monde a pensé que c'était une excellente idée car cela pouvait aider les habitants de la ville et les visiteurs.

Le conseil municipal a également souhaité que cette nouvelle section couvre toutes les questions que les utilisateurs peuvent avoir aujourd'hui mais aussi à l'avenir. Pour cette raison, cette section devrait être facile à gérer.

Après cette réunion, les membres du conseil municipal ont commencé à recueillir les questions posées par la population. Quelques semaines plus tard, ils avaient reçu de nombreuses questions (souvent les mêmes) à propos de la ville, des quartiers et des activités.

Créer une Foire Aux Questions avvec Joomla

Basiquement, une Foire Aux Questions est composée de... questions et de réponses. Il y a plusieurs manières de présenter cela sur un site Web mais le mieux, selon moi, est de garder cette section aussi simple que possible en évitant un trop grand nombre de clics à l'utilisateur final. Qui a vraiment envie de cliquer sur une question juste pour être obligé de lire la réponse ?

Si le référencement naturel est important pour vous, il vous faudra également envisager d'ajouter le marquage Schema à votre Foire Aux Questions.

Donc, les caractéristiques de cette Foire Aux Questions seront les suivantes :

  • Aussi simple que possible: le moins de clics possible pour lire une réponse.
  • Facile à gérer pour le.la webmaster: ajouter ou supprimer des questions doit être le plus simple possible.
  • SEO friendly: cette section doit pouvoir inclure le marquage Schema si besoin.

Toutes les questions collectées par le conseil municipal furent réparties en trois catégories: les questions à propos du conseil municipal, les questions concernant les quartiers et les questions relatives aux activités.

I. Les catégories

Toute la partie FAQ du site sera gérée par le composant natif de Joomal com_content. D'abord, il faut créer une catégorie parente Foire Aux Questions et ensuite, ajouter les trois catégories enfant:

  • Le conseil municipal
  • Les quartiers
  • Les activités
Hornshadow foire aux questions categories

Pour chaque catégorie enfant, il y a une brève description et une image.

II. Les Questions (et leurs réponses)

Vous l'avez deviné, une question est le titre d'un article et sa réponse est le contenu de l'article.

Maintenant, ajoutez simplement vos articles dans les catégories adéquates.

Hornshadow foire aux questions article

III. Le lien de menu de la Foire Aux Questions

Pour afficher les catégories, il faut utiliser le lien de menu Liste de toutes les catégories et j'ai sélectionné la catégorie parente Foire Aux Questions.
Voici les paramètres qui ont été appliqués à ce lien de menu :

foire aux questions categories menu item

Onglet catégories

Hornshadow city category menu item

Onglet catégorie

Hornshadow city page title

Onglet Page title

IV. Les liens de menus pour les catégories enfant

La dernière étape ici consiste à créer une lien de menu de type Blod d'une catégorie pour chaque catégorie de votre Foire Aux Questions.
Voici les paramètres qui ont été appliqués ici :

Hornshadow city categories menu item

Onglet Details

Hornshadow city category menu item

Onglet Catégory

Hornshadow menu item tab options

Onglet Options

Hornshadow menu item tab links type

Onglet Type de liens

Le marquage Schema pour une Foire Aux Questions

Bien sur, ce n'est pas indispensable mais si le référencement est important pour vous, alors ce qui suit doit vous intéresser.

Il existe un marquage spécifique pour identifier une page de type Foire Aux Questions grâce aux données structurées. Tout ce qu'il faut savoir à ce sujet est parfaitement expliqué et décrit ici : Baliser vos pages de questions fréquentes avec des données structurées .

Voici le marquage à appliquer pour une page Foire Aux Questions :

<!-- Marquage pour la page -->
<html itemscope itemtype="https://schema.org/FAQPage">
	<body>
	
		<!-- Marquage pour chaque question -->
		<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
			<h3 itemprop="name">Curabitur in felis in nunc?</h3>
			
			<!-- Marquage pour chaque réponse -->
			<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
				<div itemprop="text">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa felis, feugiat in facilisis quis, eleifend eget sapien. Praesent et molestie orci, consectetur lobortis tortor. Phasellus facilisis, arcu ac tincidunt placerat, ligula nibh vestibulum nibh, eu volutpat libero enim sed lorem. Suspendisse nec ultrices odio.</p>
				</div>
			</div>			
		</div>
	</body>	
</html>

Pour implémenter ce marquage spécifique dans votre site Web, vous devez créer une override pour les fichiers suivants :

  • /html/com_content/category/blog.php qui affiche la page avec tous les articles d'une catégorie.

    Remplacez :

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/Blog">

    par

    <div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="https://schema.org/FAQPage">
  • Remplacez :

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

    par

    <div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?>" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
  • /html/com_content/category/blog_item.php

    Remplacez:

    <?php echo $this->item->introtext; ?>

    par

    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">	
    <?php echo $this->item->introtext; ?>
    </div>

Maintenant, vous pouvez appliquer ces overrides pour que vos pages FAQ aient le marquage Schema.

Hornshadow Schema FAQpage markup

Aperçu du code source d'une page FAQ avec les données structurées

Affichons maintenant notre Foire Aux Questions

Amusons nous un peu et créons une override pour afficher les catégories de notre FAQ !

Dans cet exemple, le titre (le titre de la page) est affiché avec un sous-titre en dessous (La description alternative de la catégorie) et centré (la classe CSS de la page). Ensuite, les catégories enfant avec pour chacune d'entres elles: l'image, le titre et la description.

Pour obtenir ceci, il suffit simplement de créer une override du fichier /html/com_content/categories/default_items.php avec ces modifications:

  • Ajouter la classe Bootstrap 4 col-md-4 pour afficher les 3 catégories sur 3 colonnes,
  • Déplace l'image de la catégorie au dessus du titre,
  • Ajouter un lien sur l'image de la catégorie.

Voici le code final :

<?php foreach ($this->items[$this->parent->id] as $id => $item) : ?>
<div class="col-md-4">
	<?php
		if ($this->params->get('show_empty_categories_cat') || $item->numitems || count($item->getChildren())) :
		if (!isset($this->items[$this->parent->id][$id + 1]))
		{
			$class = ' class="last"';
		}
	?>
	<div <?php echo $class; ?> >
		<?php $class = ''; ?>
		<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
		<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>"><img src="<?php echo $item->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($item->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>" /></a>
		<?php endif; ?>
		<h3 class="page-header item-title">
			<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id, $item->language)); ?>">
			<?php echo $this->escape($item->title); ?></a>
		</h3>
		<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
		<span class="" title="<?php echo JHtml::_('tooltipText', 'COM_CONTENT_NUM_ITEMS_TIP'); ?>">
			<?php echo JText::_('COM_CONTENT_NUM_ITEMS'); ?>&nbsp;<?php echo $item->numitems; ?>
		</span>
		<?php endif; ?>
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<a id="category-btn-<?php echo $item->id; ?>" href="#category-<?php echo $item->id; ?>"
		data-toggle="collapse" data-toggle="button" class="btn btn-mini pull-right" aria-label="<?php echo JText::_('JGLOBAL_EXPAND_CATEGORIES'); ?>"><span class="icon-plus" aria-hidden="true"></span></a>
		<?php endif; ?>          
		
		<?php if ($this->params->get('show_subcat_desc_cat') == 1) : ?>
		<?php if ($item->description) : ?>
		<div class="category-desc ++">
			<?php echo JHtml::_('content.prepare', $item->description, '', 'com_content.categories'); ?>
		</div><br />
		<?php endif; ?>
		<?php endif; ?>
		
		<?php if (count($item->getChildren()) > 0 && $this->maxLevelcat > 1) : ?>
		<div class="collapse fade" id="category-<?php echo $item->id; ?>">
			<?php
				$this->items[$item->id] = $item->getChildren();
				$this->parent = $item;
				$this->maxLevelcat--;
				echo $this->loadTemplate('items');
				$this->parent = $item->getParent();
				$this->maxLevelcat++;
			?>
		</div>
		<?php endif; ?>
	</div>
	<?php endif; ?>
</div>
<?php endforeach; ?>

Ce qui doit vous donner le rendu suivant en frontend :

Hornshadow foire aux questions categories

Voir cette page

Maintenant, lorsque vous cliquez sur l'image ou sur le titre d'une catégorie, vous affichez la page où sont listés tous les articles de cette catégorie.

Si besoin,vous pouvez également customiser cette vue en overridant le fichier /html/com_content/article/default.php pour que chaque question / réponse soit plus visible par l'utilisateur final.

N'oubliez pas d'ajouter une solution de contact (formulaire ou bouton) à votre FAQ au cas où les internautes auraient des questions qui ne seraient pas affichées sur votre page.

Hornshadow category FAQ page

Voir cette page

Conclusion

Et voilà!
Cette section Foire Aux Questions est plutôt simple mais elle est efficace et elle fait le job. Les internautes accèdent aux réponses en un seul clic et ils peuvent naviguer les vers autres catégories de votre FAQ si besoin. La gestion de cette section est également très simplifiée si vous voulez ajouter / modifier / supprimer une question dans une catégorie.

N'hésitez pas à copier, améliorer et utiliser cette FAQ dans votre site Web Joomla.

Le Joomla Override Challenge

En partenariat avec Viviana Menzel, nous avons créé le non-officiel Joomla Override Challenge. Notre objectif est de créer chaque mois, une nouvelle override basée sur une extension native de Joomla ou sur un projet. Si vous souhaitez participer, n'hésitez pas à contacter Viviana ou moi :)

Voir la Foire Aux Questions avec Joomla réalisée par Viviana : https://www.dr-menzel-it.de/blog/override-challenge-f-a-q

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net