Blog

From the word itself, the word shortcode means exactly that: A short code; a shortcut code.

Les shortcodes vous permettent d’ajouter des éléments à votre site web (comme des widgets, par exemple), sans avoir à insérer d’énormes blocs de code comme le feraient normalement les développeurs.

Par exemple, un morceau de code classique, en termes de longueur, ressemblerait probablement à quelque chose comme ceci :

<html>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam id aliquam turpis. Vivamus quis arcu tincidunt, finibus urna eget, placerat risus.

Aliquam arcu massa, finibus et lacinia sed, scelerisque nec augue. Quisque eu viverra sapien, vel consequat lorem. Integer vel erat tortor.

Phasellus condimentum magna eget congue venenatis. Suspendisse blandit vehicula consectetur.

Nullam sodales eleifend massa, in bibendum purus fermentum id.

Morbi et turpis feugiat, malesuada ipsum sit amet, interdum nulla. In non ante nec nisl mattis gravida sit amet id lectus.

</html>​

Pour cet exemple, imaginons que le morceau de code ci-dessus vous permette d’ajouter un paragraphe entier de texte de remplacement Lorem Ipsum.

Now, a shortcode with the same exact function as the code above will look something like this, in contrast:

[lorem ipsum dolor estat]Lorem Ipsum[/lorem]​

You can see how they’re miles different from each other in terms of length.

Maintenant, imaginez que ces deux morceaux de code – le long code d’origine, par opposition au shortcode contenant simplement le mot « lorem » – fassent exactement la même chose : ajouter du texte Lorem Ipsum.

This is what shortcodes do. They make adding widgets, functions, and a bunch of other cool stuff easier for both ordinary WordPress users and developers alike.

Where can I find shortcodes?

Si vous avez une extension ou un widget préféré, il y a de fortes chances qu’un shortcode soit mis à votre disposition.

Shortcodes Ultimate, for example, will let you choose from hundreds of shortcodes that you can use on Page Builder Sandwich (or anywhere, actually) by simply grabbing the shortcode of your choice from Shortcode Ultimate’s repository or documentation page.

Adding Custom Shortcodes on PBS

Sur Page Builder Sandwich, vous pouvez ajouter des shortcodes directement sur votre page en les saisissant simplement au clavier ou en les copiant-collant dans votre zone de contenu.

C’est ce que nous avons fait ci-dessous avec un shortcode de Shortcodes Ultimate, en ajoutant une boîte de contenu sur la page de démonstration de Page Builder Sandwich :

Another thing you’ll find handy when using Page Builder Sandwich is our Shortcode Mapping feature.

D’après l’un de nos précédents articles sur le mappage de shortcodes, la définition est la suivante :

Shortcode mapping is like letting Page Builder Sandwich memorize all the shortcodes available on your site: their names, descriptions, their attributes, and what each of these attributes do.

Cela signifie notamment que vous n’avez plus besoin de rechercher manuellement vos shortcodes dans leurs documentations ou dépôts respectifs.

Tant que l’extension contenant le shortcode est installée sur votre site WordPress, celui-ci sera facilement utilisable sur Page Builder Sandwich.

So for example, if I wanted to add a WooCommerce shortcode on my page, all I have to do is make sure that it’s installed on my WordPress site, like so:

And then, to actually add the shortcode, I’ll just go to my page, and drag and drop the Shortcode Element:

Because we already have WooCommerce installed on our WordPress site, you can see that all of the shortcodes that are available on the WooCommerce plugin are already available on Page Builder Sandwich. This is what Shortcode Mapping is.

You can also see on the upper left corner that the ACF (Advanced Custom Fields) and MailChimp shortcodes are available– because we have those instlled on our WordPress site, too.

Ainsi, si vous souhaitez ajouter des shortcodes personnalisés, ou des shortcodes que vous avez créés vous-même, c’est tout à fait possible, tant qu’ils sont installés sur votre site WordPress.

Here are some other helpful plugins that you can use to create your own custom shortcodes:

