Magnific-popup在我的WordPress主题页面模板中不起作用

编程问答 2022-06-07

问题描述

我正在尝试在主题中加载宏弹出菜单，但是它不起作用，我不确定为什么。 当我单击图像时，它仅显示标准原始图像。

当我仅使用html构建它时，它工作正常，但是在wordpress中，它似乎不起作用。

我确实使用alert（'hi'）测试了main.js和jquery.magnific-popup.min.js；并且它们都吐出了警报，因此它们都在工作。

我的入队文件似乎正确，尽管我不确定我使用的是正确的'the_post_thumbnail_url（）;'。在我的页面模板中用于图像链接的功能？

有人可以发现问题吗？

仅供参考：我不想使用该插件。

我的目录图片

enter image description here

排队文件

function add_theme_scripts()
{
    wp_enqueue_style('magnific-popup',get_stylesheet_uri() . '/assets/css/magnific-popup/magnific-popup.css',true);
    wp_enqueue_style('style',get_stylesheet_uri());

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

我的page-project.PHP 

<?PHP
/**
 * Template Name: Project Page
 * Template Post Type: post
 */

get_header();
?>

<div class="content">
    <h1 class="title main-title"><?PHP the_title(); ?></h2>
        <?PHP if (have_posts()) : while (have_posts()) : the_post();
                the_content();
            endwhile;
        endif; ?>

        <?PHP
        $projects = new WP_Query(array(
            'posts_per_page' => 5,'post_type'      => 'projects',)); ?>

        <div class="the-content">
            <?PHP if ($projects->have_posts()) : while ($projects->have_posts()) : $projects->the_post();   ?>
                    <div class="post-content">
                        <div class="project-images">
                            <?PHP if (has_post_thumbnail()) : ?>
                                <a class="popup" href="<?PHP the_post_thumbnail_url(); ?>">
                                    <img src="<?PHP the_post_thumbnail_url(); ?>" alt="<?PHP the_title(); ?>" title="<?PHP the_title(); ?>" />
                                </a>
                            <?PHP endif; ?>
                        </div>
                        <h2 class="title"><?PHP the_title(); ?></h2>
                <?PHP endwhile;
            else : _e('Sorry,no posts seem to have been found');
            endif; ?>
                    </div>
        </div>

        <div class="step-back">
            <a href="<?PHP echo site_url('/'); ?>">home</a></p>
        </div>
来自main.js的

js文件

// magnific popup
jQuery('.project-images').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));
        }
    }
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmagnific-popupwordpresswordpress