Raccourcis WordPress – Comment les créer

Cet article est un didacticiel détaillé sur les shortcodes WordPress. Nous couvrons les shortcodes, quand les utiliser et comment enregistrer le vôtre, avec des exemples de shortcode personnalisés en code complet.

Les shortcodes WordPress sont un outil très pratique pour faire une chose: obtenir du code PHP personnalisé à afficher n'importe où sur votre site.

Une fois que vous comprenez les shortcodes WordPress, ils sont un outil extrêmement pratique et facile à utiliser pour faire une chose: obtenir du code PHP personnalisé de n'importe quel type à afficher n'importe où sur votre site, du contenu de votre publication aux barres latérales, en-têtes et pieds de page . Même avec Gutenberg, l'éditeur de blocs WordPress, solidement établi dans WordPress Core, les shortcodes restent l'un de mes outils programmables préférés dans WordPress – même si Gutenberg est conçu explicitement pour rendre les shortcodes obsolètes.

Donc, avant de nous plonger dans le code, examinons pourquoi les shortcodes WordPress continuent d'être utiles, même à l'ère Gutenberg.

Gutenblocks vs Shortcodes: comparaison et compromis

Nos exemples de shortcode WordPress doivent être confrontés à un fait: s'il y a une chose que Gutenberg est conçue pour tuer, c'est l'utilisation des shortcodes WordPress dans la création de contenu.

Ce n'est pas difficile de voir pourquoi. Vite, à quoi ressemble le code suivant, dans votre écran d'édition de post, à l'extrémité avant de votre site?

