Kurztipp: Integrieren Sie Colorbox in nativen Shortcode

Nativ [图库] Shortcodes sind gut, aber nicht großartig. In diesem kurzen Tipp verwenden wir jQuery, um es zu verschönern.

[图库] Shortcodes sind nicht sehr gut. Sie können das Standard-CSS nicht deaktivieren, Sie können keine CSS-Klassen hinzufügen oder bearbeiten, Sie können keine Standardeigenschaften bearbeiten (dies ist eigentlich ein häufiges Shortcode-Problem) ... obwohl diese Dinge die meisten Leute, die WordPress entwickeln, nicht stören , ein Spinner wie ich könnte sich beschweren! :)

In diesem kurzen Tipp entfernen wir die Seite mit Bildanhängen und ermöglichen den Besuchern unserer Website, Bilder in einer modalen jQuery-Box anzuzeigen.

---

Eines der besten jQuery-Lightbox-Plugins: ColorBox

Mit weniger als 5 KB (komprimiert) und der Unterstützung einer Vielzahl von Browsern (sogar IE6) ist Colorbox mein Lieblings-jQuery-Lightbox-Plugin.

Wie Sie auf der Plugin-Seite sehen können, verfügt es über unzählige Einstellungen, Methoden und Hooks, sodass Sie es nach Ihren Wünschen anpassen können. Es verfügt außerdem über 5 saubere CSS-basierte Themes.

Laden Sie das Paket herunter und colorbox.min.js 和 5 个主题之一（colorbox.css 文件和“images”文件夹）提取到名为“colorbox”的文件夹中，然后将该文件夹上传到您的 WordPress主题。上传前在colorbox.min.jsfügen Sie den folgenden Code am Ende der Datei hinzu:

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

---

Shortcode-Ception: Erstellen Sie einen Shortcode, der einen anderen Shortcode verwendet

Ich weiß, das wird etwas seltsam sein, aber es scheint der sauberste Weg zu sein. Wir erstellen den [jgallery] Shortcode.

Tipp von Quick Tip: Wenn Sie vorhaben, alle Galerie-Shortcodes in Ihrem Beitrag zu ändern, nachdem Sie den [jgallery] 短代码后更改帖子中的所有图库短代码，我建议使用搜索正则表达式插件来搜索/替换 [gallery] [jgallery] Shortcode erstellt haben, empfehle ich die Verwendung des Such-Regex-Plugins zum Suchen/Ersetzen nach [gallery]

.

Wie üblich beginnen wir mit der Erstellung einer grundlegenden Shortcode-Funktion:

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

Als nächstes stellen wir die CSS- und JS-Dateien in die Warteschlange. Vergessen Sie nicht, dass jQuery durch Angabe des Colorbox-Skripts Abhängigkeit

automatisch in die Warteschlange gestellt wird (sofern es nicht bereits in die Warteschlange gestellt wird).

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"]Alles ist fertig, außer dass wir in dieser Funktion den

Shortcode verwenden müssen:

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');

Alles erledigt! Sobald Sie diese Funktion zur Datei functions.php[jgallery] Ihres Themes hinzugefügt haben, können Sie den -Shortcode sofort verwenden. Teilen Sie uns Ihre Meinung in den Kommentaren unten mit. genießen! :)

🎜

Das obige ist der detaillierte Inhalt vonKurztipp: Integrieren Sie Colorbox in nativen Shortcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!