Deux fonctionnalités de Joomla vous permettent de placer facilement des modules directement dans des articles :

  • loadposition vous permet de publier tous les modules à une position spécifique.
  • loadmodule vous permet de publier seulement un module particulier.

Un de nos étudiants utilisait ces fonctionnalités pour créer ses propres mises en page mais n'était pas satisfait de la façon dont les modules apparaissaient dans son article. Il voulait plus de contrôle.

Ce tutoriel va vous montrer comment placer des modules dans vos articles avec plus de style.

Partie 1. Assurez-vous que le plugin est activé

  • Allez dans Extensions > Plugins.
  • Utilisez le filtre pour trouver le plugin "Content - Load Modules".
  • Vérifiez que son statut est activé. Si c'est un cercle rouge, cliquez dessus et il deviendra vert.

joomla load module

Partie 2. Utilisez le bouton module

Le bouton Module est de loin le moyen le plus simple de placer un module dans un article Joomla.

Dans cet exemple, je vais utiliser l'excellente extension Shack Forms de Joomlashack. Si vous ne connaissez pas encore Shack Forms, consultez cet article qui vous en apprendra plus sur cette extension.

  • La principale chose à faire est de choisir l'option "Statique" lorsque vous créez votre formulaire Shack. C'est l'option "Layout" sur le premier écran de Shack Forms :

static

  • Une fois que vous avez enregistré un formulaire en position statique, cliquez sur le bouton "Module" dans l'éditeur de texte Joomla.

module

  • Cliquez sur le bouton vert du module que vous avez créé :

module placement

  • Le module va maintenant être placé dans l'article, en utilisant le shortcode "loadmodule".

loadmodule

  • Enregistrez l'article et vérifiez ce que cela donne sur votre site. Vous pourrez voir votre nouveau formulaire sur votre site :

whole site

Partie 3. Utilisez loadmodule et loadposition

Il est possible de créer ces shortcodes à la main. Cela peut vous donner plus de contrôle sur la syntaxe. C'est également utile si vous n'utilisez pas l'éditeur de texte Joomla par défaut.

  • Créez un article
  • Chargez le module de connexion en tapant
{loadmodule mod_login}

Vous pouvez utiliser cette syntaxe pour charger un module via son nom.

  • Charger le module « Who's online » en tapant
{loadpositionn whoonline}

Il n'y a pas de position appelée whoonline. Vous pouvez créer vos propres noms de position de module et les utiliser dans cette technique. Nous allons vous montrer comment les créer au fur et à mesure. Pour l'instant, il suffit de créer un article.

Supposons le scénario ci-après. Lors d’une campagne d'adhésion, nous voulons que les visiteurs puissent s’inscrire. S'il y a quelqu'un en ligne, nous voulons pouvoir prendre contact avec lui en cliquant sur son nom. Nous pourrions utiliser quelque chose de puissant comme un module de formulaire de contact ou une liste de contacts. Mais pour cette démonstration, nous avons juste besoin de modules auxquels nous avons tous accès afin de pouvoir pratiquer.

editor

L'image ci-dessus montre à quoi ressemble la page. Actuellement, les modules ne sont pas encore affichés. Apprenons à afficher les modules dans ces positions. Nous avons déjà écrit les shortcodes.

Il faut maintenant créer les modules.

  • Allez dans Extensions > Gestionnaire de modules > Nouveau.
  • Choisissez le module "Who's Online".
  • Donnez un titre au module.
  • Sur le côté droit de l'écran, créez un nom de position. Vous pouvez le faire simplement en tapant dans la case "Position". Dans l'exemple ci-dessous, je tape "whoonline". Vous pouvez utiliser n'importe quel nom tant qu'il est unique.
  • Cliquez sur "Ajouter une position personnalisée".
  • Sauvegardez votre module

new module position

  • Consultez l'article. Notre module nouvellement publié s’affiche maintenant à l'intérieur de l'article. Jusqu'à présent, nous avons chargé un module par nom et par position.

loadposition

Partie 4. Créer des divs pour le placement et le style

Nos deux modules sont à l'intérieur de l'article mais ils ne semblent pas correctement positionnés pour le moment. Mettons les deux modules côte à côte.

  • Modifiez votre article et activez le mode éditeur de code. Si vous avez des problèmes à ce stade, veuillez consulter ce tutoriel.

tutuploadstutuploadstutuploadsmedia 1335916743821

  • L'une des meilleures façons de les mettre côte à côte est d'utiliser des balises div. Créez un wrapper et ajoutez deux divs à l'intérieur de celui-ci. Mettez votre code loadposition / loadmodule dans les divs.

loadposition code

  • C'est à quoi ressemble l'article dans la vue éditeur.

tutuploadstutuploadstutuploadsmedia 1335916876504

  • Le rendu est désormais meilleur sur le site :

tutuploadstutuploadstutuploadsmedia 1335916968396

Si vous savez comment styliser avec du CSS, vous pouvez utiliser des styles afin de créer n'importe quel design. Vous pouvez utiliser des couleurs, ajouter du texte et des images supplémentaires et beaucoup, beaucoup plus encore.

Cet article est une libre traduction de {loadposition} and {loadmodule} in Joomla Articles par Ed Andrea pour OSTraining.

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !

L'auteur : un expert à votre service
Jean-Charles Gautard
Nom : Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Intégrer un module dans un article Joomla Intégrer un module dans un article Joomla
Désormais nous n'avons plus besoin de plug ins tels que Module Anywhere de l'excellent et fiable éditeur Regular...
8 nouvelles fonctionnalités intéressantes de Joomla 4 8 nouvelles fonctionnalités intéressantes de Joomla 4
Bonne nouvelle pour les fans de Joomla : Joomla 4 alpha est sorti et la version stable de Joomla 4 devrait bientôt...

Commentaires (0)

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Affichage des modules Joomla sur mobile, tablette et desktopAffichage des modules Joomla sur mobile, tablette et desktop
La souplesse d'utilisation des modules est une grande force de Joomla. Parmi ses avantages citons notamment ses nombreuses possibilités de positionnement sur la page, l'assignation à plusieurs...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok