在WordPress站点中无法正确加载JavaScript和CSS

时间:2017-04-06 作者:user agent

我设法通过codepen使我的代码正常工作,如果访问链接,您可以看到here

现在尝试在WordPress测试站点上实现,看起来我的javascript没有正常工作,fontawesome也没有正确加载。Here is the link for the test site

这是我的js:

$(document).ready(function() {
  var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $(\'.submit-here\').click(function() {
    // var link = day_1+month_1+year;
    var date1 = $("#txtFrom").datepicker(\'getDate\'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker(\'getDate\'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 

    var where = $(\'#selection :selected\').text();
    var people = $(\'#people :selected\').text();

    console.log(\'www.lekkeslaap.co.za/akkommodasie-in/\'+where+\'?q=\'+where+\'&start=\'+day_1+\'+\'+month_1+\'+\'+year_1+\'&end=\'+day_2+\'+\'+month_2+\'+\'+year_2+\'&pax=\'+people);   
  });
});
这是我的功能。php:

function testsite_scripts() {
    wp_enqueue_style( \'testsite-style\', get_stylesheet_uri() );
    wp_enqueue_style( \'fontawesome\', get_template_directory_uri() . \'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\', array(), \'1.0.0\', \'all\' );
    wp_enqueue_script( \'testsite-navigation\', get_template_directory_uri() . \'/js/navigation.js\', array(\'jquery\'), \'20151215\', true );

    wp_enqueue_script( \'testsite-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', array(), \'20151215\', true );

    if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
        wp_enqueue_script( \'comment-reply\' );
    }
}
add_action( \'wp_enqueue_scripts\', \'testsite_scripts\' );

function testsite_load_scripts(){

    wp_enqueue_style( \'font_extra\', get_template_directory_uri() . \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css\', array(), \'1.0.0\', \'all\' );
    wp_enqueue_script( \'plugin_script\', get_template_directory_uri() . \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\', array(\'jquery\'), \'20151215\', true );
    wp_enqueue_script( \'calendario\', get_template_directory_uri() . \'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js\', array(\'jquery\'), \'20151215\', true );
    wp_enqueue_script( \'calendario\', get_template_directory_uri() . \'/js/calendario.js\', array(\'jquery\'), \'20151215\', true );
}

add_action( \'wp_enqueue_scripts\', \'testsite_load_scripts\' );

2 个回复
SO网友:Ihor Vorotnov

WordPress以无冲突模式使用jQuery。使用方法如下:

(function($){

    /**
     * Immediate execution
     */
    console.log();

    /**
     * When DOM is ready
     */
    $(document).ready(function(){

    });

    /**
     * When all content is loaded
     */
    $(window).load(function(){

    }); // window.load END

})(jQuery);

SO网友:user agent

编辑了我的函数。php,现在可以使用了

function testsite_scripts() {
    wp_enqueue_style( \'testsite-style\', get_stylesheet_uri() );
    wp_enqueue_style( \'fontawesome\', \'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\', array(), \'1.0.0\', \'all\' );
    wp_enqueue_style( \'plugin-style\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css\', array(), \'1.0.0\', \'all\' );
    wp_enqueue_script( \'plugin_script\', \'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js\', array(\'jquery\'), \'20151215\', true );
    wp_enqueue_script( \'testsite-navigation\', get_template_directory_uri() . \'/js/navigation.js\', array(\'jquery\'), \'20151215\', true );
    wp_enqueue_script( \'calendario\', get_template_directory_uri() . \'/js/calendario.js\', array(\'jquery\'), \'20151215\', true );
    wp_enqueue_script( \'testsite-skip-link-focus-fix\', get_template_directory_uri() . \'/js/skip-link-focus-fix.js\', array(), \'20151215\', true );

    if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
        wp_enqueue_script( \'comment-reply\' );
    }
}
add_action( \'wp_enqueue_scripts\', \'testsite_scripts\' );