Как загрузить скрипты / стили, специфичные для страницы

8

Я знаю, что по умолчанию процесс загрузки Wordpress, сначала functions.phpвызывается, после этого идет вся тема. Но в настоящее время я собираюсь полностью изменить мою тему, чтобы оптимизировать ее. Моя идея состоит в том, чтобы иметь один базовый файл CSS для общих свойств, нормализации, цветов. Или сохранить один файл CSS, но в этом случае мне нужно жестко переключить регистр functions.php, чтобы определить страницу. И еще один специфический для каждой страницы, потому что не имеет смысла загружать огромный файл стилей CSS со всеми определенными стилями.

Итак, мой вопрос, что является лучшим местом для загрузки конкретного скрипта / стиля?

Должен ли это быть header-xxx.phpили другой файл? Может быть, есть способ реализовать эту идею более масштабируемым и элегантным способом?

Буду благодарен за любую помощь.

CROSP
источник

Ответы:

9

Все зависит от масштаба ваших настроек и того, как вы будете организовывать свои вещи. Но есть 2 основных способа сделать это. functions.php и файлы шаблонов

Мне нравится делать это, регистрируя все мои скрипты / стили в functions.php, чтобы я знал, с чем буду работать, но ставлю в очередь только то, что мне нужно, когда мне это нужно.

