自定义简码库忽略排队的 CSS 和 JS 文件

Question

我正在尝试通过短代码引入我自己的图片库，以便我可以将其添加到 Elementor 小部件中。目前，我已完成所有工作，但我没有在该画廊中显示任何样式或图像。css 文件和 js 文件都在浏览器中加载。画廊的所有 HTML 也正在加载，但是我没有看到任何样式或图像出现。

这是短代码：

add_shortcode( 'selected_works_gallery', function () {

    ob_start();?>

    <div id = "selected_works_gallery" data-nanogallery2 = '{ "thumbnailWidth": "auto", "thumbnailHeight": 200}'>

        <?php foreach (get_field('selected_works') as $image): ?>

        

        <a href="<?php echo $image['sizes']['medium']?>" data-ngthumb="<?php echo $image['sizes']['medium']?>">Image tagline</a>

        

        <?php endforeach; ?>

    </div>

<?php

    $out = ob_get_contents();

    ob_end_clean();

    return $out;

} );

排队：

function enqueue_custom_styles() {

    wp_enqueue_style( 'nanogallery2', esc_url_raw('https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css'), array(), null );

}

add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles');

function enqueue_custom_scripts(){

    wp_enqueue_script( 'nanogallery2_js', esc_url_raw('https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js'), false );

}

add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts');

我唯一的猜测是：

HTML 被隐藏在 div 中，导致排队的文件无法选择标签

具有优先级的东西（真的不明白这一点，它们都只是设置为默认值）

WordPress 存在外部文件排队问题

我必须与 Elementor 合作才能让这个画廊正常工作

NanoGallery2 不适合这个，或者我设置错误。

预先感谢您的任何帮助。

Answer 1

我可以通过将 js 和 css 文件放入本地文件来使其工作。Nanogallery 需要 Jquery 才能工作，并且在它之后加载。我只是在我自己的脚本之前将 Jquery 排队，并且画廊工作正常。