Все зависит от масштаба ваших настроек и того, как вы будете организовывать свои вещи. Но есть 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 будет последовательно загружать цепочку, чтобы соответствовать порядку.
wp-register-style/script
скрипты / стили для всех своих страниц в functions.php? Каковы преимущества регистрации всех стилей и ставить их в очередь только при необходимости?« рефакторинг », « оптимизировать », « масштабируемый », « элегантный ». Большие проблемы! Вы на правильном пути. Однако разбиение файла CSS на несколько не является решением этих проблем. Вот почему:
Браузеры кешируют CSS-файлы. Поэтому после загрузки первой страницы браузер не будет запрашивать тот же файл CSS для следующей страницы. Да, загрузка первой страницы будет немного незаметно медленнее. Но остальные страницы выиграют от этого.
Меньшее количество запросов - один из важнейших способов оптимизации скорости сайта. (см. Стив Соудерс или эту статью ).
Дальнейшая оптимизация заключается в минимизации вашего CSS. (см. сообщение Google PageSpeed .) Спасибо @bynicolas за предложение.
Конечно, вы можете сказать, но как насчет элегантности ? Вот хорошие новости: Sass и LESS . Они позволяют писать меньше кода, разбивать его на несколько файлов, скомпилированных в один файл CSS, и многое другое.
источник
common.css
второй, а конкретный - для каждой страницы.Вы, конечно, могли бы сделать условие, чтобы проверить, на какой странице кто-то находится, и поставить в очередь конкретную таблицу стилей для каждой страницы, но вам может быть лучше ориентировать страницу на CSS.
В вашем файле header.php убедитесь, что
body_class
функция находится в теге body, например так:Это вставит классы в тег body, который вы можете использовать для настройки определенных функций страницы.
Например, если я хочу, чтобы H1 на одной конкретной странице был красным, я мог бы сделать:
Таким образом, на странице с идентификатором 12 будет применяться этот стиль.
Чтобы настроить таргетинг на конкретный шаблон страницы, вы можете сделать:
Это будет нацеливать на страницы с примененным шаблоном "about". Просто посмотрите на классы в теге body на странице, которую вы хотите стилизовать.
Однако, если вы все еще хотите поставить в очередь конкретную таблицу стилей для конкретной страницы, вы можете сделать это:
источник
if ( is_page( 'careers' ) || is_page( 'portfolio' ) ) {}