忽略队列的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中，以致于排队的文件无法选择带有优先级的标记(真的不明白这一点，它们都设置为default)

• WordPress，外部文件被排队的

• 有问题，我必须与Elementor一起做一些事情才能让这个库工作)

提前感谢您的帮助。

Answer 1

我能够通过将js和css文件引入本地文件来使其工作。Nanogallery需要Jquery才能工作，然后加载。我只是在我自己的脚本和库运行良好之前对Jquery进行排队。