Il existe des dizaines et des dizaines de constructeurs de pages, et vous devez vous demander : qu’est-ce qui rend Page Builder Sandwich si spécial ? Pourquoi voudriez-vous vous embêter à l’utiliser si vous en avez déjà un sous la main ?

Dans cet article, je vais énumérer quelques fonctionnalités clés de Page Builder Sandwich qui le rendent unique et absolument incontournable, tant pour les créateurs de contenu que pour les designers. Si vous ne savez pas ce qu’est un constructeur de page ni pourquoi vous en avez besoin, ne vous inquiétez pas, nous avons des ressources pour vous aider.

1. Vous ne verrez pas seulement une représentation visuelle de votre contenu, vous voyez et modifiez votre contenu réel

Dans d’autres constructeurs de pages, vous voyez des zones qui ne font que représenter votre contenu. Vous disposez principalement votre contenu avec des blocs et des formes rectangulaires, et le résultat ressemble plus à une structure de ce à quoi votre contenu ressemblera éventuellement sur votre page. Cela oblige à cliquer constamment sur le bouton de prévisualisation juste pour voir à quoi ressembleront les résultats.

Avec Page Builder Sandwich, toutes les modifications s’effectuent sur l’interface publique (front-end) de votre site et vous modifiez directement votre contenu pour une véritable expérience « ce que vous voyez est ce que vous obtenez » (WYSIWYG).

2. Une édition directe rapide et facile sans toutes ces boîtes de dialogue popup agaçantes

Les popups ont toujours été un élément de base des constructeurs de pages. Dans la plupart d’entre eux, si vous souhaitez modifier quoi que ce soit dans votre mise en page, qu’il s’agisse d’un titre, du libellé d’un bouton ou d’un court slogan, vous devez d’abord attendre qu’une boîte de dialogue popup s’ouvre pour effectuer vos modifications à l’intérieur.

Nous nous sommes fixé comme objectif de minimiser l’utilisation des popups à tous les niveaux dans Page Builder Sandwich. En supprimant les popups, la modification de tout contenu devient plus simple et plus fluide que jamais.

L’édition se fait de manière simple et directe : cliquez sur votre texte pour y placer votre curseur et commencez à taper. Vous n’avez plus besoin d’attendre qu’une boîte de dialogue contextuelle contenant un éditeur TinyMCE s’ouvre pour commencer vos modifications. Le meilleur dans tout cela, c’est que vous pouvez toujours glisser-déposer votre contenu.

Une autre innovation qui facilite l’édition sans tracas est l’inspecteur omniprésent. L’inspecteur sert à la fois de boîte à outils et d’éditeur de propriétés. Les outils de mise en forme de votre contenu : couleurs du texte, titres, ajustements de la taille de police, marges, espacements internes (paddings), bordures, citations et bien d’autres sont à portée de clic.

3. Fonctionnalités WordPress réutilisées

Une autre chose que nous avons remarquée chez les autres constructeurs de pages, c’est qu’ils réinventent souvent la roue. Certains implémentent leurs propres sélecteurs de couleurs, modules de téléversement d’images, créateurs de galeries et divers autres outils. Il n’y a rien de mal à cela en soi, mais WordPress est une mine d’or d’extraits de code, alors pourquoi ne pas les utiliser ?

WordPress est une plateforme immense et formidable qui contient de nombreux outils fantastiques créés par une multitude de contributeurs exceptionnels. Page Builder Sandwich utilise autant que possible les fonctionnalités déjà intégrées à WordPress.

Au lieu d’utiliser notre propre sélecteur de couleurs, nous utilisons le sélecteur de couleurs Iris. Au lieu de notre propre outil de téléversement d’images, nous utilisons le gestionnaire de médias. Il y a aussi backbonejs, underscorejs, wp.hooks et wp.shortcode, pour ne citer que quelques scripts très pratiques. Nous les utilisons tous, ce qui nous a facilité la vie et permet d’obtenir une base de code plus stable.

La réutilisation des fonctionnalités de WordPress a également réservé d’excellentes surprises. Par exemple, puisque nous avons utilisé le gestionnaire de médias pour insérer des images, nous avons eu l’agréable surprise de pouvoir également gérer d’emblée les galeries WordPress, les listes de lecture vidéo et audio, ainsi que les URL distantes. Nous pouvions également simplement utiliser le gestionnaire de médias pour retoucher les images, ce qui nous a épargné des heures de casse-tête de développement inutiles.

