Tout sur les codes courts WordPress

Si vous avez déjà travaillé avec un thème WordPress, vous êtes probablement tombé sur un shortcode WordPress… quelque chose qui ressemble un peu à ceci :

 [button type="twitter"]

Que vous ayez compris ce qu'est un shortcode et comment il fonctionne est une autre affaire ! Les auteurs de thèmes utilisent largement les shortcodes, mais parfois "supposent" simplement que les utilisateurs sauront ce qu'ils sont et comment ils fonctionnent alors qu'en fait, ils peuvent être assez déroutants !

La bonne nouvelle est que les shortcodes sont à la fois faciles à comprendre et à utiliser. Dans cet article, nous examinerons les shortcodes pour savoir comment vous pouvez en tirer le meilleur parti avant de voir comment vous pouvez créer votre propre shortcode !

Allons-y !

Que sont les shortcodes WordPress ?

WordPress a introduit les shortcodes il y a longtemps lors de la sortie de la version 2.5 de WordPress (c'était en 2008) et depuis lors, ils ont été largement utilisés dans la plupart des thèmes et plugins.

Alors, que sont exactement les shortcodes ? Eh bien, en bref (désolé, je n'ai pas pu résister), les shortcodes sont un peu de code qui peut être utilisé à peu près n'importe où sur votre site Web pour insérer une fonctionnalité ou une fonction. Ainsi, plutôt que d'avoir à coder laborieusement, par exemple, une icône de réseau social en utilisant HTML, vous pouvez à la place insérer un shortcode qui "indique" à WordPress d'insérer une icône de réseau social partout où vous insérez un certain shortcode. Le style et la fonction (dans cet exemple) de l'icône des médias sociaux sont prédéfinis par le développeur du thème, de sorte que tout le gros du travail du point de vue de la programmation a été fait pour vous.

Alors, peut-être que vous voulez mettre une icône Facebook au bas d'un article de blog. Au lieu de l'insérer manuellement, d'ajouter un lien hypertexte, de mettre à jour la taille de l'icône, etc., tout ce que vous pourriez avoir à faire est de mettre un shortcode qui a été "préprogrammé" par l'auteur du thème et qui pourrait ressembler à ceci :

 social icon="facebook"]

Il est important de répéter à ce stade que vous ne pouvez pas simplement ajouter des codes abrégés de votre propre conception et vous attendre à ce qu'ils fonctionnent. Ils doivent avoir été ajoutés en option à votre thème. En règle générale, les thèmes sont livrés avec de nombreux codes abrégés prédéfinis et les instructions du thème incluront une liste des codes abrégés disponibles parmi lesquels vous pourrez choisir.

Les codes abrégés sont un excellent raccourci pour les non-développeurs pour afficher de nombreux types de contenu sans écrire de code et un outil qui peut également faire gagner du temps aux développeurs.

Que pouvez-vous faire avec les shortcodes WordPress ?

Les shortcodes sont utilisés pour insérer un large éventail de contenus à partir d'un bouton d'appel à l'action (CTA), d'une boîte de publicité dynamique, d'un formulaire de contact, de galeries d'images, de curseurs et bien plus encore… mais, comme mentionné ci-dessus, quelles sont les options de shortcode à votre disposition dépendra du thème et des plugins que vous utilisez.

Un exemple de shortcode utilisant le plugin Contact Form 7

Ce ne sont pas seulement les thèmes qui utilisent des shortcodes. L'un des plugins de formulaire de contact les plus populaires disponibles aujourd'hui, Contact Form 7, utilise des codes abrégés pour permettre aux utilisateurs d'intégrer rapidement et facilement un formulaire de contact à l'emplacement de leur choix.

Pour ce faire, une fois que vous avez installé Contact Form 7, tout ce que vous avez à faire pour ajouter un formulaire à une page ou publier sur votre site Web est le suivant.

La première étape:

Allez dans le menu Contact > Formulaires de contact et créez un nouveau formulaire ou utilisez celui existant avec le plugin.

Copiez le shortcode [contact-form-7 title="Contact form 1"] qui correspond au formulaire.

Deuxième étape :

Collez le shortcode à l'endroit où vous souhaitez que le formulaire apparaisse comme indiqué ci-dessous :

Sauvegardez la page et vous devriez alors voir ceci :

Et c'est tout! Vous venez d'utiliser avec succès un shortcode pour intégrer un formulaire de contact sur votre site Web. Comme vous pouvez le voir, les shortcodes sont incroyablement faciles à utiliser et peuvent accélérer des tâches qui pourraient autrement être complexes et prendre du temps.

Utilisation des codes courts WordPress par défaut

Bien que la plupart des shortcodes que vous utiliserez probablement seront introduits à la suite de l'installation d'un thème ou d'un plugin. WordPress lui-même a cependant une poignée de shortcodes « par défaut » que vous pouvez utiliser. Ceux-ci inclus:

• l'audio
• Légende
• Intégrer
• Galerie
• Playlist
• Vidéo

Ces shortcodes peuvent être utilisés sur l'ensemble de votre site pour ajouter une gamme de contenu, par exemple, un lecteur audio. Dans l'image ci-dessous, nous montrons ceci utilisé dans un widget Footer.

Pour savoir comment utiliser ces shortcodes plus en détail, consultez l'article d'assistance WordPress à ce sujet.

Alors, que faites-vous lorsque WordPress ou le thème/plugin que vous utilisez ne fournit pas le shortcode dont vous avez besoin pour votre objectif spécifique ? Facile… créez le vôtre !

Créez votre propre code court WordPress

WordPress a une API Shortcode qui peut être exploitée pour développer vos propres shortcodes relativement facilement. Passons en revue les étapes de base que vous devez suivre pour créer votre propre shortcode maintenant.

La première étape:

Dans cet exemple, nous allons créer un bouton CTA (Call to Action) sur lequel le lecteur peut cliquer pour être redirigé vers un formulaire de contact.

Pour aider à garder les choses organisées, nous vous suggérons de conserver tous vos codes abrégés dans un fichier séparé (plutôt que d'ajouter du code à un fichier existant). Pour ce faire, créez un nouveau fichier vide dans le même dossier que le fichier functions.php de votre thème et nommez-le quelque chose comme my-shortcodes.php . Après cela, incluez ce fichier dans votre fichier functions.php comme ceci :

 include('my-shortcodes.php');

Bien que, comme nous venons de le dire, nous vous recommandons de créer vos shortcodes dans un fichier séparé, pour les besoins de cet article, nous allons continuer et ajouter notre nouveau code directement dans notre fichier functions.php pour aider à conserver l'exemple. aussi clair que possible.

Nous utiliserons la fonction add_shortcode qui est introduite dans le fichier wp-includes/shortcodes.php . Cette fonction a besoin de deux paramètres, la balise shortcode et la fonction de rappel.

 add_shortcode( string $tag, callable $callback )

Deuxième étape :

Voici le morceau de code que vous pouvez mettre dans votre fichier functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Notez que les noms de balise et de fonction incluent uniquement des minuscules et des traits de soulignement.

N'oubliez pas de remplacer 'THE_CONTACT_FORM_URL' par l'URL du formulaire de contact vers lequel vous souhaitez rediriger l'utilisateur.

De plus, vous pouvez éventuellement utiliser ce code CSS dans votre fichier style.css pour rendre le bouton plus attrayant visuellement :

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Troisième étape:

L'affichage de votre shortcode dans le contenu du site Web se fait comme vous le feriez pour tout autre shortcode. Dans cet exemple, notre shortcode serait [my_cta_button] . Ajoutez ceci à un article ou à une page et vous devriez voir quelque chose comme ceci lorsque vous affichez la page :

Cet exemple génère un contenu prédéfini dans le code PHP que nous avons fourni. Voyons comment vous pouvez autoriser l'utilisateur administrateur à personnaliser la sortie du shortcode si nécessaire.

Un shortcode qui accepte les attributs utilisateur

Pour créer un shortcode qui a des attributs modifiables par l'utilisateur, vous devez définir un tableau des attributs que vous souhaitez autoriser l'utilisateur à modifier dans votre fonction de rappel. Par exemple, vous souhaiterez peut-être pouvoir modifier le titre par défaut et l'URL du bouton.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

Dans le code ci-dessus, nous avons utilisé la fonction shortcode_atts pour combiner les attributs définis par l'utilisateur avec des attributs connus. De cette façon, vous devez créer une fonction de code court différente pour chaque bouton CTA dont vous aurez besoin, mais une seule qui redirige vers n'importe où l'utilisateur spécifie à chaque fois.

L'utilisation de ce code doit être spécifiée comme ceci : [my_cta_button title='My Custom Title' url='MY_URL']

Ajouter un shortcode dans un fichier de modèle

Du point de vue des développeurs, il existe également un moyen rapide d'inclure de force le shortcode dans une position prédéfinie de votre site Web en l'appelant dans le fichier de modèle correspondant. Par exemple, si nous voulons que le bouton CTA soit affiché dans la section inférieure de chaque publication ou page, nous pouvons modifier le modèle singulier et utiliser la fonction do_shortcode . Dans le thème Twenty Twenty, nous avons édité le fichier singular.php et inséré cette ligne sous la fermeture du conteneur div principal :

 <?php echo do_shortcode('[my_cta_button]'); ?>

Le résultat s'affichera sous le contenu de la publication et avant les widgets de pied de page.

Conclusion

Avant de conclure cet article, rappelez-vous que si vous utilisez des shortcodes fournis par votre thème ou un plugin et que vous désactivez ensuite ce thème/plugin, ces shortcodes cesseront de fonctionner (il vous restera juste le support de shortcode affiché sur le front-end de votre site Web).

Avec cette mise en garde mineure, les codes abrégés sont une fonctionnalité très utile lorsqu'il s'agit de créer un site Web. Ils sont largement utilisés dans WordPress et, si vous n'avez pas encore adopté leur utilisation, alors il est peut-être temps de donner un autre regard aux shortcodes !