Aucune idée. (C'est un vrai shortcode ici sur WPShout, soit dit en passant.) L'équipe Gutenberg utilise le terme dégoûtant mais précis de "viande mystère" pour le type exact d'expérience utilisateur que les shortcodes donnent.

Si la «viande mystère» est le problème, les blocs de prévisualisation en direct de Gutenberg sont le remède:

Les shortcodes sont extrêmement utiles. Ce qui compte, c'est ce que vous les utilisez pour.

Devrions-nous donc arrêter d'enregistrer des shortcodes personnalisés? Ai-je cessé d'utiliser des shortcodes dans mon travail en tant que développeur WordPress? Heck non! Je me retrouve à enregistrer des shortcodes WordPress sur presque tous les sites personnels ou clients que je crée, et je ne prévois pas de ralentir.

La vérité est que les shortcodes WordPress sont extrêmement utiles. Ce qui compte, c'est ce que vous les utilisez pour. Et cela commence par connaître les avantages relatifs de l'enregistrement des shortcodes WordPress par rapport aux blocs Gutenberg pour créer des fonctionnalités personnalisées sur votre site WordPress.

Avantages de Gutenblocks

Nous avons essentiellement vu les avantages des blocs Gutenberg par rapport aux codes courts dans les captures d'écran ci-dessus:

1. Tout dans un Gutenblock est dans une interface utilisateur visuelle claire – non [this_is_really_confusing right="yes"] pseudocode que la plupart des propriétaires de sites auront à juste titre peur de toucher.
2. Les gutenblocks sont un aperçu en direct – pas de viande mystère.

Les blocs de Gutenberg sont un meilleur expérience utilisateur que les shortcodes.

En d'autres termes, les blocs de Gutenberg sont un meilleur expérience utilisateur que les shortcodes. Si vous créez quelque chose qu'un utilisateur doit pouvoir insérer dans le contenu des publications et jouer avec, les Gutenblocks personnalisés sont un meilleur pari.

Avantages des shortcodes WordPress

Ce dont nous n'avons pas encore discuté, ce sont les avantages des shortcodes WordPress par rapport à Gutenblocks, et il y en a plusieurs:

1. Les shortcodes peuvent aller n'importe où: publier du contenu, oui, mais aussi des zones de widgets pouvant se trouver n'importe où sur votre site (en-tête, barre latérale, pied de page,…). Vous pouvez même les exécuter au sens propre n'importe où – dans un fichier de modèle de thème, dans un plugin – avec WordPress do_shortcode () une fonction. Les blocs de gluten sont limités à publier uniquement du contenu.
2. Les shortcodes sont beaucoup plus faciles à enregistrer que Gutenblocks. D'une part, ils sont uniquement PHP, alors que les Gutenblocks sont PHP et JavaScript. L'enregistrement d'un shortcode simple est super facile et ne prend qu'une seule fonction, comme vous le verrez dans les exemples de shortcode WordPress personnalisés ci-dessous.
3. Les shortcodes peuvent être n'importe quoi: juste un petit bout de texte en ligne, ou un bloc massif d'exécution de code PHP. Les blocs de gluten doivent s'empiler sur les autres blocs de gluten, afin qu'ils ne puissent pas être en ligne.

Les shortcodes sont une expérience horrible pour les utilisateurs. Mais pour les développeurs, ils sont super utiles car ils mettent votre code sur la page avec un minimum d'effort.

En somme, le problème avec les shortcodes est qu'ils sont une expérience horrible pour les utilisateurs qui n'ont pas de connaissances techniques. Mais pour les développeurs, ils sont l'un des outils les plus utiles qui existent, tant pendant le processus de développement lui-même que sur les sites de production, car ils vous aident à obtenir votre code sur la page avec un minimum absolu d'efforts.

Dans cet article, nous nous assurerons que vous savez comment utiliser add_shortcode () pour enregistrer des shortcodes WordPress personnalisés, avec des arguments et du contenu transmis si nécessaire. Ensuite, nous allons explorer quelques exemples qui montrent comment les shortcodes WordPress sont massivement utiles pour toutes sortes de besoins de développement WordPress.

Une chose d'abord. Si vous êtes sérieux au sujet de l'apprentissage du développement WordPress, nous avons écrit le meilleur guide à ce sujet, notre cours phare Opérationnel:

En avant dans ce tutoriel de shortcode WordPress!

Comment créer des shortcodes WordPress

En tant que développeur WordPress, vous voudrez certainement savoir comment enregistrer vos propres codes courts personnalisés. Les didacticiels de cette section vous guident tout au long de ce processus.

Comment enregistrer un shortcode personnalisé: l'exemple le plus basique

David a enregistré une excellente vidéo Quick Guide couvrant l'utilisation la plus basique possible de add_shortcode () pour enregistrer un shortcode personnalisé. Ce didacticiel explique également comment enregistrer un plug-in pour contenir le shortcode personnalisé lui-même (ce qui est préférable à l'utilisation de votre thème functions.php). Sans ce plugin passe-partout en haut, l'exemple de code ressemble à ceci:

add_shortcode ('wpshout_sample_shortcode', 'wpshout_sample_shortcode');
fonction wpshout_sample_shortcode () 
    retourner 'salut!';

Remarquez quelques choses:

• Tu utilises add_shortcode () pour enregistrer un nouveau shortcode.
• Vous nommez votre shortcode comme vous le souhaitez en utilisant le premier argument de add_shortcode (). Vous mettriez le shortcode que nous venons d'enregistrer sur la page avec [wpshout_sample_shortcode].
• Avec le deuxième argument de add_shortcode (), vous nommez un fonction de gestionnaire de shortcode. Cette fonction sera utilisée pour «gérer» le shortcode: ce que cela signifie, c'est qu'il revenir une chaîne de texte que WordPress affichera ensuite sur la page. Dans ce cas, la fonction wpshout_sample_shortcode () simplement revenirs «salut!» – qui apparaîtra à tout moment sur la page[wpshout_sample_shortcode] est appelé.

Cette configuration de shortcode très simple correspond à la plupart de ce que nous utiliserons dans les exemples ci-dessous, mais pour être complet, il est également important de vous montrer comment créer des shortcodes avec du contenu et des shortcodes qui prennent des arguments transmis.

Comment créer un shortcode personnalisé avec du contenu et des attributs transmis

Il est également bon de savoir comment créer des shortcodes WordPress qui acceptent les données spécifiées par l'utilisateur. Voici un shortcode avec deux nouveaux éléments: un définissable par l'utilisateur aligner attribut et contenu défini par l'utilisateur dans le shortcode lui-même.

[pullquote_shortcode align="left"]Ceci est le texte qui devrait
aller dans ma citation[/pullquote_shortcode] 

Que faisons-nous avec ces nouvelles données? Par défaut, la fonction de gestionnaire de shortcode peut prendre deux arguments:

1. Un tableau d'attributs
2. Le contenu du texte à l'intérieur du shortcode.

L'ajout de ces éléments à notre fonction de gestionnaire nous permet de travailler avec eux, comme dans cet exemple:

// $ attributes est un tableau d'attributs transmis. Cela ressemblerait à
// [ 'align' => 'left' ].
// $ content est une chaîne de contenu de shortcode transmis. Cela ressemblerait à
// 'Ceci est le texte qui devrait entrer dans ma citation'.
fonction pqsc_process_shortcode ($ attributs, $ content = null) 
// Enregistre la valeur de chaque attribut dans sa propre variable.
// Cela crée une variable $ align avec une valeur de 'left'.
extract (shortcode_atts (array (
'align' => ''
), $ attributs));

// Renvoie une chaîne à afficher sur la page
revenir '
". $ content. "
»

La chose la plus délicate ici est la combinaison de la valeur par défaut de PHP extrait une fonction extrait() et WordPress shortcode_atts () Fonction PHP.

shortcode_atts ()

shortcode_atts () est une fonction fournie par WordPress qui combine un tableau de valeurs par défaut avec le tableau d'attributs transmis à la fonction elle-même. Donc, en soi, il dit que le aligner l'attribut a une valeur par défaut de '', une chaîne vide – et que cette valeur par défaut peut être remplacée par la valeur réelle de la aligner élément dans le passé $ attributs tableau. Pour nous, cette valeur est 'la gauche'.

extrait()

extrait() est une fonction PHP qui prend chaque élément d'un tableau et en fait une variable portant le même nom. Donc, dans l'exemple ci-dessus, nous nous retrouvons avec $ align étant maintenant une variable de type chaîne avec une valeur de 'la gauche'. Si nous avions d'autres attributs transmis, ils deviendraient aussi des variables.

Utilisation extrait() avec précaution en raison du danger de noms de variables en double.

Soit dit en passant, assurez-vous que votre extrait() la fonction ne laisse pas plusieurs variables prendre le même nom! Alors ne nommez pas l'un de vos arguments de shortcode, par exemple, Publier si vous prévoyez d'utiliser extrait(). En raison de ces confusions potentielles, extrait() n'est pas la fonction PHP la plus sécurisée dans l'ensemble, mais c'est pratique dans ce cas. Donc juste avertissement.

C'est un shortcode de fantaisie

C'est à peu près aussi riche en options que les shortcodes WordPress, donc si vous comprenez le didacticiel de shortcode ci-dessus, vous êtes à peu près réglé du côté technique pour enregistrer vos propres shortcodes personnalisés. Maintenant, que pouvons-nous, en tant que développeurs WordPress, faire avec les shortcodes WordPress?

Exemples de shortcode: sortie de code PHP pendant le développement

Les shortcodes me permettent de mettre tout ce que je fais en PHP directement sur la page.

Une des raisons pour lesquelles j'aime les shortcodes est qu'ils me permettent de mettre tout ce que je fais en PHP directement sur la page. Ils sont parfaits pour tester le code, comprendre ce qu'une fonction ou une variable fait, et toutes sortes d'autres tâches de visibilité. Et une fois que vous avez l'habitude de vous inscrire et d'utiliser des shortcodes, ils prennent peut-être moins de configuration que toute autre manière sensée d'afficher votre code.

Voici quelques exemples pour faire valoir ce point. Notez que dans ces exemples, j'utilise la mise en mémoire tampon de sortie PHP: voir l'excellent article de David sur les raisons pour lesquelles la mise en mémoire tampon de sortie est si pratique pour les shortcodes:

Les nombreuses utilisations de la mise en mémoire tampon de sortie PHP dans WordPress