4. Navigation au clavier et raccourcis

Dans d’autres constructeurs de pages, la souris est votre meilleure amie. Vous glissez et déposez des éléments avec elle et double-cliquez pour les modifier. Mais le clavier est souvent négligé.

Par exemple, dans certains constructeurs, vous ne pouvez pas facilement modifier le texte d’un paragraphe ou d’une section situé juste au-dessus de l’endroit où vous êtes en train d’écrire, car vous devez fermer une boîte de dialogue popup puis cliquer pour en ouvrir une nouvelle. Dans Page Builder Sandwich, vous pouvez naviguer avec votre clavier. Utilisez les touches fléchées pour naviguer entre vos contenus ; cela fonctionne même si votre autre contenu est niché dans une autre rangée ou colonne.

Une autre fonctionnalité importante concerne les raccourcis clavier Annuler et Rétablir. Ils peuvent sembler anodins au premier abord, mais pensez-y : et si vous glissiez-déposiez accidentellement votre contenu au mauvais endroit ? Dans certains constructeurs de pages, vous devriez le reglisser jusqu’à sa position d’origine. Dans Page Builder Sandwich, Annuler et Rétablir fonctionnent tous les deux. Ainsi, que vous souhaitiez modifier ce que vous venez de taper ou remettre en place du contenu déplacé (voire plusieurs contenus déplacés), appuyez simplement sur Annuler ou Rétablir. Annuler et Rétablir fonctionnent pour le contenu glissé-déposé et même pour les modifications de propriétés telles que la taille des polices et les espacements de rangées. Cela en fait des outils puissants dans votre arsenal d’édition.

5. Un véritable constructeur de pages front-end – Une expérience d’édition plus relaxante et sans tracas

Notre état d’esprit pendant le développement a été que l’édition sur l’interface publique ne doit pas donner l’impression d’utiliser encore des outils d’administration (back-end). On ne devrait pas avoir le sentiment que le constructeur a d’abord été créé pour le back-end puis simplement porté sur le front-end.

Dans l’ensemble, pour moi, le principal élément différenciateur de Page Builder Sandwich est que nous l’avons conçu dans le but d’être un « véritable » constructeur de pages front-end – une réinvention de ce que devrait être l’édition sur l’interface publique.

Si vous êtes un blogueur chevronné dont toute la création de contenu s’articule autour de la rédaction d’articles complets contenant occasionnellement une image d’illustration, l’éditeur de contenu TinyMCE existant suffit peut-être à vos besoins. La boîte à outils actuelle contient déjà les outils nécessaires pour rédiger des articles ; vous disposez de vos outils de mise en forme de texte de base tels que le gras, l’italique, les titres, etc. Mais c’est à peu près tout.

Aucune fonctionnalité conviviale de mise en page

Bien que vous puissiez rédiger des articles avec l’éditeur de contenu TinyMCE actuel, il n’existe aucun moyen décent d’agencer votre contenu autrement que sous la forme d’une seule colonne de texte continue. Par défaut, vous ne pouvez pas disposer votre texte sur deux colonnes ou plus, ni créer du contenu délimité par une couleur d’arrière-plan différente. Si vous souhaitez que les autres sections de votre site web, telles que les pages de destination et les pages de contact, soient uniques, vous aurez besoin d’une forme de fonctionnalités de mise en page de base.

D’autres ont tenté de contourner ce problème en utilisant la fonctionnalité des shortcodes de WordPress. En résumé, les shortcodes permettent d’insérer des extraits de code à l’aide de balises spéciales. Il existe des extensions WordPress qui introduisent différents shortcodes utilisables pour créer du contenu en colonnes. Par exemple, vous pouvez encadrer votre contenu avec plusieurs balises de colonnes si vous souhaitez le placer dans une mise en page sur deux colonnes. Bien que cette méthode « fonctionne », elle n’est pas conviviale visuellement car, au fur et à mesure que vous ajoutez du contenu, tout finit par ressembler à un énorme capharnaüm.

