Ajouter à votre site WordPress du contenu comme des images, des vidéos, des boutons, des accordéons, ou même les articles de votre site. Si vous n’avez pas de connaissances, cela peut vous paraître complexe, et si vous êtes vous même développeur, ça peut vous prendre du temps. A l’instar de Elementor, Les shortcodes vous permettent de le faire de manière très rapide et sans aucune connaissance. Voyons ici Shortcodes Ultimate qui est également un incontournable dans ce domaine.
Avant-propos sur l’usage d’un plugin de Shortcode comme Ultimate
Lancé en 2010 par Vladimir Anokhin, le plugin Shortcodes Ultimate s’est rapidement imposé comme l’un des outils les plus populaires pour enrichir visuellement les contenus WordPress, sans avoir à coder une ligne de HTML ou de CSS. À une époque où les constructeurs de pages n’étaient pas encore répandus, ce plugin a offert une solution simple et puissante pour ajouter des boutons, onglets, accordéons, colonnes ou encadrés à ses pages ou articles. Plus d’une décennie plus tard, Shortcodes Ultimate reste un incontournable, avec plus de 800 000 installations actives et des milliers d’avis positifs. S’il a su perdurer face à l’émergence de mastodontes comme Elementor ou Divi, c’est parce qu’il répond à un besoin différent : Celui d’enrichir ponctuellement un contenu, sans transformer toute la page en maquette visuelle.
Que vous soyez un blogueur, une PME, un administrateur de site associatif ou même un professionnel du web cherchant une solution légère pour styliser vos contenus, ce plugin vous offre un large éventail de composants configurables, facilement insérables via l’éditeur WordPress. Dans un contexte où la performance, la simplicité et l’intégration avec Gutenberg comptent autant que l’esthétique, Shortcodes Ultimate représente un juste équilibre entre flexibilité et sobriété. Pensez également à créer vos propres shortcodes lorsque cela suffit !
Fonctionnement du plugin Shortcode Ultimate
Shortcodes Ultimate s’installe comme n’importe quelle extension gratuite du répertoire WordPress. Vous pouvez le rechercher via le menu Extensions > Ajouter de votre tableau de bord WordPress, ou le télécharger directement depuis le dépôt officiel. Si vous êtes novice, vous pouvez suivre ce tutoriel sur l’ajout d’un plugin à son site WordPress.
Une fois le plugin installé et activé, un nouveau menu intitulé « Shortcodes » apparaît dans la colonne latérale gauche de votre administration. Ce menu propose plusieurs sous-sections utiles :
- Réglages : pour personnaliser certains comportements généraux (ex. : désactiver les shortcodes dans les widgets).
- Exemples : un aperçu visuel des principaux composants disponibles, pratique pour voir ce que chaque shortcode génère.
- Pense-bête : une documentation rapide intégrée au back-office pour se rappeler de la syntaxe des principaux shortcodes.
- Add-ons : une passerelle vers les extensions premium du plugin, qui débloquent des fonctionnalités supplémentaires (timeline, lightbox avancée, popups, etc.).
Intégration dans l’éditeur de contenu
Le plugin Shortcodes Ultimate fonctionne avec l’éditeur classique (TinyMCE) comme avec Gutenberg. Il ajoute un bouton « Insérer un shortcode » au-dessus de la zone de contenu. Ce bouton ouvre une interface simple dans laquelle vous choisissez un élément à ajouter (onglet, bouton, boîte, etc.), que vous pouvez ensuite personnaliser : couleur, taille, icône, style, animation… Une fois terminé, le plugin génère automatiquement le shortcode correspondant.
Voici un exemple typique de shortcode généré :
Cliquez iciCe shortcode est interprété à l’affichage et transformé en élément HTML stylisé. Vous pouvez l’insérer aussi bien dans un article, une page, un widget ou une section personnalisée.
Shortcodes Ultimate vs builders visuels : une approche différente
Shortcodes Ultimate ne remplace pas un constructeur de page comme Elementor, Divi ou WPBakery. Il ne s’agit pas d’un outil de glisser-déposer, mais d’une bibliothèque de composants réutilisables. Cela le rend plus léger et rapide, mais aussi plus limité en matière de mise en page complète.
| Shortcodes Ultimate | Constructeurs de pages (Elementor, Divi…) |
|---|---|
| Léger, rapide à prendre en main | Interface visuelle complète avec glisser-déposer |
| Ajoute des éléments enrichis dans des contenus existants | Structure entièrement une page ou un site |
| Compatible avec tous les thèmes | Peut entraîner des conflits ou lenteurs sur certains thèmes |
| Peu intrusif, facile à désinstaller | Peut laisser des shortcodes propriétaires visibles |
Shortcodes Ultimate est donc idéal pour enrichir le contenu éditorial sans toucher à la structure du site. Pour les utilisateurs qui veulent styliser rapidement une page de blog ou ajouter un bouton à un article, c’est une alternative souple, intuitive et rapide aux builders plus lourds.
Exemples de shortcodes gérés avec Ultimate Shortcodes
En explorant l’onglet Exemples du plugin Shortcodes Ultimate, vous accédez à une bibliothèque de composants prêts à l’emploi. Chaque exemple propose un aperçu du rendu et un bouton « Get the code » qui vous fournit le shortcode à copier. Même les débutants peuvent le modifier facilement grâce à une syntaxe claire.
Exemple d’accordéon personnalisé
Pour créer un accordéon dans une page, voici un exemple de shortcode à insérer :
Exemple visuel généré
Ce shortcode produit un accordéon élégant, comme dans l’exemple ci-dessous :
Le plugin vous propose bien d’autres composants : boutons animés, vidéos embarquées, icônes, infobulles, séparateurs, citations visuelles… Il offre une excellente base pour enrichir rapidement votre site WordPress sans recours à un constructeur visuel complet. Cette approche permet une intégration rapide dans vos contenus, même au sein d’un article de blog ou d’un produit WooCommerce. Les styles sont sobres mais efficaces, et peuvent être personnalisés via CSS si besoin. En explorant les autres exemples fournis, vous trouverez des dizaines d’options : boutons stylisés, vidéos embarquées, animations CSS, boîtes de mise en valeur, listes avec icônes, barres de progression, infobulles, citations… C’est un véritable coffre à outils pour dynamiser votre site WordPress sans surcharge de plugins.
Utiliser des shortcodes Ultimate en écrivant une page ou un article
Vous ne trouvez pas ce que vous voulez dans les exemples, et les allez-retours vers l’interface de Shortcode Ultimate vous font perdre du temps? Sachez que Shortcode Ultimate peut faire bien plus de choses que dans les exemples, et vous y avez accès directement lors de l’écriture d’une page ou d’un article. Allez, je vous le montre !
En cliquant sur insérer le shortcode, vous arrivez sur une interface où vous n’avez que l’embarras du choix en termes de shortcode. C’est un peu différent des builders de WP mais vous pouvez ici choisir ce que vous voulez. Ensuite, configurez-le comme il vous plaît. on y retrouve d’ailleurs notre accordéons de l’exemple précédent.
petite astuce : Utilisez la prévisualisation en direct pour voir le résultat avant d’insérer le shortcode !
Modification CSS des shortcodes Ultimate
Le plugin Shortcodes Ultimate offre une interface riche en options de personnalisation. Toutefois, pour aller au-delà des réglages visuels de base (couleurs, tailles, alignement), il est souvent nécessaire d’intervenir directement dans le code CSS afin d’adapter parfaitement les composants à votre identité graphique ou à votre thème WordPress.
1. Personnalisation via l’interface du plugin
Lors de l’insertion d’un shortcode via l’éditeur WordPress, une fenêtre vous permet de configurer visuellement :
- La couleur du fond et du texte (en hex ou via une palette),
- La taille du composant (small, medium, large),
- Le rayon des bordures (border-radius),
- La présence d’icônes ou d’effets d’animation,
- L’alignement, les marges intérieures (
padding) et extérieures (margin).
Bien que suffisants dans de nombreux cas, ces réglages ont leurs limites pour un site à forte identité visuelle. D’où l’intérêt de passer à une personnalisation CSS avancée.
2. Surcharge CSS dans votre thème
Chaque élément généré par Shortcodes Ultimate utilise des classes CSS propres. Par exemple, un bouton utilisera la classe .su-button, un accordéon .su-accordion et ses sections .su-spoiler. Cela permet de cibler chaque composant précisément dans votre feuille de style.
Exemple de shortcode pour un bouton :
Cliquez iciPersonnalisation CSS possible :
.su-button {
background-color: #004488;
color: #ffffff;
padding: 14px 24px;
border-radius: 8px;
font-weight: bold;
transition: background 0.3s ease;
}
.su-button:hover {
background-color: #0066aa;
}Accordéon personnalisé :
.su-accordion {
border-left: 4px solid #0073aa;
margin-bottom: 2rem;
}
.su-spoiler-title {
background: #f5f5f5;
padding: 12px 16px;
font-weight: 600;
cursor: pointer;
}
.su-spoiler-content {
background: #ffffff;
padding: 16px;
font-size: 0.95rem;
color: #444;
}3. Où placer votre CSS personnalisé ?
- Dans Apparence > Personnaliser > CSS additionnel (option rapide),
- Dans le fichier
style.cssde votre thème enfant, - Via un plugin de CSS dédié (ex. : Simple Custom CSS).
4. Ajout de classes personnalisées
La plupart des shortcodes acceptent un attribut class. Exemple :
Voir l’offreVous pouvez alors styliser ce bouton indépendamment :
.btn-special {
background: linear-gradient(to right, #ff6600, #ff9900);
color: #fff;
padding: 12px 28px;
border-radius: 6px;
font-weight: bold;
text-transform: uppercase;
}5. Bonnes pratiques dans la gestion des CSS appliqués sur un shortcode
- Évitez de surcharger globalement tous les shortcodes (privilégiez les classes personnalisées),
- Utilisez
!importantuniquement en cas de conflit CSS inévitable, - Testez vos styles sur mobile et tablette,
- Préférez les unités relatives (
rem,%) aux pixels pour un design responsive, - Documentez vos styles dans un fichier séparé si vous êtes en équipe ou utilisez Git.
Conclusion sur Shortcode Ultimate
Shortcodes Ultimate permet une personnalisation avancée grâce à sa structure CSS claire et bien nommée. En combinant les options graphiques de base et vos propres règles CSS, vous pouvez parfaitement intégrer les composants du plugin à votre design global, qu’il soit sobre ou complexe. Cela en fait un excellent compromis entre simplicité et contrôle pour enrichir visuellement votre site WordPress.
0 commentaires