快速提示：將Colorbox整合到原生Shortcode中

原生 [圖庫] 短程式碼很好，但不是很好。在這個快速技巧中，我們將使用 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] 短程式碼。請在下面的評論中告訴我們您的想法。享受！ :)

#

以上是快速提示：將Colorbox整合到原生Shortcode中的詳細內容。更多資訊請關注PHP中文網其他相關文章！