JavaScript和CSS無法正常加載在WordPress網站

我設法讓通過codepen工作我的代碼，你可以看到，如果你訪問鏈接here JavaScript和CSS無法正常加載在WordPress網站

現在試圖在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); 
    }); 
});

這裏，它是我的functions.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');

來源

2017-04-06 Wosley Alarico

您參考網址，你的HTML的<head>是不正確的，因爲他們是如下：

如果從兩個網址的開頭刪除http://wordpressdev.burnnotice.co.za/wp-content/themes/testsite，他們應該載入罰款。要做到這一點，您必須從php文件中移除這兩個引用的get_template_directory_uri() .部分。

嘗試下面的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_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', '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('calendario', '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');

來源

2017-04-06 08:46:21 AryKay

最初它只是工作fontawesome，但我取消了第二功能與第一功能加載的一切，因爲它現在確實不是我的codepen它的工作原理是相同的。欣賞支持 –

它不是在所有

與您js你的鏈接字體真棒CSS中的錯誤。你的鏈接是這樣的：

http://wordpressdev.burnnotice.co.za/wp-content/themes/testsitehttps://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

它應該是這樣的：

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

結帳您header.php文件的代碼。你應該直接鏈接！像這樣：

<link rel='stylesheet' id='fontawesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0' type='text/css' media='all' />

來源

2017-04-06 08:46:34

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-content/themes/testsitehttps:/maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0.0

加載的資產，很明顯是錯誤的。

get_template_directory_uri（）獲取到你的WP主題的相對路徑。

相反，試試這個：

wp_enqueue_style('fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all');

來源

2017-04-06 08:48:33

正是這一點。與@AryKay完整答案我跑我想要的。謝謝 –

沒問題。如果答案有用，請將其標記爲這樣。 –

JavaScript和CSS無法正常加載在WordPress網站

回答

相關問題