Les accordéons sont une fonctionnalité très populaire sur internet. Ils permettent de présenter un maximum de contenu dans un espace réduit. En général, ils se présentent sous forme de menus déroulants qui s’affichent à tour de rôle après un clic.
Dans ce tutoriel, vous allez apprendre à créer des accordéons sur votre blog à l’aide du plugin Accordion’s sur WordPress.
Mais avant, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog
Ensuite revenons vers ce pourquoi nous sommes là.
Comment installer le plugin WordPress Accordion’s
La première chose à faire est de télécharger le plugin sur WordPress.org, vous pouvez également l’ajouter depuis votre tableau de bord WordPress.
Comment créer un accordéon
Après l’installation et l’activation du plugin, un nouveau menu fera son apparition sur le menu du tableau de bord. Cliquez sur « New Accordions » pour créer un nouvel accordéon.
Sur cette nouvelle page, identique à la page de création des articles, vous pourrez enregistrer un titre et configurer l’accordéon dans la zone « Accordions Options ».
Découvrez nos 10 plugins WordPress pour créer des onglets sur votre blog
En ce qui concerne cette section, elle est composée de plusieurs éléments.
Tout en haut, vous avez le shortcode correspondant à l’accordéon actuel, copiez-le car nous l’utiliserons ultérieurement dans un article ou une page. Nous allons commencer par créer un contenu en cliquant sur l’onglet « Content ».
Apprenez à reproduire des mise en page en découvrant Comment dupliquer une article ou une page sur WordPress
Sur cet onglet, vous pourrez ajouter un titre, et un contenu. Pour ajouter un nouvel élément à l’accordéon, vous devez cliquer sur le bouton « Add » pour ajouter un nouveau formulaire avec un titre et un contenu.
Sur l’onglet « Style », vous pouvez choisir un style qui s’applique à l’accordéon : thème, arrière-plan, icone, couleur d’arrière-plan ou arrière-plan d’onglet ouvert.
Découvrez aussi Comment personnaliser le CSS de votre site web WordPress
Les couleurs par défaut ont besoin d’être modifiées, car la couleur d’arrière-plan et du texte sont assez similaires « Accordions Header Font Color » et « Default Background Color ».
Après avoir fini vos réglages, n’oubliez pas de sauvegarder votre accordéon. A l’emplacement « Accordions >> Accordions » (c’est-à-dire la première page du plugin), où vous pourrez gérer les différents accordéons disponibles.
Comment ajouter un accordéon à un article
En réalité, il est possible d’ajouter autant d’accordéons dans un article. Vous devez à chaque fois récupérer le shortcode des accordéons et les ajouter à un article ou à une page.
Consultez votre page, pour voir comment se présente votre nouvel accordéon.
Je suis convaincu que vous pouvez faire mieux que moi au niveau du jeu de couleur. Entraînez-vous et votre potentiel se révélera.
Découvrez aussi quelques plugins WordPress premium
Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.
Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.
1. WP Pro Forum System
WP Pro Forum system est un plugin WordPress qui vous permet d’ajouter un forum beau et convivial sur votre site Web. Il dispose de plein de fonctionnalités puissantes qui lui permette de créer un forum ayant un look professionnel.
Le forum est créé pour fonctionner sur l’interface publique de votre site Web, mais les administrateurs peuvent gérer tous les forums, sujets, réponses, catégories et étiquettes à partir du tableau de bord.
De plus, WP Pro Forum system dispose de certains atouts tels que la traduction fonctionnelle grâce à des fichiers mo/po inclus, l’intégration de nombreux modèles pour qu’il convienne au look de votre site web ou encore des filtres personnalisés inclus.
Télécharger | Démo | Hébergement Web
2. Ultimate Membership Pro
Ultimate Membership Pro est un excellent plugin WordPress d’abonnement et de restriction de contenu. Il permet de gérer les utilisateurs selon leur forfait (gratuit ou payant) en créant des niveaux d’accès exclusifs.
Il sera donc possible de protéger tout le contenu de votre site web, ou juste une partie de celui-ci. Il s’agira par exemple d’un cours, d’une leçon, d’une page, d’un produit, d’une catégorie, d’une image, etc…
Ses principales fonctionnalités sont entre autres : la protection du contenu, de multiples niveaux d’accès, le support de plusieurs passerelles de paiement -PayPal, Authorize.net, Stripe, 2CheckOut, Bank Transfer-, la protection partielle du contenu, et bien plus encore…
Télécharger | Démo | Hébergement Web
3. Cube Portfolio
Cube Portfolio est un plugin WordPress de grille qui offre un portfolio puissant, un beau filtrage animé, des légendes personnalisées, etc… Il est parfait pour les projets de portfolios, les galeries d’images, les membres de l’équipe, les articles de blogs, ou tout autre contenu organisé dans une grille.
Grâce au modèle d’outil de création en temps réel, vous pouvez contrôler tous les aspects du plugin : couleurs, polices, dimensions, espacements, bordures, etc…
Il est super facile à utiliser pour les débutants et très personnalisable pour les utilisateurs avancés.
Télécharger | Démo | Hébergement Web
Ressources recommandées
Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.
- Comment faire une liaison externe avec le titre d’un article WordPress
- Comment trouver l’URL (lien) de connexion de votre blog WordPress
- Comment corriger la médiathèque qui ne fonctionne plus sur WordPress
- Comment créer de belles transitions de pages sur WordPress
Conclusion
Voilà ! C’est tout pour ce tutoriel sur l’intégration d’un accordéon sur WordPress. Nous espérons que cet article vous a aidé à apprendre comment en créer et comment les configurer. N’hésitez pas à partager ce tutoriel avec vos amis sur vos réseaux sociaux préférés.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.
Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.
…
