it-roy-ru.com

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

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

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

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

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

7
CROSP

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

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

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

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

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

Та же логика применима к сценарию с соответствующими функциями register/enqueue

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

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

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

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

т.е. buttons.css зависит от navigation.css зависит от common-style.css

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

8
bynicolas

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

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

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

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

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

3
zendka

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