Вы можете поставить в очередь все свои вещи условно в файле functions.php ( if( is_page( 'blah') { //... enqueue stuff }) или использовать файлы шаблонов для стилизации определенных категорий / тегов / публикаций / страниц и т. Д.

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

Но, безусловно, если вы хотите разбить вашу таблицу стилей на более мелкие файлы, вам нужно будет использовать

Та же логика применима к сценарию с соответствующими функциями регистрации / постановки в очередь.

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

Есть еще одна вещь, которую вы можете сделать, чтобы ускорить загрузку страницы. Если вы скажете браузеру кэшировать ваши таблицы стилей, то, возможно, 1 (или несколько) будет иметь больше шансов на загрузку из кэша, чем если у вас есть несколько файлов по всему сайту, и их всегда нужно извлекать с сервера, потому что это запрос нового файла на каждой новой загруженной странице. Так что имейте это в виду.

Независимо от этого, кэширование 1 или многих ресурсов является хорошим подходом и увеличит восприимчивость вашего сайта с точки зрения скорости сайта.

Если вам нужно больше рекомендаций о том, как использовать эти функции, просто дайте нам знать.

РЕДАКТИРОВАТЬ

Основными причинами регистрации скриптов являются следующие

  • Упрощает вызов скрипта / стиля, когда он нам нужен
  • Позволяет использовать зарегистрированный скрипт / стиль в качестве зависимости для файла, который нам нужно загрузить.
  • Не позволяйте себе писать один и тот же код больше, чем нужно, эффективно упрощая наш код
  • Больше вещей, о которых я сейчас не думаю

НОТА

Зарегистрированный сценарий / стиль не нужно ставить в очередь, если он указан как $depsфайл, который вы сейчас ставите в очередь.

Пример (не обязательно, как вы должны это сделать, но чтобы вы понимали цель)

Я зарегистрировался

  • общий style.css
  • navigation.css
  • buttons.css

Теперь эти стили зарегистрированы, поэтому, если я зайду на определенную страницу и захочу применить другой стиль. Я ставлю в очередь на эту страницу (либо условным оператором в functions.php или в моем шаблоне страницы), specific-style.cssвот так.

add_action( 'wp_enqueue_scripts', 'my_specific_style' );
function my_specific_style(){
  wp_enqueue_style( 'specific-style', get_stylesheet_directory_uri() . '/path/to/specific-style.css', array( 'common-style', 'navigation', 'button') );
}

Обратите внимание, что массив in wp_enqueue_style- это массив дескрипторов уже зарегистрированных стилей. WP будет удобно загружать все 4 файла в правильном порядке для соблюдения зависимости.

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

Т.е. keys.css зависит от navigation.css, который зависит от common-style.css

Если я регистрируюсь с учетом этой логики, мне нужно только поставить в очередь specific-style.css с кнопками button.css в качестве зависимости, и WP будет последовательно загружать цепочку, чтобы соответствовать порядку.

bynicolas
источник
Спасибо за отличный ответ, не повлияет ли это на производительность, если я добавлю wp-register-style/scriptскрипты / стили для всех своих страниц в functions.php? Каковы преимущества регистрации всех стилей и ставить их в очередь только при необходимости?
CROSP
2
Обычно нет, вы не увидите проблем с производительностью, даже рекомендуется делать это таким образом . Я
обновлю
1
ответ обновлен!
bynicolas
4

« рефакторинг », « оптимизировать », « масштабируемый », « элегантный ». Большие проблемы! Вы на правильном пути. Однако разбиение файла CSS на несколько не является решением этих проблем. Вот почему:

Браузеры кешируют CSS-файлы. Поэтому после загрузки первой страницы браузер не будет запрашивать тот же файл CSS для следующей страницы. Да, загрузка первой страницы будет немного незаметно медленнее. Но остальные страницы выиграют от этого.

Меньшее количество запросов - один из важнейших способов оптимизации скорости сайта. (см. Стив Соудерс или эту статью ).

Дальнейшая оптимизация заключается в минимизации вашего CSS. (см. сообщение Google PageSpeed .) Спасибо @bynicolas за предложение.

Конечно, вы можете сказать, но как насчет элегантности ? Вот хорошие новости: Sass и LESS . Они позволяют писать меньше кода, разбивать его на несколько файлов, скомпилированных в один файл CSS, и многое другое.

zendka
источник
PS: у меня действительно была та же идея несколько лет назад: почему бы не разбить большой CSS-файл на CSS-файлы меньшего размера для конкретной страницы? Это выглядело как очевидная оптимизация, пока один из моих коллег не объяснил мне, почему это на самом деле замедлит работу сайта.
Зендка
3
Отличный ответ, я немного говорил об этом в своем ответе, но вы хорошо это выразили. Сначала это может быть не интуитивно понятно, но тот факт, что все кешируется, на самом деле сделает все быстрее. Я бы добавил, что минимизация одного большего CSS-файла была бы даже более выгодной, чем загрузка нескольких меньших
bynicolas
хороший момент по минимизации!
Зендка
Спасибо, может быть, я описал свою идею немного размыто, но я собираюсь иметь максимум два CSS-файла, первый - common.cssвторой, а конкретный - для каждой страницы.
CROSP
3

Вы, конечно, могли бы сделать условие, чтобы проверить, на какой странице кто-то находится, и поставить в очередь конкретную таблицу стилей для каждой страницы, но вам может быть лучше ориентировать страницу на CSS.

В вашем файле header.php убедитесь, что body_classфункция находится в теге body, например так:

<body <?php body_class(); ?>>

Это вставит классы в тег body, который вы можете использовать для настройки определенных функций страницы.

Например, если я хочу, чтобы H1 на одной конкретной странице был красным, я мог бы сделать:

body.page-id-12 h1 {
    color: #ff0000;
}

Таким образом, на странице с идентификатором 12 будет применяться этот стиль.

Чтобы настроить таргетинг на конкретный шаблон страницы, вы можете сделать:

body.page-template-template-about h1 {
    color: #ff0000;
}

Это будет нацеливать на страницы с примененным шаблоном "about". Просто посмотрите на классы в теге body на странице, которую вы хотите стилизовать.

Однако, если вы все еще хотите поставить в очередь конкретную таблицу стилей для конкретной страницы, вы можете сделать это:

function na35_enqueue_styles() {
    if ( is_page( 12 ) ) {
        wp_enqueue_style( 'page-12-styles', get_template_directory_uri() . '/css/page-12.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'na35_enqueue_styles' );
Нейт Аллен
источник
Я думаю, что ваш ответ не хватает смысла. ОП хочет знать, как загрузить определенный стиль на определенной странице. не как добавить класс CSS на страницу.
bynicolas
Я добавил информацию о том, как ставить таблицу стилей на определенную страницу, но смысл функции body_class в том, что вам не нужно делать это таким образом.
Нейт Аллен
1
Я понимаю , что и это прекрасно , во многих случаях, но ОП хотел НЕ загружать 1 большую таблицу стилей для всех его сайта. Таким образом, ваше решение не будет применяться здесь
bynicolas
1
Я проголосовал за ваш ответ, потому что это действительно относится к вопросу лучше. Я оставлю здесь свой ответ на случай, если кто-то посчитает его полезным.
Нейт Аллен
1
@KhushbuVaghelaif ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}
Нейт Аллен,