Ставьте в очередь, регистрируйте и загружайте CSS и JavaScript с помощью Wordpress

Я новичок в WordPress, в WordPress есть способ загрузить файл JS/CSS на определенную страницу при вызове страницы, а не загружать его на другую?

Как убрать количество товаров в категории WooCommerce
Как убрать количество товаров в категории WooCommerce
По умолчанию WooCommerce показывает количество товаров рядом с категорией, как показано ниже.
3
0
1 918
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете добавить оператор if к вашему <head> в header.php.

<?php if (is_page($id)) { ?>
#css or js here
<?php } ?>

Замените $id идентификатором или ярлыком страницы, на которую вы хотите загрузить <script> или <style>.

Ответ принят как подходящий

Загрузка scripts и stylesheet из файла function.php — лучший способ работы с Wordpress.

Добавление скриптов и стилей в WordPress — довольно простой процесс. По сути, вы создадите функцию, которая поставит в очередь все ваши скрипты и стили.

Источник @ https://developer.wordpress.org/themes/basics/включая-css-javascript/

В Wordpress вы можете зарегистрировать script и stylesheet, прежде чем поставить их в очередь. Мы используем несколько очень удобных функций, называемых wp_register_script / wp_register_style для scripts и wp_enqueue_script / wp_enqueue_style для stylesheet. Вы должны обратить внимание и прочитать об аргументах функций

Вместе с некоторыми условными тегами и функциями мы в конечном итоге создаем действительно сложное поведение для условной регистрации и постановки в очередь scripts и stylesheet в нашей теме и на страницах. Вы должны обратить внимание и прочитать об аргументах функций.

Условные теги можно использовать в файлах шаблонов для изменения того, что отображается контент и как этот контент отображается на конкретном страницу в зависимости от того, каким условиям соответствует эта страница.

Источник @https://codex.wordpress.org/Conditional_Tags

Например, is_home(), is_search(), is_single() или is_page()... можно использовать для условной регистрации и постановки в очередь scripts и stylesheet на наших разных страницах.

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    */
    wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    wp_enqueue_script( 'jquery_js' );
  };
}; ?>

В этом примере мы хотим поставить в очередь наш jquery-3.5.1.min.js, только если мы находимся на странице, отличной от страницы администратора, используя if ( ! is_admin() )....


Регистрация, постановка в очередь и CDN

script и stylesheet могут размещаться локально или на другом сервере (например, CDN). При использовании CDN мы хотим убедиться, что источник доступен. Мы можем использовать @fopen();, чтобы убедиться, что CDN доступен, а если нет, использовать запасной вариант:

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    *
    * Check if CDN's url is valid, if not return fallback
    * @link https://www.php.net/manual/en/function.fopen.php
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if ( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
    } else {
      wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    };
    wp_enqueue_script( 'jquery_js' );
  };
}; ?>

Добавление атрибутов (например, Crossorigin, Integrity)

Иногда требуется добавить атрибуты к тегам script и stylesheet, чтобы правильно поставить их в очередь. Используя хук script_loader_tag или style_loader_tag, мы можем сделать это:

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue jquery_js
    * @link https://developer.wordpress.org/reference/functions/wp_register_script/
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    *
    * Check if CDN's url is valid, if not return fallback
    * @link https://www.php.net/manual/en/function.fopen.php
    *
    * Add rel='preload' <link> and required attributes to jquery_js
    * Filters the HTML link tag of an enqueued style & add required attributes
    * @link https://developer.wordpress.org/reference/hooks/script_loader_tag/
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if ( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', true );
    } else {
      wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true );
    };
    wp_enqueue_script( 'jquery_js' );

    add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
    function data_jquery_js( $tag, $handle, $src ) {
      if ( $handle === 'jquery_js' ) {
        $integrity = 'sha256...';
        $tag = str_replace(
          array(
            "<script",
            "></script>",
          ),
          array(
            "<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
            "integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
          ),
          $tag
        );
      };
      return $tag;
    };
  };
}; ?>

Здесь мы добавляем тег ссылки preload, атрибут crossorigin, integrity и async.


Всегда регистрироваться?

Если вам не нужно регистрировать script или stylesheet перед тем, как поставить его в очередь, вы можете его игнорировать. например:

wp_enqueue_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'assets/js/jquery-3.5.1.min.js', array(), '3.5.1', true  );

Здесь мы не регистрируем наш скрипт и сразу переходим к очереди.


jQuery уже является частью ядра Wordpress?

В Wordpress jQuery обычно предварительно зарегистрирован и поставляется с ядром. Если вы хотите поставить в очередь свою собственную версию, вы ДОЛЖНЫ отменить регистрацию основной версии jQuery.

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Deregister Wordpress jquery core version
    * @link https://developer.wordpress.org/reference/functions/wp_deregister_script/
    */
    wp_deregister_script( 'jquery' );

    //...here goes the rest of your function...
  };
}; ?>

Поставьте в очередь и зарегистрируйте script или stylesheet на стороне администратора

Используя хук действия admin_enqueue_scripts, вы можете сделать именно это.

<?php
do_action( 'admin_enqueue_scripts', 'admin_scripts' );
function admin_scripts() {
  //...here goes the rest of your function...
}; ?>

Узнать больше

Другие вопросы по теме