пользовательская запись с загружаемым скриптом для каждой отдельной записи

Вопрос или проблема

Я читал много вопросов и ответов здесь на 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>

У меня несколько проблем:

  1. добавление в functions.php не загружает CSS
  2. JS-скрипты загружаются только если я добавлю $in_footer=true в файл functions.php и get_footer(); в php шаблон
  3. При этом я хочу загружать их только для конкретного кастомного поста (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, которые могут мешать загрузке скриптов.

Заключение

Если следовать представленным шагам и советам, подключение скриптов и стилей только для определённого поста должно работать без проблем. Эта схема упрощает управление ресурсами на сайте и гарантирует, что каждый посетитель получает только необходимые скрипты и стили, улучшая тем самым общую производительность сайта.

Оцените материал
Добавить комментарий

Капча загружается...