Comment créer vos propres Shortcodes WordPress

Shortcodes sont une fonctionnalité très puissante de WordPress. En substance, un shortcode est un espace réservé pour un autre contenu. Un shortcode bien connu est le shortcode de la galerie intégrée. Juste taper dans l'éditeur WordPress et il sera remplacé par une galerie d'images prises à partir des médias téléchargés sur le poste.

Bien que le téléchargeur de médias vous donne une belle interface pour créer une galerie, dans les coulisses cependant, un shortcode est construit, quelque chose comme ceci: . Selon votre thème, cela peut sembler différent sur votre installation, mais une sortie possible serait quelque chose comme ceci:

Le HTML que vous auriez besoin d'écrire pour que cela se produise est assez lourd; l'utilisation du shortcode le rend considérablement plus rapide. Si vous avez besoin de faire des tâches répétitives dans l'éditeur de publication ou si vous avez besoin d'un format HTML spécifique qui prend du temps à baliser, vous pouvez trouver que votre propre shortcode peut vous aider.

Dans cet article, je vais vous montrer comment fonctionnent les shortcodes et comment vous pouvez créer les vôtres grâce à des exemples simples.

Les bases des shortcodes

Comme je l'ai mentionné, les shortcodes sont essentiellement remplacés par d'autres contenus que vous définissez. Jetons un coup d'oeil aux bases à travers un exemple. Supposons que tout au long de votre message, vous souhaitez référencer le propriétaire du site.

"Selon Daniel Pataki, le propriétaire de notre entreprise, l'objectif principal du site est de générer beaucoup d'argent, Daniel Pataki pense que le partage est également important."

Au lieu d'écrire "Daniel Pataki" nous pourrions utiliser un shortcode.

"Selon le propriétaire de notre entreprise - [propriétaire] - l'objectif principal du site est de générer beaucoup d'argent. [Propriétaire] pense que le partage est également important."

Cela nous permettrait de changer le nom du propriétaire dans un endroit, donc dans le cas où le propriétaire change, toutes les instances de notre shortcode utiliseraient le nouveau nom.

Coder ceci est en fait assez simple. Nous devrons utiliser la fonction add_shortcode() pour indiquer à WordPress notre shortcode, puis créer notre fonction pour gérer la sortie:

 add_shortcode ('owner', 'owner_output'); function owner_output () {retourne 'Daniel Pataki'; } 

Notez que ce code doit être ajouté au fichier functions.php de votre thème ou aux fichiers de votre plugin . Si vous utilisez un thème tiers, je recommande d'utiliser un thème enfant.

La fonction add_shortcode nécessite 2 paramètres: le premier paramètre est le shortcode que WordPress essaie de faire correspondre - c'est ce que vous écrivez entre crochets - le second paramètre est le nom de la fonction qui gère la sortie, qui nous appartient complètement.

Dans notre fonction de gestion des sorties, nous devons retourner la sortie que nous voulons remplacer notre shortcode.

Attributs Shortcode

Il est important de savoir que nos shortcodes peuvent également utiliser des attributs. Par exemple, si vous voulez vous assurer que le propriétaire du site Web est affiché en gras, vous pouvez le faire en créant un attribut nommé "gras" et lorsque cela est défini sur true, les balises HTML appropriées seront ajoutées.

 add_shortcode ('owner', 'owner_output'); function owner_output ($ atts) {$ atts = shortcode_atts (array ('bold' => false), $ atts); if ($ atts ['bold'] == true) {return ' Daniel Pataki '; } else {return 'Daniel Pataki'; }} 

Cela semble beaucoup plus intimidant, mais en réalité, c'est assez simple. Tout d'abord, commencez par visualiser comment votre shortcode serait utilisé. Lorsque vous tapez votre shortcode, vous faites ceci:

[owner bold='true']

Nous savons maintenant que nous allons avoir un attribut nommé "gras".

Dans notre fonction de gestion des sorties, nous utilisons la fonction shortcode_atts() pour analyser tous les attributs et en donner quelques-unes. Nous nous assurons que si vous ne spécifiez pas la valeur de "bold", alors elle est définie sur false.

Ensuite, nous prenons juste un coup d'oeil à la valeur de l'attribut en gras. Si c'est vrai, nous retournons le nom du propriétaire dans un tag fort, sinon nous le renvoyons tel quel.

Contenu du shortcode

Le contenu de shortcode est généralement utilisé lorsqu'un peu de contenu doit recevoir une mise en forme HTML spéciale. Supposons que votre site utilise des titres fantaisistes comme celui-ci:

 Mon titre 

C'est un titre spécial qui est un en-tête de niveau un et contient également une icône. Nous pourrions créer ceci comme un shortcode en utilisant la mise en forme suivante:

[title icon='check']My Title[/title]

Notez que nous utilisons une balise shortcode d'ouverture qui a quelques paramètres et une balise shortcode de fermeture. Le contenu de (Mon titre) est passé à notre fonction de génération de sortie en tant que deuxième paramètre.

 add_shortcode ('title', 'title_output'); function title_output ($ atts, $ content) {$ atts = shortcode_atts (array ('icon' => 'crayon'), $ atts); revenir ' 
 '. $ content. ' 
 '; } 

Comme vous pouvez le voir, l'icône par défaut est "crayon", sauf si elle est définie dans le shortcode. Le contenu est passé en tant que second paramètre et est utilisé comme contenu dans l'en-tête de niveau un.

Utilisations pratiques

Il y a un grand nombre d'utilisations pour les shortcodes de placer des curseurs et des galeries dans des poteaux, aux minuteries de compte à rebours et à tout autre contenu dynamique. Ceux-ci nécessitent généralement du Javascript et du CSS pour bien fonctionner. Dans ces cas, c'est à votre imagination et vos codes de codage.

Il y a un certain nombre de choses que vous pouvez faire pour vous simplifier la vie (même en tant que non codeur), par exemple pour simplifier le processus d'édition et d'écriture. Disons que vous écrivez des critiques de jeu et dans chacun, vous devez entrer une table comme ceci:

Titre
Développeur
Genre
Prix
Notre verdict
Jamais seul
Upper One Games
Indie Casual Adventure
14, 99 $
5/5

Même si vous copiez-collez ceci d'un article à l'autre, c'est une bonne quantité de travail par rapport à la quantité de contenu que vous ajoutez. Vous pouvez utiliser un simple shortcode pour faire le travail:

[final_table title="Never Alone" dev="Upper One Games" genre="Upper One Games" price="14.99" rating="5"]

Votre fonction de sortie de shortcode serait responsable de l'ajout de la table entière et d'autres bits de contenu autour de cette information, quelque chose comme ceci:

 add_shortcode ('final_table', 'final_table_output'); function final_table_output ($ atts) {return ' 
Titre
Développeur
Genre
Prix
Notre verdict
'. $ atts ['titre']. '
'. $ atts ['dev']. '
'. $ atts ['genre']. '
$ '. $ atts ['prix']. '
5 / '. $ atts ['évaluation']. '
 '; } 

L'oeuf de Pâques de Noël

Donc, vous êtes arrivés aussi loin et il est presque Noël, alors j'ai pensé que j'aurais inclus un petit œuf de Pâques. Le widget Compte à rebours de Noël est un plugin qui vous donne la possibilité d'ajouter un compte à rebours de Noël sur le thème du Père Noël à votre site Web comme un widget barre latérale ou comme un shortcode.

Installez, activez et utilisez [countdown] n'importe où dans le contenu de votre message pour ajouter M. Clause à votre message.

Conclusion

Je pense que les shortcodes sont géniaux car ils permettent aux non-codeurs de simplifier leurs flux de travail et peuvent augmenter en complexité à mesure que vous développez vos connaissances en codage. Je suggère d'essayer de créer un shortcode ici et là car vous avez des besoins plus complexes.

Pour une liste de tous les shortcodes par défaut, jetez un oeil à la section Shortcode dans le codex WordPress. Pour plus d'informations, jetez un coup d'œil au Codex, et vous voudrez peut-être ajouter un signet au Générateur de shortcode, ce qui vous permettra d'économiser quelques frappes lors de la création de vos fonctions de générateur.

15 outils de typographie en ligne tous les concepteurs doivent savoir

La typographie est le fondement de tout design, car la lecture est l'une des choses les plus élémentaires que nous faisons sur le web. La typographie que vous choisissez a un impact sur plusieurs aspects d'un site Web, notamment la lisibilité, l'humeur et l'expérience utilisateur globale . Il

(Conseils techniques et de conception)

18 effets étonnants que vous pouvez créer avec les ombres de boîte CSS3

Nous pouvons faire beaucoup de choses avec CSS comme construire des modaux, faire de beaux effets de texte, dessiner un bouclier Viking, et même créer une forme de coeur. Il y a aussi beaucoup de choses que nous pouvons faire avec CSS3 Box Shadows, et dans ce post, nous allons voir comment certains designers jouent avec les ombres CSS pour obtenir d'excellents résultats .Da

(Conseils techniques et de conception)