Exemple de shortcode: utilisation d'un shortcode pour tester un WP_Query

Disons que j'écris un WP_Query et je veux savoir ce que ça produit:

add_shortcode ('dump_query', 'wpshout_dump_query');
fonction wpshout_dump_query () 
// Écrire une requête
$ args = tableau (
'posts_per_page' => 1
);
$ query = new WP_Query ($ args);

// Renvoie la sortie
ob_start ();
var_dump ($ query);
return ob_get_clean ();

Ensuite j'écris [dump_query] n'importe où, dans n'importe quel exemple de message ou de page sur mon site:

Et j'obtiens quelque chose – une erreur, un tableau ou autre – directement dans le contenu de la page:

Exemple de shortcode: recherche de texte de commentaire

Supposons que je souhaite effectuer une recherche par mot dans les dix commentaires approuvés les plus récents du site:

add_shortcode ('get_recent_comments', 'wpshout_get_recent_comments');
fonction wpshout_get_recent_comments () 
$ args = tableau (
'status' => 'approuver',
'number' => '10'
);
$ comments = get_comments ($ args);

ob_start ();
foreach ($ comments as $ comment):
echo $ comment-> comment_content. "
»
endforeach;
return ob_get_clean ();

Avec [get_recent_comments] sur la page, cela nous donne:

Exemple de shortcode: afficher toutes les images moyennes récentes

Attendez, je dois regarder à travers (et peut-être enregistrer dans un dossier) la taille d'image «moyenne» de chacun de mes 50 derniers téléchargements d'images:

add_shortcode ('rec_images_medium', 'wpshout_rec_images_medium');
fonction wpshout_rec_images_medium () 
$ query_images_args = array (
'post_type' => 'pièce jointe',
'post_mime_type' => 'image',
'post_status' => 'hériter',
'posts_per_page' => 50,
);
$ query_images = new WP_Query ($ query_images_args);

ob_start ();
foreach ($ query_images-> publie comme $ image):
echo wp_get_attachment_image ($ image-> ID, 'medium');
écho '
»
endforeach;
return ob_get_clean ();

Le résultat avec [wpshout_rec_images_medium] sur la page:

Les shortcodes sont parfaits pour obtenir simplement des informations sur la page

Les codes courts sont l'un des moyens les plus simples et les plus légers pour afficher des éléments sur la page.

Voyez-vous ce que j'aime des shortcodes? Ces cas d'utilisation sont le type de besoin aléatoire qui peut survenir du côté PHP de tout projet WordPress, et dans chaque cas, l'enregistrement d'un shortcode était un moyen très simple et facile de transformer mon code PHP en quelque chose de visuel avec lequel je pourrais travailler et obtenir rétroaction de. En général, les shortcodes sont l'un des moyens les plus simples et les plus légers pour un développeur WordPress d'obtenir des informations:tout – pour l'afficher sur la page, afin que vous puissiez l'utiliser, le déboguer, le tester, l'ajuster, etc. Et vous savez exactement où l'attendre sur la page, car vous avez placé le shortcode vous-même.

Donc, si vous ne savez pas comment mettre votre code sur la page, ne cherchez pas de modèles de page personnalisés, le contenu filtres, ou autre chose. Recherchez un shortcode.

Exemples de shortcode WordPress réels: utilisation de shortcodes dans les sites de production

J'utiliserai toujours des codes courts pour des projets de clients privés où ils n'auront qu'un ou quelques utilisateurs.

Gutenberg ou non, j'utilise toujours des shortcodes sur les projets clients tout le temps.

Comme nous l'avons vu ci-dessus, les codes courts sont idéaux lorsque la section pertinente du site ne sera mise à jour que par un technicien. Et il y a des situations, comme lorsque vous enregistrez du code personnalisé pour aller tous les deux dans le contenu de la page et potentiellement dans les zones de widgets ou ailleurs sur le site – qu'un shortcode peut faire ce qu'un Gutenblock ne peut pas.

