Share
Le natif [Galerie] shortcode c'est bien, mais pas génial. Dans cette astuce, nous allons l'embellir avec jQuery.
le [Galerie] Le shortcode n'est pas génial. Vous ne pouvez pas désactiver ses CSS par défaut, vous ne pouvez pas ajouter ou modifier les classes CSS, vous ne pouvez pas modifier les attributs par défaut (ce qui est en fait un problème de shortcode général)… Bien que cela ne gêne pas la majorité des développeurs WordPress , des cinglés comme moi pourraient se plaindre! :)
Dans cette astuce, nous allons supprimer les pages de pièces jointes et laisser les visiteurs de nos sites naviguer dans les images dans une boîte modale jQuery..
Avec moins de 5 Ko (gzipped) et une large gamme de prise en charge de navigateurs (incluant même IE6), Colorbox est mon plugin jQuery lightbox préféré..
Comme vous pouvez le voir sur la page du plugin, il contient une multitude de paramètres, de méthodes et de points d'ancrage afin que vous puissiez le personnaliser comme vous le souhaitez. Il a également 5 thèmes basés sur CSS.
Téléchargez le pack et extrayez colorbox.min.js et l’un des 5 thèmes (le colorbox.css fichier et le dossier "images") dans un dossier appelé "colorbox" et chargez ce dossier dans votre thème WordPress. Ajoutez le code suivant à la fin du colorbox.min.js fichier avant de télécharger:
Accentsconagua
jQuery (document) .ready (function ($) $ (". gallery-icon a"). colorbox (rel: "gallery"); Je sais que ça va être un peu bizarre, mais ça semble être le moyen le plus propre. Nous allons créer le [jgallery] petit code.
Conseil Dans le conseil rapide: Si vous envisagez de modifier tous les codes courts de la galerie dans vos publications après la création du
[jgallery]shortcode, je recommande d’utiliser le plugin Search Regex pour rechercher / remplacer[Galerie]avec[jgallery].
Comme toujours, nous allons commencer par créer la fonction shortcode de base:
function jgallery_sc () // Pas de paramètres? C'est de la folie! add_shortcode ('jgallery', 'jgallery_sc'); Ensuite, nous allons mettre en file d'attente les fichiers CSS et JS. N'oubliez pas que jQuery sera automatiquement mis en file d'attente (si ce n'est déjà fait), en spécifiant que le script Colorbox dépend dessus.
function jgallery_sc () // Enqueue colorbox.min.js (et jQuery si elle n'est pas déjà chargée) wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery ')); // file colorbox.css wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ Colorbox / colorbox.css'); add_shortcode ('jgallery', 'jgallery_sc'); Tout est prêt, sauf que nous devons utiliser le [Galerie] shortcode dans cette fonction. Nous allons utiliser le do_shortcode () fonction et retourne le [galerie lien = "fichier"] petit code:
function jgallery_sc () wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery')); wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ colorbox / colorbox.css'); return do_shortcode ('[gallery link = "fichier"]'); add_shortcode ('jgallery', 'jgallery_sc'); Terminé! Après avoir ajouté cette fonction dans le functions.php fichier de votre thème, vous pouvez commencer à utiliser le [jgallery] shortcode tout de suite. Dites-nous ce que vous pensez dans les commentaires ci-dessous. Prendre plaisir! :)
