Вопрос или проблема
Мне удалось заставить мой код работать через codepen, как вы можете увидеть, если посетите ссылку здесь
Теперь, пытаясь реализовать это на тестовом сайте WordPress, похоже, что мой javascript не работает, а fontawesome не загружается должным образом. Вот ссылка на тестовый сайт
Вот мой 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' );
WordPress использует jQuery в режиме noConflict. Используйте его так:
(function($){
/**
* Непосредственное выполнение
*/
console.log();
/**
* Когда DOM готов
*/
$(document).ready(function(){
});
/**
* Когда весь контент загружен
*/
$(window).load(function(){
}); // window.load END
})(jQuery);
Я отредактировал свой functions.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' );
Ответ или решение
Проблема с загрузкой JavaScript и CSS на сайте WordPress
В процессе разработки сайта на платформе WordPress может возникнуть ряд проблем, связанных с корректной загрузкой JavaScript и стилей CSS. Рассмотрим ситуацию, в которой вы сталкиваетесь с проблемой, когда JavaScript не работает, а также иконки FontAwesome не загружаются должным образом. Проанализируем предоставленный код и предложим решения.
1. Проблемы с загрузкой CSS
В вашем исходном коде использовалась неправильная структура для подключения фонтов FontAwesome:
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_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '1.0.0', 'all' );Обратите внимание, что get_template_directory_uri() используется для подключения локальных файлов, но для внешних ресурсов будет уместно сразу указать URL.
2. Загрузка JavaScript
При подключении внешних библиотек jQuery и jQuery UI заметьте, что необходимо использовать правильный синтаксис. Ваш первоначальный код использовал get_template_directory_uri() для указания внешних скриптов и стилей. Это не верно, так как данный метод предназначен для подключения локальных файлов.
Также используется &, что является HTML символьной сущностью для &. Вместо этого используйте просто &&.
Вот как должен выглядеть ваш обновленный код для подключения библиотек:
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( 'jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js', array( 'jquery' ), null, true );
wp_enqueue_script( 'calendario', get_template_directory_uri() . '/js/calendario.js', array( 'jquery' ), '20151215', true );
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' );3. Применение jQuery с noConflict
WordPress включает jQuery в режиме noConflict, поэтому для использования jQuery вам необходимо обернуть ваш код в функцию, которая внутри анонимной функции принимает $ в качестве параметра:
(function($) {
$(document).ready(function() {
// ваш код
});
})(jQuery);Это предотвратит конфликты с другими библиотеками JavaScript, которые также могут использовать $.
Заключение
Итак, вы сейчас обладаете полным набором рекомендаций, которые помогут вам исправить проблемы с загрузкой JavaScript и CSS на вашем тестовом сайте WordPress. Убедитесь в том, что вы подключаете внешние ресурсы правильно и используете jQuery с учетом режима noConflict. Следуйте вышеприведенным указаниям, и ваш сайт должен работать корректно. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью!