Astuce rapide : intégrez Colorbox dans le shortcode natif

Natif [图库] Les shortcodes sont bons, mais pas géniaux. Dans cette astuce rapide, nous utiliserons jQuery pour l’embellir.

[图库] Les shortcodes ne sont pas très bons. Vous ne pouvez pas désactiver son CSS par défaut, vous ne pouvez pas ajouter ou modifier des classes CSS, vous ne pouvez pas modifier les propriétés par défaut (il s'agit en fait d'un problème courant de shortcode)... bien que ces choses ne dérangeront pas la plupart des personnes développant WordPress. , un cinglé comme moi pourrait se plaindre ! :)

Dans cette astuce rapide, nous allons supprimer la page de pièce jointe d'image et permettre aux visiteurs de notre site de visualiser les images dans une boîte modale jQuery.

---

L'un des meilleurs plugins jQuery Lightbox : ColorBox

Avec moins de 5 Ko (zippé) et prenant en charge une large gamme de navigateurs (même IE6), Colorbox est mon plugin lightbox jQuery préféré.

Comme vous pouvez le voir sur la page du plugin, il contient des tonnes de paramètres, de méthodes et de crochets afin que vous puissiez le personnaliser comme vous le souhaitez. Il propose également 5 thèmes propres basés sur CSS.

Téléchargez le package et colorbox.min.js 和 5 个主题之一（colorbox.css 文件和“images”文件夹）提取到名为“colorbox”的文件夹中，然后将该文件夹上传到您的 WordPress主题。上传前在colorbox.min.jsajoutez le code suivant à la fin du fichier :

jQuery(document).ready(function($) {
	$(".gallery-icon a").colorbox({rel:"gallery"});
});

---

Shortcode-Ception : créez un shortcode qui utilise un autre shortcode

Je sais que ce sera un peu bizarre, mais cela semble être le moyen le plus propre. Nous allons créer le shortcode [jgallery].

Astuce de Quick Tip : Si vous envisagez de modifier tous les shortcodes de la galerie dans votre message après avoir créé le [jgallery] 短代码后更改帖子中的所有图库短代码，我建议使用搜索正则表达式插件来搜索/替换 [gallery] [jgallery] shortcode, je vous recommande d'utiliser le plugin de recherche regex pour rechercher/remplacer [gallery]

.

Comme d'habitude, nous commencerons par créer une fonction de shortcode de base :

function jgallery_sc() {
	// No parameters? This is madness!
}
add_shortcode('jgallery','jgallery_sc');

Ensuite, nous mettons en file d'attente les fichiers CSS et JS. N'oubliez pas qu'en spécifiant le script Colorbox dependency

, jQuery sera automatiquement mis en file d'attente (s'il ne l'est pas déjà).

function jgallery_sc() {
	// Enqueue colorbox.min.js (and jQuery if it is not already loaded)
	wp_enqueue_script('colorbox-js', get_template_directory_uri().'/colorbox/colorbox.min.js',array('jquery'));
	// Enqueue colorbox.css
	wp_enqueue_style('colorbox-css', get_template_directory_uri().'/colorbox/colorbox.css');
}
add_shortcode('jgallery','jgallery_sc');

[gallery] 短代码。我们将使用 do_shortcode() 函数并返回 [gallery link="file"]Tout est prêt, sauf que nous devons utiliser

shortcode dans cette fonction :

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="file"]');
}
add_shortcode('jgallery','jgallery_sc');

Tout est fait ! Une fois que vous avez ajouté cette fonction au fichier functions.php[jgallery] de votre thème, vous pouvez commencer à utiliser le shortcode immédiatement. Faites-nous part de vos réflexions dans les commentaires ci-dessous. apprécier! :)

🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!