Magnific-popup 排队样式表无法在 wordpress 中正确加载

Question

我已经实现了 magnific-popup 并且几乎可以正常工作，但是样式表加载不正确。

当我单击图像时，javascript 正在运行并且在控制台中没有错误，但是 magnific-popup 样式表在检查器中似乎是这样输出的：

下图中的输出看起来正常吗？

我的目录

我的 magnific-popup 队列看起来正常吗？

function add_theme_scripts()
{
    wp_enqueue_style('raleway-font', 'https://fonts.googleapis.com/css?family=Raleway:200,200i,400,400i,600,600i');
    wp_enqueue_style('syne-font', 'https://fonts.googleapis.com/css2?family=Syne:wght@400;500');
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('magnific-popup-style', get_stylesheet_uri() . '/assets/css/magnific-popup.css', 'all');
    wp_enqueue_style('style', get_stylesheet_uri(), array(), false, 'all');

    wp_enqueue_script('jquery-3.5.1', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', array('jquery'), false, true); /*when uploaded to server, wordpress already has jquery*/
    wp_enqueue_script('magnific', get_template_directory_uri() . '/assets/js/magnific-popup/jquery.magnific-popup.min.js', 'jquery', false, true);
    wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', 'jquery', false, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

main.js

// magnific popup
jQuery('.gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 3], // Will preload 0 - before current, and 1 after the current image
        tPrev: 'Previous', // title for left button
        tNext: 'Next', // title for right button
    },
    removalDelay: 300,
    closeOnContentClick: true,
    midClick: true,
    mainClass: 'mfp-fade',
    callbacks: {
        buildControls: function () {
            // re-appends controls inside the main container
            this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
        }
    }
});

Answer 1

尝试使用 get_stylesheet_directory_uri()

文档说“（字符串）URI 到当前主题的样式表目录。”

https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/

Magnific-popup 排队样式表无法在 wordpress 中正确加载

Magnific-popup enqueue stylesheet not loading properly in wordpress

javascript

css

wordpress

jquery

enqueue