Petua Pantas: Integrasikan Colorbox ke dalam kod pendek asli

Native [Galeri] Kod pendek bagus, tetapi tidak bagus. Dalam petua cepat ini, kami akan menggunakan jQuery untuk mencantikkannya. [图库] 短代码很好，但不是很好。在这个快速技巧中，我们将使用 jQuery 来美化它。

[图库] 短代码不是很好。你不能禁用它的默认 CSS，你不能添加或编辑 CSS 类，你不能编辑默认属性（这实际上是一个普遍的短代码问题）......虽然这些东西不会打扰大多数人WordPress 开发者，像我这样的怪人可能会抱怨！ :)

在这个快速技巧中，我们将摆脱图像附件页面，并让我们网站的访问者在 jQuery 模式框中浏览图像。

---

最好的 jQuery Lightbox 插件之一：ColorBox

Colorbox 小于 5KB（压缩后）并支持广泛的浏览器（甚至包括 IE6），是我最喜欢的 jQuery lightbox 插件。

正如您从插件页面中看到的，它具有大量设置、方法和挂钩，因此您可以按照您想要的方式自定义它。它还具有 5 个简洁的基于 CSS 的主题。

下载该包并将 colorbox.min.js 和 5 个主题之一（colorbox.css 文件和“images”文件夹）提取到名为“colorbox”的文件夹中，然后将该文件夹上传到您的 WordPress主题。上传前在colorbox.min.js文件末尾添加以下代码：

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

---

Shortcode-Ception：构建使用另一个短代码的短代码

我知道这会有点奇怪，但这似乎是最干净的方式。我们将创建 [jgallery] 短代码。

快速提示中的提示：如果您打算在创建 [jgallery] 短代码后更改帖子中的所有图库短代码，我建议使用搜索正则表达式插件来搜索/替换 [gallery] [jgallery].

像往常一样，我们将从创建基本的短代码函数开始：

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

接下来，我们将 CSS 和 JS 文件入队。不要忘记，通过指定 Colorbox 脚本依赖，jQuery 将自动入队（如果尚未入队）。

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"] 短代码：

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

全部完成！将此函数添加到主题的 functions.php 文件中后，您可以立即开始使用 [jgallery]

[Galeri] Kod pendek tidak begitu baik. Anda tidak boleh melumpuhkan CSS lalainya, anda tidak boleh menambah atau mengedit kelas CSS, anda tidak boleh mengedit sifat lalai (ini sebenarnya masalah kod pendek biasa)...walaupun perkara ini tidak akan mengganggu kebanyakan orang membangunkan WordPress Atau , orang aneh seperti saya mungkin mengeluh! :)

Dalam petua pantas ini, kami akan membuang halaman lampiran imej dan membenarkan pelawat tapak kami melihat imej dalam kotak modal jQuery.

---

Salah satu pemalam Peti Cahaya jQuery terbaik: ColorBox

Colorbox Dengan saiz kurang daripada 5KB (zip) dan menyokong pelbagai pelayar (malah IE6), Colorbox ialah pemalam peti cahaya jQuery kegemaran saya. #🎜🎜## 🎜🎜 # #🎜🎜#Seperti yang anda boleh lihat dari halaman pemalam, ia mempunyai banyak tetapan, kaedah dan cangkuk supaya anda boleh menyesuaikannya dengan cara yang anda mahukan. Ia juga mempunyai 5 tema berasaskan CSS yang bersih. #🎜🎜# #🎜🎜#Muat turun pakej dan ekstrak colorbox.min.js dan salah satu daripada 5 tema (fail colorbox.css dan folder "imej") ke dalam direktori yang dipanggil " colorbox" dan kemudian muat naik folder itu ke tema WordPress anda. Sebelum memuat naik, tambah kod berikut pada penghujung fail colorbox.min.js: #🎜🎜# rrreee

---

Shortcode-Ception: Bina kod pendek yang menggunakan kod pendek lain

#🎜🎜# Saya tahu ini akan menjadi sedikit pelik, tetapi nampaknya cara yang paling bersih. Kami akan membuat kod pendek [jgallery]. #🎜🎜#

#🎜🎜# Petua daripada Petua Pantas: Jika anda bercadang untuk menukar semua kod pendek galeri dalam siaran anda selepas membuat kod pendek [jgallery], saya syorkan menggunakan pemalam regex carian untuk mencari/menggantikan [galeri] [jgallery].#🎜🎜#

#🎜🎜# Seperti biasa, kami akan mulakan dengan mencipta fungsi kod pendek asas: #🎜🎜# rrreee #🎜🎜#Seterusnya, kami mengalir fail CSS dan JS. Jangan lupa bahawa dengan menyatakan skrip Colorbox dependency, jQuery akan secara automatik dimasukkan ke dalam baris gilir jika ia belum dimasukkan ke dalam baris gilir. #🎜🎜# rrreee #🎜🎜#Semuanya sudah sedia, kecuali kita perlu menggunakan kod pendek [galeri] dalam fungsi ini. Kami akan menggunakan fungsi do_shortcode() dan mengembalikan [gallery link="file"] shortcode: #🎜🎜# rrreee #🎜🎜#Selesai! Sebaik sahaja anda menambah fungsi ini pada fail functions.php tema anda, anda boleh mula menggunakan kod pendek [jgallery] dengan serta-merta. Beritahu kami pendapat anda dalam ulasan di bawah. nikmatilah! :)#🎜🎜# #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#

Atas ialah kandungan terperinci Petua Pantas: Integrasikan Colorbox ke dalam kod pendek asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!