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

Question

N!crO @n1croo

Front-end developer

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

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

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

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

Подписаться 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 ещё

Простой
Почему шрифт в JS prompt() белого цвета?
- 1 подписчик
- 2 часа назад
- 33 просмотра
2

ответа
JavaScript

Простой
Выдает ошибку, сам файл не нулл(а ошибка выдается там где подключается жс), как исправить?
- 1 подписчик
- 4 часа назад
- 40 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 4 часа назад
- 124 просмотра
0

ответов
JavaScript

Простой
Какой фреймворк использовать для форм JS?
- 1 подписчик
- 4 часа назад
- 46 просмотров
0

ответов
JavaScript

Простой
Почему change срабатывает раньше чем click?
- 1 подписчик
- 5 часов назад
- 60 просмотров
1

ответ
WordPress

Простой
Как отложить recaptcha v3 для contact form 7?
- 1 подписчик
- 6 часов назад
- 12 просмотров
0

ответов
WordPress

+1 ещё

Средний
Парсинг сайта на wordpress?
- 1 подписчик
- 9 часов назад
- 56 просмотров
2

ответа
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 11 часов назад
- 20 просмотров
0

ответов
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 99 просмотров
0

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

Мэтч

от 80 000 ₽

Разработать формирование УПД на Java

20 апр. 2024, в 00:28

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

Написать программу иммитирующую поведение человека для выбора услуг

20 апр. 2024, в 00:08

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

Разработать мобильное приложение android "справочник студента"

20 апр. 2024, в 00:01

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

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?

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

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

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