Подключение стилей wp enqueue style для определенных шаблонов страниц

8 авг. 2012 г., 22:20:46
Просмотры: 74.9K
Голосов: 37

Я в процессе разработки темы и хотел бы добавить целевые страницы, используя шаблоны страниц (page-templates). Я нигде не могу найти информацию о том, как подключить стили или js для определенных шаблонов страниц. Есть предложения? Например, Целевая страница 1 - landing-page-template-one.php будет нуждаться в совершенно других стилях и js, чем блог или главная страница.

0
Все ответы на вопрос 8
0
40

Если вы планируете много работать с разработкой для WordPress, сохраните эту страницу в закладки: http://codex.wordpress.org/Conditional_Tags

Другой ответ работает, но условие зависит от слага вашей страницы (myurl.com/eto-slug), который может измениться. Более надежный метод (по моему мнению) и подходящий для этого случая — использовать проверку условия is_page_template('example-template.php').

9 авг. 2012 г. 00:01:09
3
30

Вы можете использовать условный оператор is_page( 'landing-page-template-one' ) вокруг ваших специфичных для страницы стилей / скриптов в рамках общих объявлений enqueue.

function my_enqueue_stuff() {
  if ( is_page( 'landing-page-template-one' ) ) {
    /** Вызов enqueue для landing-page-template-one */
  } else {
    /** Вызов обычного enqueue */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Вы даже можете добавить дополнительные условия elseif в приведённый выше код для других страниц и т.д.

Ссылка: Справочник функций - is_page()

8 авг. 2012 г. 22:34:39
Комментарии

Пожалуйста, Шон, рад помочь.

Edward Caissie Edward Caissie
15 авг. 2012 г. 22:27:16

Я считаю, что использование is_page_template() предпочтительнее, так как slug страницы может быть легко изменен. Данное решение, хотя и работает, перестанет функционировать, если slug будет изменен. Если у кого-то возникнут проблемы в будущем, обратитесь к решению kchjr.

BODA82 BODA82
15 нояб. 2015 г. 00:46:53

Спасибо! Для тех, кто наткнулся на это: условный оператор is_page должен находиться в функции, прикрепленной к действию, а не оборачивать сам оператор add_action. Если обернуть add_action в условный оператор, это будет слишком рано в процессе обработки страницы, чтобы определить, какая это страница.

Hendeca Hendeca
25 мая 2016 г. 06:32:18
1

Если шаблон страницы находится в поддиректории темы (начиная с версии WP 3.4), добавьте перед именем файла шаблона название папки и слеш, например:

is_page_template( 'templates/about.php' );

Таким образом, вся функция будет выглядеть так:

function my_enqueue_stuff() {
  if ( is_page_template( 'landing-page-template-one' ) ) {
    /** Вызов очереди для landing-page-template-one */
  } else {
    /** Вызов стандартной очереди */
  }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Ссылка: Официальная документация

21 окт. 2018 г. 07:58:20
Комментарии

Спасибо, что обратили внимание, что проверка is_page_template () должна быть внутри функции enqueue, а не вокруг неё.

gregn3 gregn3
1 июл. 2019 г. 21:48:16
2

Я не знаю, работали ли решения, предложенные в других ответах, но (поскольку нет принятого ответа!) похоже, что в данный момент правильный ответ следующий:

function my_enqueue_stuff() {
    if ( get_page_template_slug() == 'landing-page-template-one.php' ) {
        wp_enqueue_script('my-script-handle', 'script-path.js', ... );
    }
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );

Функция is_page_template() работает только вне цикла, согласно https://developer.wordpress.org/reference/functions/is_page_template/.

22 дек. 2016 г. 15:08:15
Комментарии

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

Selrond Selrond
20 февр. 2017 г. 15:02:03

вне цикла. это то, что я сказал...смущённо

richplane richplane
21 февр. 2017 г. 15:58:56
0

Предположим, ваша тема называется temper, и вы хотите загрузить Bootstrap на эту страницу. Вы можете подключить стили для конкретных шаблонов страниц следующим образом:

Перейдите в файл function.php и добавьте условие, как показано ниже:

function temper_scripts() {

    if(basename(get_page_template()) == 'temper.php'){

       wp_enqueue_style('bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');

    }

}

add_action('wp_enqueue_scripts', 'temper_scripts');
22 мая 2019 г. 13:40:13
0

Этот код работает идеально.

      function my_enqueue_stuff() {

 // "page-templates/about.php" - это путь к файлу шаблона. Если ваш файл шаблона находится в корневой папке темы, тогда используйте просто "about.php".

        if(is_page_template( 'page-templates/about.php' ))
        {
            wp_enqueue_script( 'lightgallery-js', get_template_directory_uri() . '/js/lightgallery-all.min.js');
            wp_enqueue_script('raventours-picturefill', "https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js", true, null);
        }
        }
        add_action( 'wp_enqueue_scripts', 'my_enqueue_stuff' );
14 февр. 2020 г. 08:05:22
0

Попробуйте это

 if(is_page_template(array( 'custom-template/about.php') )) 
    {            
        wp_enqueue_style('about-css', get_template_directory_uri() . '/assets/css/about.css', array(), time(), 'all');
    } 
26 апр. 2022 г. 08:27:10
0
function enqueue_my_script() {
    if ( is_page_template( 'my-page-template.php' ) ) {
        wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_script' );

В этом примере функция enqueue_my_script подключена к действию wp_enqueue_scripts, которое вызывается WordPress при загрузке скриптов и таблиц стилей.

Функция использует is_page_template для проверки, использует ли текущая страница определённый шаблон (в данном случае 'my-page-template.php'). Если условие истинно, вызывается функция wp_enqueue_script для добавления скрипта 'my-script'.

Функция wp_enqueue_script принимает следующие аргументы:

'my-script': Это уникальный идентификатор (handle) скрипта, который используется для ссылки на скрипт при его регистрации.

get_template_directory_uri() . '/js/my-script.js': Это URL-адрес файла JavaScript.

array( 'jquery' ): Указывает, что скрипт зависит от jQuery, что означает, что он должен загружаться после скрипта jQuery.

'1.0': Это номер версии скрипта.

true: Указывает, что скрипт должен загружаться в подвале (footer) HTML-документа.

Вы можете использовать другие условные теги, такие как is_home, is_front_page, is_single, и `


8 янв. 2023 г. 09:08:05