Pour combler ce manque en matière de mise en page, les constructeurs de pages ont vu le jour.

Les constructeurs de pages facilitent la création de contenu mis en page

Les constructeurs de pages vous offrent des outils supplémentaires facilitant l’agencement de votre contenu dans des mises en page uniques. Les constructeurs de pages suppriment généralement l’éditeur de contenu TinyMCE du back-end et le remplacent (ou lui ajoutent) un nouvel éditeur qui vous aide à visualiser votre contenu. Si vous n’avez jamais utilisé de constructeur de pages en back-end auparavant, imaginez un ensemble de blocs où chaque bloc représenterait un type de contenu : une image, du texte ou un shortcode. Il vous permettrait ensuite de les glisser-déposer dans différentes dispositions et colonnes.

Au-delà de la mise en page, les constructeurs de pages facilitent également la création et le placement des shortcodes. Auparavant, vous pouviez voir les shortcodes dans toute leur splendeur brute. Vous voyiez les crochets ainsi que tous les attributs et valeurs mélangés à votre contenu. Les constructeurs de pages intègrent couramment des créateurs de shortcodes : des boîtes de dialogue contextuelles qui rendent le choix des attributs de shortcode bien plus convivial que la simple saisie manuelle.

Les constructeurs de pages en front-end représentent l’avenir

Bien que tout cela offre une meilleure expérience aux concepteurs et aux créateurs de contenu, les constructeurs de pages en back-end présentent un inconvénient majeur inhérent. Bien que vous puissiez voir une représentation visuelle de ce à quoi ressemblerait votre contenu, ce que vous voyez n’est pas votre contenu réel. Cela pousse les utilisateurs à vérifier constamment l’aperçu de leurs pages pour s’assurer que ce qu’ils font est correct. En utilisant des constructeurs de pages en back-end, je clique personnellement facilement au moins 20 fois sur le bouton d’aperçu, simplement pour vérifier si mon contenu est correctement aligné ou si mes marges sont espacées de manière uniforme. C’est une corvée qui fait perdre un temps considérable.

Afin de remédier à ce désagrément, les constructeurs de pages devraient être transposés sur le front-end. Si cela est fait, cela éliminerait les approximations dans la mise en page, puisque vous pourriez voir vos résultats immédiatement.

À l’heure actuelle, il existe de nombreux constructeurs de pages en back-end et seulement une poignée de constructeurs de pages en front-end. Page Builder Sandwich fait partie de cette poignée. Si vous souhaitez en savoir plus sur ce qui rend Page Builder Sandwich unique et pourquoi c’est le bon outil pour vous, lisez l’article Comment Page Builder Sandwich se démarque des autres.

Cet article vous donnera un bref aperçu du fonctionnement de Page Builder Sandwich et se veut une introduction pour ceux qui s’intéressent à la manière dont notre constructeur de page s’intègre aux différents éléments de WordPress. Je ne m’attarderai pas sur les fonctionnalités individuelles de Page Builder Sandwich ; si vous souhaitez les découvrir, rendez-vous sur notre page de vidéos où nous présentons chaque fonctionnalité individuellement à travers de courtes démonstrations vidéo.

Si vous voulez savoir en quoi Page Builder Sandwich se distingue des autres constructeurs de page du marché, consultez notre article En quoi Page Builder Sandwich est différent des autres.

Où se trouve-t-il ? Et que puis-je modifier avec ?

Contrairement à de nombreux autres constructeurs de page, Page Builder Sandwich se trouve sur le front-end de votre site web. Si vous êtes dans le back-end, nous avons ajouté un bouton « Frontend » à côté des boutons de l’éditeur de contenu qui vous amènera sur le front-end de votre page.

Page Builder Sandwich vous permet de modifier vos articles, vos pages et le contenu des types de publication personnalisés. Il ne vous permet cependant pas de modifier directement les listes d’articles de blog de votre page d’accueil ni les autres zones non individuelles de votre site. Considérez les choses ainsi : si ce que vous souhaitez modifier dispose d’un éditeur de contenu dans le back-end (comme « Nouvel article » et « Nouvelle page »), alors Page Builder Sandwich peut être utilisé. Vous pouvez modifier vos pages et articles de blog individuels, et si par exemple vous disposez d’une extension qui ajoute des menus de restaurant ou des éléments de portfolio, vous pouvez également les modifier.

