Un plugin de mise en page performant : WP Canvas – Shortcode

Vous avez des problèmes de mise en page sur votre site WordPress et vous cherchez un moyen simple de modifier l’affichage de vos articles ou pages ?

J’ai peut-être ce qu’il vous faut avec le plugin WP Canvas – Shortcode.

Présentation

WP Canvas est une extension réalisée par Chris Baldelomar qui vous permet de modifier et d’adapter la mise en page d’articles ou de pages selon votre goût.

Grâce à ce plugin, vous allez pouvoir modifier simplement la mise en forme de vos articles/pages sous WordPress. Ce plugin est vraiment très complet, vous allez ainsi pouvoir :

  • Ajouter des colonnes ou des sections ;
  • Mettre en place des menus de type « accordion, Tabs et Toggle » ;
  • Choisir des styles de bordures différentes ;
  • Insérer des boutons, encadrements, des barres de progression ;
  • Insérer des boutons vers les réseaux sociaux ;
  • Mettre en place des tableaux de tarification ;
  • Surligné du texte en fluo ;
  • Insérer des images avec des étiquettes ;
  • Et de nombreuses d’autres options disponibles.

Comme vous le voyez, la liste et longue des possibilités qu’offre ce plugin.

Installation

Pour l’installation du plugin, on procède comme à l’accoutumé : Extensions > Ajouter.

Spécifier ensuite le nom du plugin dans le champ de recherche, puis valider l’installation en cliquant sur « installer maintenant ».

Installation du plugin WP Canvas

Installation du plugin WP Canvas

Utilisation du plugin WP Canvas

Insérer une option

Pour utiliser l’une des fonctionnalités proposées par l’extension, rien de plus simple.

Une fois l’extension installée, dirigez vous sur une page ou un article. Vous verrez alors apparaitre deux nouveaux champs comme ci-dessous dans votre barre de menu.

Champs d'insertion

Champs d’insertion

Pour ajouter une fonctions, il vous suffit alors de la retrouver dans l’un des deux nouveaux champs, et de cliquer dessus.

Un shortcode va alors s’afficher dans votre page ou article. Il ne vous restera alors plus qu’à adapter la fonction et ajouter les informations concernées.

Exemple avec un cadre à étiquettes (Tabs)

Pour afficher un cadre avec plusieurs onglets : cliquer sur « [ ] » > jQuery > Tabs.

Vous aurez alors les shortcodes suivants qui vont s’afficher :

Shortcodes Tabs

Shortcodes Tabs

Il ne vous reste alors qu’a modifier les différents champ, soit « First Tab » ou « Second Tab » pour le titre des l’onglets et « Sample Content » pour le contenu de l’onglet correspondant.

Vous pouvez également ajouter d’autres onglets en insérer manuellement (ou en copier-coller) un autre shortcode de type « wc_tab title= ».

Vous devriez alors avoir un cadre qui ressemble à ceci :

Le contenu modifié de l’onglet 1 (anciennement Sample Content)

Le contenu modifié de l’onglet 2 (anciennement Sample Content)

L’utilisation des autres fonctionnalités reste très proche de l’exemple démontré ci-dessus. Pour en savoir plus sur les options et modifications possibles par fonctions, je vous conseille de jeter un coup d’œil sur la documentation en ligne de l’extension.

Conclusion

Voilà pour ce plugin, j’espère que l’information vous aura été utile.

L’utilisation de ce plugin est vraiment très pratique, la multitude d’options proposées permet d’éviter d’installer d’autres plugins qui auront comme effet d’alourdir d’autant plus votre site. N’hésitez pas à le tester et me faire un petit retour dans les commentaires.

A bientôt !


Sources : wp-canvas, documentation.canvas.

Partager l'article >Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

1 Comment

  • Biga Amélie

    Reply Reply 5 janvier 2016

    Bonjour,

    Je trouve que ce plugin est top! Cependant, je n’arrive pas à dissocier les catégories de mon site..
    J’ai créé une page avec tous les articles en canvas. Jusque là tout va bien..
    Or, sur une autre page de mon site, je voudrai recréer cette même mise en page mais en dissociant les catégories d’articles.

    Auriez-vous une solution à ce problème?
    Merci d’avance pour votre retour.

    Amélie

Leave A Response

* Denotes Required Field