Вопрос или проблема
У меня есть дочерняя тема и довольно пустой файл function.php. CSS из родительской темы воспринимается дочерней темой, но весь JS раздел из родительской темы не отображается в DOM вообще. (Я новичок в разработке WP). Я что-то упустил? Что я делаю не так?
Вот моя основная структура файлов дочерней темы:
/themes
/main-theme
/main-theme-child
/js
custom_script.js
functions.php
screenshot.png
style.css
Я создал дочернюю тему с помощью плагина (Child Theme Configurator)
functions.php
<?php
// Выход, если accessed напрямую
if ( !defined( 'ABSPATH' ) ) exit;
// НАЧАЛО ДОБАВЛЕНИЯ CSS ДЕЙСТВИЯ РОДИТЕЛЯ
// АВТОГЕНЕРИРОВАНО - Не изменяйте и не удаляйте метки комментариев выше или ниже:
if ( !function_exists( 'chld_thm_cfg_locale_css' ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . '/rtl.css' ) )
$uri = get_template_directory_uri() . '/rtl.css';
return $uri;
}
endif;
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome','flaticon','animate','hover','owl-theme','jquery-ui','fancybox' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// КОНЕЦ ДОБАВЛЕНИЯ CSS ДЕЙСТВИЯ РОДИТЕЛЯ
function custom_enqueue_scripts() {
wp_enqueue_script( 'consultox-main-script', get_stylesheet_directory_uri().'/js/custom_script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
- Как я могу заставить все основные функции родительской темы работать?
- Как я могу загрузить мой пользовательский javascript?
Если вам нужно больше информации, я отредактирую этот пост.
Заранее большое спасибо!
Функция get_template_directory_uri всегда возвращает директорию РОДИТЕЛЬСКОЙ ТЕМЫ, даже если вы находитесь в дочерней теме, в то время как функция get_stylesheet_directory_uri() возвращает директорию вашей дочерней темы.
Я предполагаю, что ваши скрипты подключаются в родительской теме с использованием метода “get_stylesheet_directory_uri“, что означает, что javascript не будет найден в дочерней теме.
Я бы предложил изменить ВСЕ enqueue в родительской И дочерней (но не в основном style css) на использование get_theme_file_uri(file) таким образом:
function custom_enqueue_scripts() {
wp_enqueue_script( 'consultox-main-script', get_theme_file_uri('/js/custom_script.js'), array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' );
get_theme_file_uri работает, находя файл в текущей теме, и если он его не находит, ищет файл в родительской теме (если она есть). Таким образом, корректные стили и скрипты загружаются в вашу родительскую И дочернюю тему 😉
Удачного кодирования!
Ответ или решение
Чтобы понять, почему JavaScript из родительской и дочерней темы не загружается, важно рассмотреть несколько ключевых моментов, связанных с системой работы тем в WordPress.
Форум (Facts):
Понимание структуры тем в WordPress и порядка загрузки файлов включает в себя знания о функциях, таких как get_template_directory_uri() и get_stylesheet_directory_uri(). Они различаются в том, что первая возвращает ссылку на каталог родительской темы, а вторая — на каталог дочерней темы. Вы зарегистрировали дочернюю тему через плагин Child Theme Configurator, и в вашем файле functions.php лишь минимальные изменения, что может быть причиной неочевидных ошибок.
Основные проблемы (Obstacles):
-
Загрузка JavaScript из родительской темы: Скорее всего, проблема состоит в неверной функции для формирования URI, используемой для основных скриптов. Если в родительской теме используется
get_stylesheet_directory_uri()для загрузки скриптов, дочерняя тема не сможет их найти. -
Подключение собственного JavaScript: Ваш файл
custom_script.jsиз дочерней темы может не загружаться из-за ошибки в пути или из-за неправильной последовательности подключений.
Решение (Encouragement):
Чтобы все заработало правильно, следуйте этим рекомендациям:
-
Используйте
get_theme_file_uri: Замените функцииget_template_directory_uri()иget_stylesheet_directory_uri()в обоих темах наget_theme_file_uri(). Это гарантирует, что поиск файлов будет происходить сначала в дочерней теме, а если файл не найден, в родительской.function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', get_theme_file_uri('style.css'), array( 'bootstrap','font-awesome','flaticon','animate','hover','owl-theme','jquery-ui','fancybox' ) ); } add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); function custom_enqueue_scripts() { wp_enqueue_script( 'consultox-main-script', get_theme_file_uri('/js/custom_script.js'), array(), false, true ); } add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts' ); -
Проверка правильности подключения скриптов: Убедитесь, что используемые имена скриптов или их зависимости корректны и загружаются в правильном порядке.
-
Дебаггинг и Логи: Рекомендуется использовать консоль браузера для выявления возможных ошибок JavaScript, которые могут блокировать дальнейшее выполнение скриптов.
Результаты (Simple):
Применяя эти советы, вы обеспечите полное соответствие всех загружаемых скриптов и стилей в вашем проекте. Это позволит корректно использовать функционал как родительской, так и дочерней темы без неожиданных сбоев.
Переход (Transition):
Как только проблема с загрузкой JavaScript решена, вы можете сосредоточиться на дальнейшей разработке и тестировании функционала. Уверенное владение WordPress и понимание элементов его работы позволит эффективнее развивать ваш проект.
Удачной работы с кодом! Если у вас возникнут дополнительные вопросы, не стесняйтесь их задавать.