Как правильно написать или подключить 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.

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

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

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

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

WordPress

Средний
Как в Elementor создать шаблоны для Custom Post Type?
- 1 подписчик
- вчера
- 13 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 136 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 158 просмотров
5

ответов
WordPress

Простой
Если это то покажи это, а если нет, то вот это, как в Wordpress?
- 1 подписчик
- вчера
- 60 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 48 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
WordPress

+1 ещё

Простой
Локализация страницы в вордпресс, как исправить?
- 1 подписчик
- 20 нояб.
- 37 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Сделать верстку двух страниц из фигмы

22 нояб. 2024, в 09:58

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

Доделать проект

22 нояб. 2024, в 09:57

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

Написать продающую и сео-оптимизированную структура для сайта

22 нояб. 2024, в 09:42

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

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?

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

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

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