我正在使用AnimatedModal JS库允许用户登录我的Wordpress网站。
在我的函数中.php我按如下方式排队：
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery') );
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');
在中端.js我调用 animatedModal(( 函数。
jQuery(document).ready(function($) {
jQuery("#login-anchor").animatedModal();
}
这在大多数页面上都工作正常，除了自定义 WordPress 模板，我收到错误
Uncaught TypeError: jQuery(...).animatedModal is not a function
在所有页面上的源代码中，在我进行函数调用之前，库已正确编码，因此我不确定为什么仅在自定义模板上不起作用。
我还创建了一个空模板文件，其中仅包含页眉和页脚，以查看是否有任何代码可能导致错误，但无济于事。
<?php
/* Template name: Write */
get_header(); ?>
<?php get_footer(); ?>
您的本地animatedModal.min.js应该在</body>之前加载，而不是在<head>中加载，如下所述：
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery'),false, true );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');