宏弹出式队列样式表无法在wordpress中正确加载

问题描述

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

当我单击图像时，javascript正在运行，并且在控制台中没有错误，但是在检查器中似乎正在输出如下所示的宏弹出式样式表：

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

我的目录

我的壮观弹出窗口看起来不错吗？

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'),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',true);
    wp_enqueue_script('main',get_template_directory_uri() . '/assets/js/main.js',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));
        }
    }
});

解决方法

尝试使用get_stylesheet_directory_uri（）

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

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