Как правильно написать или подключить js файл в wordpress?

Question

N!crO @n1croo

Front-end developer

Как правильно написать или подключить js файл в wordpress?

Есть js файл для работы с определёнными DOM элементами, но когда переходишь на другую страницу сайта, и этих элементов там нет, то скрипт падает. Как правильно написать или подключить скрипт?

Вопрос задан более трёх лет назад
255 просмотров

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

Комментировать

Пригласить эксперта

Ответы на вопрос 1

13 комментариев

N!crO @n1croo Автор вопроса

Есть js файл для работы с определёнными DOM элементами, но когда переходишь на другую страницу сайта, и этих элементов там нет, то скрипт падает.

Написано более трёх лет назад
Дан @Qleager
header.php
<!DOCTYPE html> <html lang="ru"> <head> <?php wp_head(); ?> </head> <body id="#body" <?php body_class(); ?>>

footer.php
<?php wp_footer(); ?> </body> </html>

Твоя страница / index.php / single.php / category.php
<?php get_header(); ?> ... <?php get_footer(); ?>

Рекомендованная документацией WP структура темы
Написано более трёх лет назад
tyzberd @tyzberd

напишите проверку на существование елементов

Написано более трёх лет назад
Игорь Воротнёв @HeadOnFire

N!crO, что значит "падает"?

Написано более трёх лет назад
N!crO @n1croo Автор вопроса

Игорь Воротнёв, прописан поиск дива и сохранение его в переменную, но когда переходишь на другую страницу, то там того дива нет, и соответственно дальше скрипт перестает работать.

Написано более трёх лет назад
Игорь Воротнёв @HeadOnFire

N!crO, ну так оберните ваше "дальше" в проверку и запускайте только если поиск дива вернул ожидаемый результат, а не undefined. WordPress то тут при чем вообще?

Написано более трёх лет назад
N!crO @n1croo Автор вопроса

Игорь Воротнёв, я так понял, нужно написать условие проверки класса у body, и в него засунуть код с выполнением кода для главной страницы

Написано более трёх лет назад
Игорь Воротнёв @HeadOnFire

N!crO, ну, это конечно вариант, хотя грубый. Покажите ваш js, так быстрее решим

Написано более трёх лет назад

N!crO @n1croo Автор вопроса

Игорь Воротнёв,

if (document.body.classList.contains('home')) {
	var slides = document.querySelectorAll('.slider-item');
	var sliderToggles = document.querySelectorAll('.slider-toggle');
	var currentSlide = 0;
	var slideInterval = setInterval(nextSlide, 2500);
 
	function nextSlide() {
		sliderToggles[currentSlide].classList.remove('slider-toggle--active');
	  slides[currentSlide].classList.remove('active');
	  currentSlide = (currentSlide+1)%slides.length;
	  sliderToggles[currentSlide].classList.add('slider-toggle--active');
	  slides[currentSlide].classList.add('active');
	}
}

Подскажите как лучше реализовать проверку.

Написано более трёх лет назад

Игорь Воротнёв @HeadOnFire

N!crO,

var slides = document.querySelectorAll('.slider-item');
var sliderToggles = document.querySelectorAll('.slider-toggle');
var currentSlide = 0;

if ( slides.length > 0 ) {
    var slideInterval = setInterval(nextSlide, 2500);
}

function nextSlide() {
    sliderToggles[currentSlide].classList.remove('slider-toggle--active');
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide+1)%slides.length;
    sliderToggles[currentSlide].classList.add('slider-toggle--active');
    slides[currentSlide].classList.add('active');
}

Написано более трёх лет назад

N!crO @n1croo Автор вопроса

Игорь Воротнёв, спасибо за помощь)

Написано более трёх лет назад
N!crO @n1croo Автор вопроса

Игорь Воротнёв, слайдер для новичка нормальный?

Написано более трёх лет назад
Игорь Воротнёв @HeadOnFire

N!crO,
спасибо за помощь)

На здоровье) Скинул решение отдельным ответом с комментарием, можете отметить.

слайдер для новичка нормальный?

Слайды крутит? Значит нормальный :)

В целом большой респект и плюс в карму за ванильку а не всякие эти jQuery.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 18 часов назад
- 91 просмотр
1

ответ
WordPress

Средний
Откуда могут появляться {{ после слэша в адресе страниц?
- 1 подписчик
- вчера
- 56 просмотров
3

ответа
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 85 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 1344 просмотра
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 55 просмотров
0

ответов
WordPress

Средний
Сайт в мобильной версии съезжает влево?
- 1 подписчик
- 20 дек.
- 67 просмотров
1

ответ
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
WordPress

+1 ещё

Средний
Wordpress — Какой плагин использовать для объектного кэша?
- 2 подписчика
- 20 дек.
- 138 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 99 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 212 просмотров
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Придумать альтернативный логотип к уже существующему

23 дек. 2024, в 07:27

1000 руб./за проект

3д сцены

23 дек. 2024, в 04:30

10000 руб./за проект

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Answer 1 · 2018-02-05 19:52:45

из обсуждения:

var slides = document.querySelectorAll('.slider-item');
var sliderToggles = document.querySelectorAll('.slider-toggle');
var currentSlide = 0;

if ( slides.length > 0 ) {
    var slideInterval = setInterval(nextSlide, 2500);
}

function nextSlide() {
    sliderToggles[currentSlide].classList.remove('slider-toggle--active');
    slides[currentSlide].classList.remove('active');
    currentSlide = (currentSlide+1)%slides.length;
    sliderToggles[currentSlide].classList.add('slider-toggle--active');
    slides[currentSlide].classList.add('active');
}

Проблема была в том, что слайдер запускался без проверки есть ли вообще слайды. Соответственно, если на других страницах их не было, то все ломалось.

Answer 2 · 2018-02-05 17:03:05

functions.php

function mytheme_scripts_styles() {
  
  wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
  wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/scripts.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );

Подключает style.css и scripts.js в папке темы

<?php wp_footer(); ?>
Обязательно прописать перед закрывающим тегом body, стандартно он в footer.php. Отвечает за вывод скриптов

<?php wp_head(); ?>
Это перед закрывающим head. Отвечает за вывод стилей

Как правильно написать или подключить js файл в wordpress?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт