Вопрос или проблема
Я читал много вопросов и ответов здесь на Stack Overflow…(и в других местах, но это не считается…лол)
Я думаю, я следую правилам WP.org, но скрипты все равно не загружаются.
Сценарий:
Кастомный шаблон для поста на PHP:
<?php
/*
* Template Name: YYY
* Description: Форма для пожертвования YYY.
* БЕЗ НИЖНЕГО КОЛОНКИ
*/
get_header(); ?>
<div id="content-yyy">
файл темы functions.php
function donate_adding_scripts() {
wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1');
wp_enqueue_script('donateParsleyJs');
wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js');
wp_enqueue_script('donateParsleyHeJs');
wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1', true);
wp_enqueue_script('donateJs');
}
function donate_adding_styles() {
wp_register_script('donateStyle', get_template_directory_uri() . '/donateStyle.css');
wp_enqueue_script('donateStyle');
}
function loadDonateScripts() {
if (is_single()) {
global $post;
if($post->ID=="8436"){ // только для поста с ID = 8436
add_action( 'wp_enqueue_scripts', 'donate_adding_scripts' );
add_action( 'wp_enqueue_scripts', 'donate_adding_styles' );
}
}
}
add_action( 'wp_enqueue_scripts', 'loadDonateScripts');
Поскольку я использую setLocal для parsleyjs, у меня есть
<script type="text/javascript">
window.ParsleyValidator.setLocale('he');
</script>
У меня несколько проблем:
- добавление в functions.php не загружает CSS
- JS-скрипты загружаются только если я добавлю
$in_footer=true
в файл functions.php иget_footer();
в php шаблон - При этом я хочу загружать их только для конкретного кастомного поста (ID=8436), следовательно
function loadDonateScripts()
Я хочу, чтобы скрипты загружались (очевидно…дух), желательно в нижней части страницы…
Есть идеи??
Что если вы полностью уберете функцию loadDonateScripts
и просто добавите условие перед подключением скриптов следующим образом:
function donate_adding_scripts() {
if (is_single()) {
global $post;
if($post->ID=="8436"){ // только для поста с ID = 8436
wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1');
wp_enqueue_script('donateParsleyJs');
wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js');
wp_enqueue_script('donateParsleyHeJs');
wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1', true);
wp_enqueue_script('donateJs');
}
}
}
function donate_adding_styles() {
if (is_single()) {
global $post;
if($post->ID=="8436"){ // только для поста с ID = 8436
wp_register_script('donateStyle', get_template_directory_uri() . '/donateStyle.css');
wp_enqueue_script('donateStyle');
}
}
}
add_action( 'wp_enqueue_scripts', 'donate_adding_scripts');
add_action( 'wp_enqueue_scripts', 'donate_adding_styles');
Для всех, кто пытается запустить кастомные скрипты из functions.php, вот как:
- WP v4.1.2
- Пост является кастомным шаблонным постом
- Мне нужно было загрузить 3 JS – parsleyjs.js, he.js (i18n), custom_JsScript.js
- Я также хотел, чтобы CSS был в отдельном файле
-
Загружать эти только для конкретного поста
function donate_adding_scripts() { if (is_singular()) { global $post; if($post->ID=='8436'){ // только для поста с ID = 8436 wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js'); wp_enqueue_script('donateParsleyHeJs'); wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1'); wp_enqueue_script('donateParsleyJs'); wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1'); wp_enqueue_script('donateJs'); } } } function donate_adding_styles() { if (is_singular()) { global $post; if($post->ID=='8436'){ // только для поста с ID = 8436 wp_register_style('donateStyle', get_template_directory_uri() . '/donateStyle.css'); wp_enqueue_style('donateStyle'); } } } add_action( 'wp_enqueue_scripts', 'donate_adding_scripts' ); add_action( 'wp_enqueue_scripts', 'donate_adding_styles' );
ВНИМАНИЕ: (после тщательной проверки других вариантов)
-
это работает только с
is_singular()
– !is_single()
-
условие
if($post->ID=='34')
работает только внутри этих функций & не так, как я пытался сделать сначала внутриfunction loadDonateScripts()
-
стили требуют
wp_register_style
&wp_enqueue_style
– НЕwp_enqueue_script
&wp_register_script
, как упоминают некоторые посты!!! -
add_action
должен быть вызван в функциях, добавляющих сами скрипты, а НЕ в функции, которая их вызывает (например,function loadDonateScripts()
) -
использование
get_template_directory_uri()
при регистрации скриптов работает нормально как для JS, так и для CSS, при условии, что у вас правильный путь
Если вам нужно проверить пути, настройте кастомный пост:
<?php
/*
* Template Name: GetPath
* Description: проверка текущего пути темы.
*/
global $post;
print_r($post->ID);
print_r('<br />');
print_r( get_stylesheet_directory_uri());
print_r('<br />');
print_r( get_template_directory_uri());
Создайте новую страницу с Page Template - GetPath
в режиме предварительного просмотра и просто откройте ее в браузере:
http://ВАШ_САЙТ_АДРЕС/?page_id=####&preview=true
Вы получите:
#### *(номер ID поста)
http://ВАШ_САЙТ_АДРЕС/wp-content/themes/ИМЯ_ПАПКИ_ВАШЕЙ_ТЕМЫ
http://ВАШ_САЙТ_АДРЕС/wp-content/themes/ИМЯ_ПАПКИ_ВАШЕЙ_ТЕМЫ
Ответ или решение
Как правильно подключить скрипты и стили для определённого поста в WordPress
При создании тем в WordPress могут возникать ситуации, когда необходимо подключать определённые JavaScript и CSS файлы только для конкретного поста. Это может быть полезно для улучшения производительности и упрощения кода. Направим внимание на вашу задачу и разберёмся, как правильно это реализовать.
1. Настройка функции подключения скриптов и стилей
Вы можете следовать приведённым ниже шагам для корректного подключения нужных файлов. Для начала в файл functions.php
вашей темы добавьте следующие функции:
function donate_adding_scripts() {
if (is_singular('post')) {
global $post;
if ($post->ID == 8436) { // Только для поста с ID = 8436
wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'), '1.11.1', true);
wp_enqueue_script('donateParsleyJs');
wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js', array(), null, true);
wp_enqueue_script('donateParsleyHeJs');
wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'), '1.11.1', true);
wp_enqueue_script('donateJs');
}
}
}
function donate_adding_styles() {
if (is_singular('post')) {
global $post;
if ($post->ID == 8436) { // Только для поста с ID = 8436
wp_register_style('donateStyle', get_template_directory_uri() . '/donateStyle.css');
wp_enqueue_style('donateStyle');
}
}
}
add_action('wp_enqueue_scripts', 'donate_adding_scripts');
add_action('wp_enqueue_scripts', 'donate_adding_styles');
2. Примечания по коду
-
is_singular(‘post’): Этот условный тег проверяет, является ли текущая страница одиночным элементом заданного типа. В вашем случае вы используете
post
, но это можно изменить, если у вас разные типы записей. -
get_template_directory_uri(): Эта функция возвращает URL к директории вашей активной темы, что позволяет динамически загружать файлы.
-
$post->ID: Используется для проверки конкретного поста на основании его идентификатора.
3. Загрузка скриптов в подвале
Чтобы гарантировать, что скрипты загружаются в подвале страницы (footer), убедитесь, что последний аргумент в функциях wp_register_script
установлен в true
. Это важно для оптимизации загрузки страницы, так как скрипты будут загружаться после загруженного контента.
4. Проблемы с подключением стилей
Отдельно обратите внимание на разницу между регистрированием и подключением файлов стилей. Для CSS-файлов следует использовать wp_register_style
и wp_enqueue_style
, что вы уже правильно учли в коде.
5. Тестирование и отладка
Если скрипты или стили по-прежнему не загружаются, вам стоит:
- Убедиться, что пути к файлам заданны правильно. Возможно, потребуется создать страницу для проверки, как вы делали раньше, используя код, который вы уже предоставили, чтобы видеть ID поста и пути к ресурсам.
- Проверьте консоль разработчика в вашем браузере на наличие ошибок JavaScript, которые могут мешать загрузке скриптов.
Заключение
Если следовать представленным шагам и советам, подключение скриптов и стилей только для определённого поста должно работать без проблем. Эта схема упрощает управление ресурсами на сайте и гарантирует, что каждый посетитель получает только необходимые скрипты и стили, улучшая тем самым общую производительность сайта.