Share
prettyPhoto est un plugin lightbox créé par Stéphane Caron. Aujourd'hui, nous allons apprendre à livrer le plugin avec vos thèmes WordPress.
Donner une option lightbox intégrée au lieu de faire télécharger un plugin par les utilisateurs présente de nombreux avantages pour les auteurs de thèmes. Pour moi, c'est de pouvoir thématiser la lightbox en fonction de mes thèmes WordPress. C'est également une fonctionnalité intéressante à mettre à la disposition des utilisateurs de votre thème. Naturellement, vous devez également leur donner la possibilité de désactiver la fonctionnalité. Cela dit, allons-y.
Rendez-vous sur marges pour-errors.com et téléchargez le plug-in. Une fois que vous l'avez, nous allons créer une nouvelle structure de répertoires pour le plugin afin de nous faciliter la tâche..
Commençons par supprimer quelques éléments inutiles. Dans le dossier images, supprimez tout sauf le dossier prettyPhoto et son contenu. Dans le dossier racine, supprimez les fichiers xhr_response.html et index.html. Maintenant, déplacez jquery.prettyPhoto.js du dossier js vers le dossier du plugin racine et supprimez le dossier js.
Enfin, renommez le dossier en prettyPhoto et chargez-le dans le répertoire de votre thème. Vous avez probablement déjà un répertoire js ou scripts. Dans ce didacticiel, supposons qu'il se trouve dans votre thème / js.
Avant de charger les fichiers de plug-in dans notre thème, nous devons charger jQuery. Nous allons utiliser la version hébergée de Google de jQuery à l'aide de la méthode partagée sur Digging in Wordpress, ajoutons donc l'extrait de code à notre functions.php..
Accentsconagua
if (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); function register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', "http". ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ('jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ('prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ('customprettyPhoto_script'); Vous voudrez peut-être examiner les avantages et les inconvénients de l’utilisation d’un CDN pour servir jQuery. WordPress est fourni avec une copie de jQuery, mais l'utilisation de la version hébergée de Google peut améliorer les performances de votre site. Si vous êtes un auteur de thème, je préférerais utiliser la version fournie. Consultez la discussion sur un autre tutoriel pour vous aider à vous décider.
Vous remarquerez que nous avons ajouté un autre fichier appelé customprettyPhoto.js. C’est là que nous allons faire en sorte que le plug-in soit agréable à jouer avec nos images de publication et qu’il soit initialisé. Nous allons donc créer ce fichier et le placer dans votre répertoire prettyPhoto. OK, initialisons prettyPhoto.
Nous devons ajouter une ligne de jQuery pour ajouter la classe prettyPhoto requise prettyPhoto aux balises d'ancrage qui entourent nos images de publication. Puisque nous parlons de jQuery, utilisons-le pour accomplir ceci. Ajoutez ce qui suit juste après $ (document) .ready (function () où nous nous assurons que la page est chargée.
$ ('. entry-content a'). has ('img'). addClass ('prettyPhoto'); Remplacez .entry-content par le nom ou l'ID de la classe avec laquelle vous avez encapsulé le contenu de votre publication. Vous devez avoir correctement ajouté la classe à tous les liens qui encapsulent vos images de publication. Si vous avez jeté un coup d'œil à la documentation de prettyPhoto, vous verrez qu'il est dit d'utiliser un attribut rel mais nous avons plutôt utilisé une classe. Cela évite les erreurs de validation dans notre code HTML, car les attributs rel ne peuvent avoir que certaines valeurs autorisées conformément à la spécification HTML5..
Ensuite, nous voulons activer l'option de description de prettyPhoto. PrettyPhoto veut que nous ajoutions des attributs de titre à nos balises d'ancrage qui seront utilisées pour les descriptions, mais WordPress ajoute des titres à des balises d'image. Pour résoudre ce problème, écrivez quelques lignes de jQuery qui prennent la balise title de l'image et définissent le même titre sur la balise anchor qui enveloppe l'image..
$ ('. entry-content a img'). click (function () var desc = $ (this) .attr ('title'); $ ('. entry-content a'). a ('img') .attr ('titre', desc);); Ici, nous activons une fonction lorsque l'utilisateur clique sur une image de publication. Nous saisissons la balise de titre de l'image et la fixons à l'ancre. Cette étape facilite beaucoup l'ajout de descriptions aux utilisateurs de votre thème. Si vous souhaitez désactiver complètement la fonctionnalité, assurez-vous de définir le titre de chaque ancre comme étant vide. S'il manque totalement, car il n'y a même pas de titre vide, prettyPhoto affichera simplement «non défini»..
Nous devons ajouter le CSS pour prettyPhoto au thème. Retournez dans votre fichier functions.php et ajoutez la ligne suivante en haut:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). '/ js / prettyPhoto / css / prettyPhoto.css'); Puisque nous avons conservé les images et les CSS dans leurs dossiers d'origine et les uns par rapport aux autres comme ils étaient à l'origine, nous n'avons pas à nous soucier des images brisées..
Voyons comment ajouter des légendes et des titres que notre prettyPhoto utilisera. En regardant l'image ci-dessus, nous pouvons voir la relation entre la balise alt de post image et la balise de titre de lien que nous pouvons définir lors de l'ajout d'une image à une publication ou à une page..
Et voilà, nous avons ajouté avec succès prettyPhoto à notre thème. Assurez-vous de lire la documentation du plugin pour plus d'utilisations et d'options. PrettyPhoto peut gérer plus que de simples images, cela fonctionne avec des vidéos, des fichiers ajax, etc. Il est également livré avec une poignée de thèmes qui peuvent convenir à votre thème hors de la boîte ou au moins vous donner un bon point de départ.
