Почему не работают скрипты из внешнего файла?

Question

[Max Rudik]

Добрый вечер!
Переношу верстку на вордпресс (в первый раз) и происходит что-то странное с js - скриптами. В верстке все работало, а при переносе в шаблон вордпресс - один скрипт работает, другой нет, при том, что они абсолютно одинаковые, управляют модальными окнами. Плагинов там никаких нет, ошибка подключения исключается, т.к. кое-что все же работает.
Решается проблема помещением js-скриптов прямо на страницу шаблона php, но не думаю, что так задумано) Кто-нибудь сталкивался с подобным?
В консоли - ошибка 404 - не загружаются файлы css. Вот код подключения стилей и скриптов, повторюсь, часть скриптов и бОльшая стилей работает.
Что проверить, куда посмотреть?

function load_style_fg(){
	
	wp_enqueue_style('vendor_style', get_template_directory_uri().'/assets/css/foundation.css');
	wp_enqueue_style('custom_style', get_template_directory_uri().'/assets/css/app.css');
}
add_action('wp_enqueue_scripts', 'load_style_fg');

function load_script_fg(){
	wp_enqueue_script('my_vendor_js', get_template_directory_uri().'/assets/js/foundation.js');
	wp_enqueue_script('my_custom_js', get_template_directory_uri().'/assets/js/app.js');
	
}
add_action('wp_enqueue_scripts', 'load_script_fg');

Comments

[Евгений Вольф]

Решается проблема помещением js-скриптов прямо на страницу шаблона php, но не думаю, что так задумано) Кто-нибудь сталкивался с подобным?

В консоли ошибок нет?

Вторая проблема - очень тяжело доходят обновления стилей и разметки, постоянно приходится чистить кэш браузера. Это нормально, или с этим можно как-то бороться?

Посмотрите заголовки сервера в ответе, возможно браузер кэширует всё это дело. Что бы победить такое поведение, добавляйте к адресу скрипта ?v=10, например так:
<script src="/js/script.js?v=10"></script>, где v=10 - условная версия скрипта. Можно вместо этого выводить например, дату (timestamp) из php. Тогда скрипт не будет кэшироваться. Или, просто отключите кэширование в браузере или на сервере.

[Max Rudik]

В консоли ошибка 404 - не найден css, выше привел код подключения стилей, и вдвойне непонятно, если там что-то не так, почему большая часть стилей работает?

[Игорь Воротнёв]

Евгений Вольф: WP дописывает cache busting сам, по умолчанию - свою версию. Что в данном случае не помогает, конечно же. Поэтому этим параметром можно управлять в функции wp_enqueue_style/wp_enqueue_script - четвертый из пяти аргумент вызова функции - версия файла.

[Евгений Вольф]

Игорь Воротнёв: тогда я думаю, вот такой вариант подойдёт.

[Игорь Воротнёв]

Евгений Вольф: Да, именно для таких целей он там и есть. Впрочем, можно на дев-сервере решить проще:

wp_enqueue_style('vendor_style', get_template_directory_uri().'/assets/css/foundation.css', array(), date('U'), true );
wp_enqueue_style('custom_style', get_template_directory_uri().'/assets/css/app.css', array(), date('U'), true );

Как я уже говорил, четвертый параметр вызова данной функции - это как раз то, что будет передано в параметр script.js?v=X

Answer 1

[Иван Козлов]

Скину скрипт, который я обычно пишу для подключения

add_action('wp_print_styles', 'add_my_stylesheet');

function add_my_stylesheet() {
    $path = get_bloginfo('template_directory') . "/"; //Получаю url к папке с темой
    wp_register_style('themeStyle', $path . 'style.css');//Регистрирую таблицу
    wp_enqueue_style('themeStyle');//включаю
}

add_action('wp_enqueue_scripts', 'add_my_scripts');

function add_my_scripts() {
    $path = get_bloginfo('template_directory') . "/";//Получаю url к папке с темой
    if (!is_admin()) {//если не в админке
        wp_deregister_script('jquery');//Убираем вывод jquery, rкоторый идет с WP
        wp_register_script('jquery', ($path . "js/jquery-1.11.3.min.js"), false, '1.11.3');//Регистрируем свой jquery
        wp_enqueue_script('jquery');//Включаем его
    }
    wp_register_script('commonJS', ($path . "js/common.js"), array('jquery'));//Регистрируем свой скрипт, и указываем что для него необходим скрипт jquery
    wp_enqueue_script('commonJS');//Включаем скрипт
    wp_localize_script('commonJS', 'myajax', array(//Это способ передачи php значение в js.Т.е. перед выводом commonJs создадутся js переменные.
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('myajax-nonce'),
            )
    );
}

У тебя не хватает wp_register_style и wp_enqueue_script перед включением таблицы и скриптов. Скорее всего дело в этом. Следующий момент может быть что нужно стандартный jquery заменить на свой.

Comments

[Игорь Воротнёв]

1. wp_print_styles не стоит использовать для enqueue уже 5 лет как, с версии 3.3 это чревато конфликтами. https://make.wordpress.org/core/2011/12/12/use-wp_...
2.

wp_register_style('themeStyle', $path . 'style.css');

- wp_register_style необходимо вызывать в хуке wp_enqueue_scripts, иначе могут возникать проблемы - https://core.trac.wordpress.org/ticket/17916
3. $path = get_bloginfo('template_directory') . "/" - зачем такая конструкция? get_template_directory_uri() создана специально для этого.
4. wp_deregister_script('jquery'); - сколько переговорено на эту тему... Вы экономите на спичках, а конфликты у других плагинов с этим бывают. Иногда грузится 2 версии сразу - и родная, и ваша. Иногда плагины просто не видят вашу. Сейчас уже все реже такое происходит, но это есть. Смысл замены jQuery?
5. "У тебя не хватает wp_register_style" - в этом нет необходимости, wp_enqueue_* регистрирует сам, см. документацию и код функции. "Registers the style if source provided (does NOT overwrite) and enqueues."

Это краткий code review без вникания в детали. Вердикт - сильно устаревший подход, применяемый без оглядки на корректное использование API ядра к месту и по сути, с потенциальными гарантированными проблемными местами.

Кроме того, использование одной и той же nonce через 'nonce' => wp_create_nonce('myajax-nonce'), является опасным решением с точки зрения безопасности. Пока оно используется в реальности для 1-2 вызовов каких-то похожих, типа подгрузки постов при скролле - проблемы не будет. Как только функционал растет, и действия на аякс-хуках выполняют разные вещи и требуют разных прав, использование одной nonce может быть опасным.

[Max Rudik]

Для меня это значит, что у меня все было подключено правильно, при этом есть ошибка в консоли joxi.ru/l2ZL36DTj7dwrJ и есть проблемы с частью (!) стилей и скриптов. Непонятно даже, в какую сторону дальше копать.

[Иван Козлов]

Игорь Воротнёв: Разумные замечания. Буду их придерживаться. Использование переменной $path просто делает для меня код более читабельным и проще управлять из одного места. wp_create_nonce('myajax-nonce') просто как пример использован, что можно создавать.

[Игорь Воротнёв]

Иван Козлов: Для вас делает более читабельным - возможно. Начнете работать с другими разработчиками над одним и тем же проектом хотя бы среднего размера - и вас все будут проклинать, потому что есть стандартное API, а вы его переопределяете в свою переменную, которая всем остальным будет непривычна (и ее использование будем им непонятно). Управлять из одного места? Так get_template_directory_uri тоже одно место. И ее значение всегда одинаковое.

[Иван Козлов]

Игорь Воротнёв: если перейти в машинный код, то получение значения из переменной менее трудозатратно по количеству команд, чем из функции, если даже она возвращает статику. Вообще считаю что если вызывается много раз одна и та же функция в коде и она возвращает одно и то же значение, то оптимальнее один раз вызов функции сохранить в переменной. Переменные для этого и нужны. Но это правило распространяется только на 1 файл или на 1 метод, функцию в зависимости от количества и сложности кода - что бы не искать где эта переменная получает значение.

[Игорь Воротнёв]

Иван Козлов: Если говорить про машинный код, то это нано-оптимизация, от которой толку ноль. Прогоните через профайлер и посмотрите узкие места. Упомянутый вами "путь дзен" - это совершенно ненужная якобы оптимизация. А вот удобство и гибкость она рубит на корню, ибо в функции есть хук, а в вашей переменной его нет. Значит, значение, возвращаемое функцией я могу фильтровать при определенных условиях, а вашу переменную - только перезаписывать. Грубо и неэффективно. Я уж молчу о том, что у переменной должен быть контекст и любой сторонний разработчик должен сразу понять что эта переменная означает, где она определяется, какое значение содержит, в каком виде / формате, и не перезаписывает ли ее случайно код из другого места...

Answer 2

[Денис Янчевский]

В консоли - ошибка 404 - не загружаются файлы css.

Ошибка 404 говорит о том, что файл по указанному пути не найден. Смотрите путь, который выводится в html и сравнивайте с тем, что есть на самом деле.

Если у скриптов есть зависимость от jQuery, то стоит это указать:

wp_enqueue_script('my_vendor_js', get_template_directory_uri().'/assets/js/foundation.js', array('jquery'));
wp_enqueue_script('my_custom_js', get_template_directory_uri().'/assets/js/app.js', array('jquery', 'my_vendor_js'));