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

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

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

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

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

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

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

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

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

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

• wp_register_style
• wp_enqueue_style

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

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

Есть еще одна вещь, которую вы можете сделать, чтобы ускорить загрузку страницы. Если вы скажете браузеру кэшировать ваши таблицы стилей, то, возможно, 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 будет последовательно загружать цепочку, чтобы соответствовать порядку.

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

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

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

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

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

Вы, конечно, могли бы сделать условие, чтобы проверить, на какой странице кто-то находится, и поставить в очередь конкретную таблицу стилей для каждой страницы, но вам может быть лучше ориентировать страницу на 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' );