Вопрос или проблема
У меня есть файл script.js для конвертации HTML в WordPress. В HTML он работает, но в WordPress не работает. Этот файл содержит слайдер, меню и т.д., я смог конвертировать HTML в WordPress без этого файла, файл содержит следующее содержимое
function include(scriptUrl) {
document.write('<script src="' + scriptUrl + '"></script>');
}
function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
};
/* cookie.JS
========================================================*/
include('js/jquery.cookie.js');
/* Библиотека easing
========================================================*/
include('js/jquery.easing.1.3.js');
/* Зафиксированные меню
========================================================*/
;
(function ($) {
var o = $('html');
if (o.hasClass('desktop')) {
include('js/tmstickup.js');
$(document).ready(function () {
$('#stuck_container').TMStickUp({})
});
}
})(jQuery);
/* ToTop
========================================================*/
;
(function ($) {
var o = $('html');
if (o.hasClass('desktop')) {
include('js/jquery.ui.totop.js');
$(document).ready(function () {
$().UItoTop({
easingType: 'easeOutQuart',
containerClass: 'toTop fa fa-arrow-up'
});
});
}
})(jQuery);
/* EqualHeights
========================================================*/
;
(function ($) {
var o = $('[data-equal-group]');
if (o.length > 0) {
include('js/jquery.equalheights.js');
}
})(jQuery);
/* Плавная прокрутка
========================================================*/
;
(function ($) {
var o = $('html');
if (o.hasClass('desktop')) {
include('js/jquery.mousewheel.min.js');
include('js/jquery.simplr.smoothscroll.min.js');
$(document).ready(function () {
$.srSmoothscroll({
step: 150,
speed: 800
});
});
}
})(jQuery);
/* Год авторских прав
========================================================*/
;
(function ($) {
var currentYear = (new Date).getFullYear();
$(document).ready(function () {
$("#copyright-year").text((new Date).getFullYear());
});
})(jQuery);
/* Меню Superfish
========================================================*/
;
(function ($) {
include('js/superfish.js');
})(jQuery);
/* Навигационная панель
========================================================*/
;
(function ($) {
include('js/jquery.rd-navbar.js');
})(jQuery);
/* Камера
========================================================*/
;(function ($) {
var o = $('#camera');
if (o.length > 0) {
if (!(isIE() && (isIE() > 9))) {
include('js/jquery.mobile.customized.min.js');
}
include('js/camera.js');
$(document).ready(function () {
o.camera({
autoAdvance: true,
height: '25.8536%',
minHeight: '300px',
pagination: true,
thumbnails: false,
playPause: false,
hover: false,
loader: 'none',
navigation: false,
navigationHover: false,
mobileNavHover: false,
fx: 'simpleFade'
})
});
}
})(jQuery);
/* FancyBox
========================================================*/
;(function ($) {
var o = $('.thumb');
if (o.length > 0) {
include('js/jquery.fancybox.js');
include('js/jquery.fancybox-media.js');
include('js/jquery.fancybox-buttons.js');
$(document).ready(function () {
o.fancybox();
});
}
})(jQuery);
/* Параллакс
=============================================*/
;(function ($) {
include('js/jquery.rd-parallax.js');
})(jQuery);
/* Google Map
========================================================*/
;
(function ($) {
var o = document.getElementById("google-map");
if (o) {
include('//maps.google.com/maps/api/js?sensor=false');
include('js/jquery.rd-google-map.js');
$(document).ready(function () {
var o = $('#google-map');
if (o.length > 0) {
var styleArray = [
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"hue": "#2c2e33"
},
{
"saturation": 7
},
{
"lightness": 19
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": -2
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -90
},
{
"lightness": -8
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": 10
},
{
"lightness": 69
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -78
},
{
"lightness": 67
},
{
"visibility": "simplified"
}
]
}
]
o.googleMap({
styles: styleArray,
});
}
});
}
})
(jQuery);
(function ($) {
var o = document.getElementById("google-map2");
if (o) {
include('//maps.google.com/maps/api/js?sensor=false');
include('js/jquery.rd-google-map.js');
$(document).ready(function () {
var o = $('#google-map2');
if (o.length > 0) {
var styleArray = [
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"hue": "#2c2e33"
},
{
"saturation": 7
},
{
"lightness": 19
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": -2
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -90
},
{
"lightness": -8
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": 10
},
{
"lightness": 69
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -78
},
{
"lightness": 67
},
{
"visibility": "simplified"
}
]
}
]
o.googleMap({
styles: styleArray,
});
}
});
}
})
(jQuery);
/* WOW
========================================================*/
;
(function ($) {
var o = $('html');
if ((navigator.userAgent.toLowerCase().indexOf('msie') == -1 ) || (isIE() && isIE() > 9)) {
if (o.hasClass('desktop')) {
include('js/wow.js');
$(document).ready(function () {
new WOW().init();
});
}
}
})(jQuery);
/* Контактная форма
========================================================*/
;
(function ($) {
var o = $('#contact-form');
if (o.length > 0) {
include('js/modal.js');
include('js/TMForm.js');
if($('#contact-form .recaptcha').length > 0){
include('../www.google.com/recaptcha/api/js/recaptcha_ajax.js');
}
}
})(jQuery);
/* Search.js
========================================================*/
;
(function ($) {
include('js/TMSearch.js');
})(jQuery);
/* Исправление ориентации для планшетов
========================================================*/
$(function () {
// IPad/IPhone
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent,
gestureStart = function () {
viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0";
},
scaleFix = function () {
if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", gestureStart, false);
}
};
scaleFix();
// Меню Android
if (window.orientation != undefined) {
var regM = /ipod|ipad|iphone/gi,
result = ua.match(regM);
if (!result) {
$('.sf-menus li').each(function () {
if ($(">ul", this)[0]) {
$(">a", this).toggle(
function () {
return false;
},
function () {
window.location.href = $(this).attr("href");
}
);
}
})
}
}
});
var ua = navigator.userAgent.toLocaleLowerCase(),
regV = /ipod|ipad|iphone/gi,
result = ua.match(regV),
userScale = "";
if (!result) {
userScale = ",user-scalable=0"
}
document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0' + userScale + '">');
Я пробовал много методов. Как мне правильно подключить это, чтобы работало в WordPress?
Откройте консоль (щелчок правой кнопкой мыши -> инспектировать – Консоль) и посмотрите, в чем ошибка, вероятно, вы не подключили jQuery.
Вы должны подключать скрипты из functions.php (это лучшая практика).
function theme_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
Это не проблема WP, эта функция – ваша проблема, и причина множества других проблем, о которых вы не знаете:
function include(scriptUrl) {
document.write('<script src="' + scriptUrl + '"></script>');
}
....
include('js/jquery.cookie.js');
Это плохая практика и подвержено ошибкам:
- Каждый раз, когда это происходит, вся отрисовка приостанавливается, пока браузер загружает удаленный скрипт.
- Браузер не может предварительно загрузить скрипт, чтобы улучшить производительность.
Но что более важно, функция ожидает полный URL, в то время как вы передаете относительные URL. Это означает, что каждый раз, когда вы меняете страницу, URL, которые пытается загрузить браузер, тоже меняются.
например, для js/jquery.cookie.js
- На главной странице
example.com/js/jquery.cookie.js - На
/aboutон попытается загрузитьexample.com/about/js/jquery.cookie.js - На
/testон попытается загрузитьexample.com/test/js/jquery.cookie.js - и т.д.
Таким образом, нужно передавать абсолютные URL. Но хуже того, есть проблемы с производительностью, поэтому вместо использования функции include сделайте одно из следующих действий:
- Зарегистрируйте и подключите все библиотеки, если вам нужно выборочно подключать их, делайте проверки на PHP, а не на JS.
- Соберите их все в один файл.
- Используйте современный инструмент сборки JS и транскомпилируйте их в одну сборку с помощью Babel и Webpack, это позволит вам использовать синтаксис ES6 и функцию
require.
Снова, это не проблема WP, это проблема с оригинальным кодом, который всегда был там, но теперь проявился, потому что вы переместили файл в другое место на сервере относительно корня.
Кроме того, вам следует обратить внимание на инструменты разработчика вашего браузера. Консоль JS будет выдавать 404 ошибки для всех этих вызовов include, сообщая, что браузер не смог найти файл JS и полный URL, по которому он пытался его найти.
Ответ или решение
Как правильно подключить несколько JavaScript файлов в WordPress с помощью script.js
При миграции или интеграции вашего HTML-кода с WordPress, вы можете столкнуться с проблемами при помощи JavaScript. В частности, если ваш скрипт работает на HTML-странице, но не функционирует в WordPress. Мы рассмотрим, как правильно подключать JavaScript файлы в WordPress и решим проблемы, с которыми вы могли столкнуться.
Проблемы с оригинальным кодом
В вашем HTML-коде используется функция include(scriptUrl), которая добавляет скрипты напрямую в HTML с помощью document.write(). Эта практика может вызвать множество проблем:
- Производительность: Использование
document.writeблокирует рендеринг страницы, пока загружается скрипт. - Относительные пути: Ваш код пытается подключить файлы с относительными путями, что приводит к ошибкам при изменении страницы. Например, когда вы обращаетесь к
js/jquery.cookie.js, браузер будет искать этот файл по адресуexample.com/test/js/jquery.cookie.jsна странице/test. - Ошибки в консоли: Вы можете получить 404 ошибки, если браузер не найдет указанные скрипты.
Рекомендуемая практика: Использование wp_enqueue_script
В WordPress существует рекомендованный способ подключения JavaScript и CSS файлов через функции wp_enqueue_script() и wp_enqueue_style(). Это гарантирует правильное подключение библиотек, а также их очередность загрузки.
Вот пример того, как можно подключать ваши скрипты в файле functions.php вашей темы:
function theme_scripts() {
// Подключаем jQuery
wp_enqueue_script('jquery');
// Подключаем остальные ваши скрипты
wp_enqueue_script('jquery-cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array('jquery'), null, true);
wp_enqueue_script('jquery-easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array('jquery'), null, true);
wp_enqueue_script('tm-stickup', get_template_directory_uri() . '/js/tmstickup.js', array('jquery'), null, true);
wp_enqueue_script('jquery-ui-totop', get_template_directory_uri() . '/js/jquery.ui.totop.js', array('jquery'), null, true);
// Продолжайте добавлять свои скрипты аналогично...
// Подключаем основной скрипт, который зависит от всех предыдущих
wp_enqueue_script('script', get_template_directory_uri() . '/js/script.js', array('jquery', 'jquery-cookie', 'jquery-easing', 'tm-stickup'), false, true);
}
add_action('wp_enqueue_scripts', 'theme_scripts');Зачем это важно?
Использование функции wp_enqueue_script:
- Обеспечивает правильную загрузку скриптов, избегая конфликтов.
- Упрощает отладку и управление зависимостями.
- Улучшает производительность, так как WordPress оптимизирует загрузку.
Заключение
Если вы столкнулись с проблемами при интеграции JavaScript кода в WordPress, перенастройка метода подключения скриптов через wp_enqueue_script является наилучшим решением. Старайтесь избегать использования document.write() и вместо этого упакуйте ваши JavaScript-файлы, чтобы они загружались корректно и не вызывали ошибок.
Не забывайте проверять консоль разработчика для выявления возможных ошибок, и всегда проверяйте пути к вашим скриптам, чтобы устранить 404 ошибки. Также рассмотрите возможность использования инструментов сборки (например, Webpack) для объединения и минификации ваших JavaScript файлов, что улучшит производительность вашего сайта.