Comment créer et style dans WordPress boîtes Callout - WPMU DEV
Ce sont un excellent moyen de briser longs morceaux de texte et d'attirer l'attention du lecteur sur les points clés et des citations intéressantes. Ils sont très utilisés dans les entrevues et comprennent généralement la chose la plus intéressante ou controversée dit la personne interrogée.
Vous pouvez également les utiliser pour le texte qui ne fait pas partie du contenu principal, comme un appel à l'action ou annonce. Ils attirent l'attention du lecteur et vous aider à augmenter le nombre de personnes qui lisent tout le chemin à travers une page ou cliquez sur une autre page que vous souhaitez les diriger vers.
Dans ce post, je vais vous montrer comment écrire un plug-in qui vous fournit un shortcode pour un simple callout. Le shortcode a un attribut, qui est l'alignement, de sorte que vous pouvez choisir de centrer votre ou les aligner sur les légendes à gauche ou à droite pour que le texte s'enroule autour d'eux.
Qu'est-ce que vous aurez besoin
Pour suivre ce post, vous avez besoin:
Note: Je l'ai téléchargé le code complet pour ce poste à GitHub afin que vous puissiez vérifier la vôtre contre comme vous allez le long.
Configuration du plug-in
La première chose que vous devez faire est de créer votre plugin. Dans votre wp-content / plugins dossier, créez un nouveau dossier appelé wpmu-jolies-légendes. Dans ce dossier créer deux fichiers vides: le principal fichier de plug-in, appelé wpmu-jolie callouts.php. et une feuille de style, appelé style.css.
Cela dit WordPress que c'est un plug-in et fournit aux utilisateurs des informations à ce sujet. Vous pouvez modifier le vôtre pour ajouter votre nom et URI au lieu de moi.
Ajout de la fonction Shortcode
Maintenant, nous allons ajouter la fonction qui crée le shortcode. Commencez par créer cette fonction vide:
Ceci met en place votre fonction et se fixe au crochet add_shortcode donc ça va fonctionner quand ce feu.
Maintenant, nous allons peupler la fonction. Tout d'abord, nous allons mettre en place notre attribut pour l'alignement. A l'intérieur de la fonction, ajoutez ceci:
Cela définit l'attribut d'alignement que les utilisateurs peuvent utiliser pour ajouter à gauche, à droite ou à l'alignement du centre. Par défaut, ce qui a une valeur nulle.
Celui-ci utilise les fonctions ob_start () et ob_get_clean () pour vous assurer que votre contenu est sortie au bon endroit. Entre ceux-ci est le code qui ajoute le contenu du shortcode, enveloppé dans un élément de côté avec une classe de très-callout plus l'attribut ajouté en tant que classe si elle est définie. Cela signifie que vous pouvez utiliser cet attribut pour le style plus tard.
Remarque: Pour en savoir plus sur la création de plugins shortcode, consultez notre guide complet du plugin création.
Votre pleine funciton ressemblera à ceci:
Maintenant, sauvegardez votre fichier et activer le plug-in.
Nous avons besoin d'ajouter un peu de style. Faisons cela.
Ajout d'une feuille de style
La première chose à faire est d'enregistrer la feuille de style que vous avez déjà créé dans votre dossier de plug-in. Retournez à votre fichier principal de plug-in et ajouter cette fonction:
Cela permet d'enregistrer la feuille de style dans votre plug-in et enqueues correctement si WordPress peut l'utiliser.
Ajoutons un style de base à la feuille de style. Ouvrez votre fichier style.css dans votre plugin et ajoutez ceci:
Ajoutez ceci à votre feuille de style:
Retournez à votre poste et modifier le shortcode, d'ajouter l'un des attributs. Je vais ajouter l'alignement à droite:
Jolis Callouts rendre votre texte plus attrayant et sont faciles à mettre en œuvre
Rachel McCollin
Rachel est un web designer freelance et écrivain spécialisé dans le développement de WordPress mobile et réactif. Elle est l'auteur de quatre livres WordPress y compris WordPress Repousser les limites. publié par Wiley.