Ci-dessous, nous allons voir quelques exemples concrets de shortcodes sur les sites de développement. Bref, ils sont toujours super-pratique. Ce n'est que pour les produits commercialisés ou qui seront utilisés par une seule équipe mais par un grand nombre de personnes moins techniques que les shortcodes ne sont pas un bon choix.

Exemple d'un shortcode WordPress dans la publication de contenu sur un site de production

J'aide à gérer le site Web Writers.com, qui vend des cours d'écriture en ligne. À tout moment, certains cours sont programmés, d'autres non, ce qui signifie que l'appel à l'action sur chaque type de page de cours est différent.

Nous avons écrit un shortcode pour servir le bon type d'appel à l'action sur le bon type de page de cours, notamment en appelant un deuxième shortcode que nous avons utilisé pour enregistrer le code HTML pour les cours non planifiés. Voici le code:

add_shortcode ('conditional_enroll_button', 'writers_conditional_enroll_button');
fonction writers_conditional_enroll_button () 
global $ post;

// Obtenir l'heure unix de l'événement
$ end_datetime = new DateTime (
get_post_meta (get_the_ID (), '_event_end_date', true)
);

// Une classe doit s'afficher jusqu'à ce que sa date de fin soit passée (après hier)
$ class_is_joinable = $ end_datetime> new DateTime ('hier');


ob_start ();

si ($ class_is_joinable):?>
		
<input type = "button" style = "padding: 5px;" onclick = "location.href = 'https: //www.writers.com/regform.html? course_id =ID; ?> '"value =" Inscrire »">
		
		
	<? php else:
// Voir le plugin "Intéressé"
echo do_shortcode ('[single_unscheduled_interested]');
fin si;

return ob_get_clean ();

Voici le shortcode dans le contenu du post:

Voici ce qu'il produit sur un cours programmé:

Et voici ce qu'il produit sur un cours non programmé:

Un shortcode est-il donc la bonne interface pour cette fonctionnalité? Absolument, car:

• Nous n'avons pas besoin de prévisualisation en direct ou d'autres fonctionnalités de Gutenberg.
• Nous avons juste besoin d'un simple wrapper pour nos fonctionnalités personnalisées complexes.
• Seuls les développeurs touchent et modifient cette section, pas les personnes non formées.

Exemple d'un shortcode WordPress qui ajoute beaucoup de fonctionnalités

Les shortcodes WordPress peuvent être énorme, et un énorme réel est le "wpshout_homepage_scroll"Shortcode que nous utilisons sur la page d'accueil de WPShout, qui contrôle l'intégralité de la section" Récemment publié "de la page d'accueil:

Le code de ce shortcode est de quelques centaines de lignes dans notre thème functions.php fichier:

Étant donné que la page comporte des mises en page personnalisées complexes, nous utilisons le plug-in Beaver Builder toujours excellent. Donc, la question est: comment devrions-nous obtenir tout ce code personnalisé complexe sur notre page d'accueil? Il y a absolument pas de meilleure réponse que d'utiliser un shortcode, car, encore une fois:

• Nous n'avons pas besoin de prévisualisation en direct ou d'autres fonctionnalités de Gutenberg.
• Nous avons juste besoin d'un simple wrapper pour nos fonctionnalités personnalisées complexes.
• Seuls les développeurs touchent et modifient cette section, pas les personnes non formées.

Raccourcis WordPress: bons pour ce pour quoi ils sont bons

Les shortcodes ne sont pas parfaits pour les utilisateurs, mais je les trouve pratiques en tant que développeur. J'espère que vous comprendrez mieux comment créer des shortcodes WordPress personnalisés – avec ou sans données définies par l'utilisateur – et pourquoi et quand les utiliser dans votre travail de développement WordPress.

Cool, non? J'espère que cela vous sera utile. Et si vous souhaitez acquérir une base complète dans le développement WordPress, je vous recommande à nouveau fortement de jeter un œil à notre cours phare Opérationnel:

Quelque chose que j'ai raté? Nous aimerions avoir de vos nouvelles dans les commentaires ci-dessous ou dans notre groupe Facebook.