jquery - 向 WP 主题添加精美的框

Question

我对制作自己的 WP 主题相当陌生。现在我正在尝试弄清楚如何向其添加灯箱类型功能。我广泛搜索了这个主题，我能找到的唯一像样的教程是:http://code.tutsplus.com/tutorials/add-a-responsive-lightbox-to-your-wordpress-theme--wp-28100

它使用 FancyBox。我尝试一遍又一遍地按照说明进行操作 - 没有用。不过，我的图像上没有 FancyBox 功能 - 如果我单击图像，它只会打开完整图像的路径，而不是灯箱。

不知道我做错了什么。在正确完成所有事情方面，我远非专家。

如果有更好的方法，或者 Lightbox 被认为比 Fancybox 更好 - 我愿意接受各种建议和指导。

这是我的测试页 - http://www.aspenwebsites.com/lothlorien/gallery/

基本上，我在主题的“inc”文件夹中创建了一个“lightbox”文件夹，并将从 Fancybox Github 下载的所有源文件转储到其中。

根据教程，我创建了包含以下内容的 lightbox.js 文件:

(function($) {

// Initialize the Lightbox for any links with the 'fancybox' class
$(".fancybox").fancybox();

// Initialize the Lightbox automatically for any links to images with extensions .jpg, .jpeg, .png or .gif
$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();

// Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up using [gallery link="file"] so that a Lightbox Gallery exists
$(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();

// Initalize the Lightbox for any links with the 'video' class and provide improved video embed support
$(".video").fancybox({
    maxWidth        : 800,
    maxHeight       : 600,
    fitToView       : false,
    width           : '70%',
    height          : '70%',
    autoSize        : false,
    closeClick      : false,
    openEffect      : 'none',
    closeEffect     : 'none'
});

})(jQuery);

然后在我的functions.php中添加:

function m31_add_lightbox() {
wp_enqueue_script( 'fancybox', get_template_directory_uri() . '/inc/lightbox/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/inc/lightbox/lightbox.js', array( 'fancybox' ), false, true );
wp_enqueue_style( 'lightbox-style', get_template_directory_uri() . '/inc/lightbox/jquery.fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'm31_add_lightbox' );

我使用的 HTML 标记是:

<a href="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"><img src="http://www.aspenwebsites.com/lothlorien/wp-content/uploads/2014/09/M31-Efremov-2.jpg"></a>

按照教程就可以了。我以为我需要添加一些类才能触发 jQuery，但教程如上所示。

就排队查询本身而言 - 我假设这是由我用作基础的二十四个主题完成的，但说实话，我不确定如何验证这一点。

Answer 1

正如我们在对话中发现的那样，删除 wp_enqueue_scripts 调用中的最后一个值( false、true )就可以了。