Lorsque vous êtes sur le front-end, nous avons placé un bouton bleu « Modifier avec Page Builder Sandwich » dans votre barre d’administration. Cliquez simplement dessus pour commencer à modifier votre page.

Édition directe du contenu

Avec Page Builder Sandwich, nous avons rendu la modification du contenu aussi simple et fluide que possible. Modifier du contenu est simple et direct : il suffit de cliquer et de taper. C’est aussi simple que cela.

Présentation de l’inspecteur

Nous avons remarqué que beaucoup de constructeurs de page comportent énormément de fenêtres contextuelles (popups). Personnellement, je n’aime pas les popups car elles déconcentrent et vous disent en gros : « hé, arrêtez ce que vous faites tant que vous n’avez pas d’abord rempli ces champs ». Elles brisent la fluidité d’une expérience d’édition par ailleurs agréable. C’est pourquoi nous avons réduit au minimum l’utilisation de popups sur toute la ligne, et nous avons créé l’inspecteur à la place.

L’inspecteur est une zone de type barre latérale qui contient tous les outils de mise en forme et de mise en page dont vous aurez besoin. L’inspecteur peut être ancré à gauche ou à droite de votre écran afin que vous puissiez facilement voir ce que vous modifiez.

Depuis l’inspecteur, vous pouvez ajuster diverses propriétés de texte telles que les titres, la taille de police, le gras, l’italique, les couleurs de texte et bien plus encore. En plus de cela, il vous permet également d’ajouter des images et de créer des rangées ou du contenu en colonnes. Il permet également des modifications plus avancées comme l’ajustement des rangées en pleine largeur de page, les couleurs d’arrière-plan des rangées et des colonnes, l’alignement vertical du contenu, ainsi que les marges et les arrière-plans. Il est très puissant et vous vous surprendrez à l’utiliser la plupart du temps.

Intégration avec les thèmes WordPress

Par nature, Page Builder Sandwich n’inclut presque aucun style prédéfini. Lorsque vous modifiez votre contenu, les styles que vous voyez sont principalement basés sur votre thème.

Intégration avec les shortcodes

Les shortcodes constituent un aspect important de WordPress et vous en utiliserez très probablement un certain nombre sur votre site. Page Builder Sandwich les gère très bien : vos shortcodes s’affichent directement rendus sur le front-end. Les shortcodes restent également modifiables et, mieux encore, après les avoir modifiés, ils s’affichent à nouveau avec vos modifications appliquées.

Pour plus de commodité, vous pourrez modifier vos shortcodes à l’aide de l’inspecteur. Si vous souhaitez plus de contrôle, vous pourrez également double-cliquer sur les shortcodes pour les modifier sous leur forme brute. En outre, tous les shortcodes disponibles sur votre site web sont répertoriés dans l’inspecteur pour une insertion facile dans votre contenu.

Qu’en est-il de la lourdeur du site web ?

Qui aime les sites web lents ? Pas nous, et certainement pas vous. Nous nous sommes assurés que Page Builder Sandwich n’ait pratiquement aucun impact sur les performances de votre site web. Lorsque vous êtes déconnecté, au minimum, seuls les styles CSS des rangées et des colonnes sont mis en file d’attente, ainsi que les scripts JS et CSS nécessaires aux shortcodes que vous avez utilisés.

Pour les développeurs

Si vous êtes développeur et que vous avez des shortcodes dans vos extensions WordPress, Page Builder Sandwich fournit une API de shortcodes afin que vous puissiez facilement proposer à vos clients des champs pour créer et modifier aisément vos shortcodes.

Si vous souhaitez étendre davantage ses capacités ou vous intégrer à certaines parties de Page Builder Sandwich, nous mettons également à disposition un ensemble de hooks d’actions et de filtres très utiles que vous pouvez utiliser.