Как правильно подключить стили css

wp_enqueue_style() – подключение стилей CSS

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head> , либо в футере сайта.

Если хотите узнать больше про правильное подключение CSS стилей WordPress, то могу порекомендовать вам мой видеоурок.

Стили выводятся в футере (перед </body> ) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

Параметры функции wp_enqueue_style()

Почему CSS не подключается к HTML?

Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег <link rel="stylesheet". перед закрывающим тегом </head> ?

Итак, вот почему – если вы подключите CSS напрямую в HTML, то с ним уже ничего нельзя будет сделать, по сути он будет захардкоден в вашей теме WordPress. Его нельзя будет отключить, плагины оптимизации не смогут его сжать или объединить с другими CSS-файлами, невозможно будет поменять порядок подключения с другими стилями.

Пример 1. Как подключить стили

Стили также можно подключать через хуки wp_enqueue_scripts (сайт) и admin_enqueue_scripts (админка WordPress).

Теперь сделаем так, чтобы файл подключался только в админке:

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще.

Подробнее про кэширование и параметр $ver

Хотел бы чуть подробнее рассказать про варианты использования параметра $ver .

  • По умолчанию параметр принимает значение false , при этом значении параметра в качестве версии ?ver= файла стилей будет использоваться текущая версия WordPress, поэтому я бы не рекомендовал оставлять это значение параметра.
  • Мы можем полностью отказаться от этого query string, если укажем значение параметра null , тогда ?ver= не будет добавляться в конце URL файла стилей.
  • Я иногда использую time() на своих тестовых сайтах, т.к. этот параметр возвращает текущее значение текущего UNIX-времени в секунду и значит, каждую секунду значение другое. Но это вариант для ленивых и только для тестовых сайтов, потому что полностью скипается любое кэширование.
  • Лучший вариант – filemtime() , которая позволяет получить значение UNIX-времени последнего обновления файла! Пример ниже.

Также можете почитать подробнее про функции get_stylesheet_directory_uri() и get_stylesheet_directory(), потому что у них есть одно принципиально важное отличие.

Если хотите узнать больше про правильное подключение стилей в WordPress, то могу порекомендовать вам мой видеоурок.

Пример 2. CSS для отдельной страницы

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

Скажу вам, что такое бывает нужно не очень часто, только в том случае, если одна единственная определённая страница сайта содержит огромное количество стилей, которые не используются где-либо ещё.

Например вы хотите подключить отдельный файл для страницы контактов:

Пример 3. CSS специально для настроек плагина

В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.

Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Подключение таблиц стилей

Существует три основных способа подключения CSS, которые мы сейчас и рассмотрим по порядку.

Как я уже говорил раньше, css призван оформлять html конструкции, то есть придавать им вид, цвет, размер, расположение, и так далее, а значит непосредственно воздействовать на html код.

Для обеспечения этого воздействия, выполняется подключение css к html документу.

Первый способ подключения css &#8212; cвязанные стили . Применяется тогда, когда таблица стилей пишется в отдельном файле.

В этом случае, файл style.css с таблицей стилей, подключается к html файлу в теге head, при помощи тега link

link &#8212; это одиночный тег;

href – знакомый нам атрибут ссылок, css/stile.css – значение указывающее путь к файлу, и название файла;

type – атрибут указывающий тип подключаемого элемента, в нашем случае это text/css ;

rel – атрибут определяющий взаимосвязь, и в значении его обычно пишется stylesheet (таблицы стилей);

В этом коде обычно меняется только значение style.css (название подключаемой таблицы). Таблицы подключены.

Теперь браузер будет отображать html файл в том виде, который для него будет прописан в файле style.css .

Кстати, на будущее. К одному html файлу можно подключать сколько угодно таблиц стилей. Все они подключаются в тег head .

И, что применяется гораздо чаще, наоборот, одну таблицу можно подключить к множеству html файлов.

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

А так же, если придётся изменять стиль нескольких однотипных элементов, то гораздо легче будет это сделать если они собраны в одном групповом селекторе.

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

Дело в том, что одной из задач веб-мастера является уменьшение объёма кода, при неизменном конечном результате, и отдельный файл style.css наиболее полно отвечает этому требованию.

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

В файле style.css можно будет задать стили один раз, но для всех заголовков постов сайта.

Теперь понимаете разницу?

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

Второй способ подключения css- глобальные стили позволяет подключать(располагать) таблицу стилей непосредственно в html файле.

Делается это при помощи тега style , и прописывается он так-же, как и в первом случае в теге head .

Как видите, таблица стилей расположена прямо в html файле. Всё это работает так-же, как и при первом способе подключения, но применяется реже, из за громоздкости, и главное, из-за невозможности воздействия стилей на несколько файлов.

Когда его применять? Я, например использую этот способ при создании дизайна в редакторе файлов.

Гораздо проще отлаживать документ, если и html и css находятся на одной странице и можно быстро подправить и то, и другое.

Третий способ подключения css &#8212; внутренние стили позволяет прописывать стили прямо внутри html тега.

Реализуется он при помощи атрибута style , который не стоит путать с одноимённым тегом.

Применяется он тогда, когда нужно оформить только один элемент контента.

Для примера возьмём кусочек текста, и зададим ему стили, заключив в тег span

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

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

Ведь браузеру определившему их в файле style.css , и зайдя потом на страницу, придётся до определять или переопределять оформление некоторых элементов.


Перемена

&#8212; Вчера долго пыталась объяснить бабуле, что работаю программистом&#8230;
Короче, сошлись на том, что чиню телевизоры и развожу мышей&#8230;

Подключение собственных стилей CSS в шаблон сайта Joomla

Разобравшись, как подключить HTML-заголовки шаблона сайта в Joomla с помощью <jdoc:include type="head"/> , возникает вопрос: «Как подключить собственные CSS стили в шаблон сайта?» Для этого нужно воспользоваться классом JHtml , который в том числе может помочь решить и этот вопрос. Ниже в этой статье рассмотрим то, как включить собственные CSS стили в шаблон сайта так, чтобы они попали в заголовок HTML-документа в контейнер <head> .

Подключение собственных стилей CSS из папки шаблона сайта в Joomla

Самым очевидным способом будет вручную прописать путь до сайта в контейнер <head> файла index.php шаблона:

Подключив таким образом CSS стили шаблона, всё начнёт работать и стили подключатся, однако если сервер выставляет время хранения кэша в браузере пользователя, при обновлении стилей, придётся менять название файла или связываться с пользователем для того, чтобы он почистил кэш браузера. Морока ещё та, и есть решение, которое позволяет решить эту задачу средствами Joomla.

Для этого нужно подключать собственные CSS-стили шаблона используя класс JHtml и выглядит это следующим образом:

Использование класса JHtml Joomla для подключения собственных стилей CSS из папки шаблона сайта

Рассмотрим подробнее, какие именно аргументы передаются классу JHtml и что в итоге получается.

Вставлять конструкцию подключения собственных стилей CSS можно в любом месте шаблона в файле index.php , но лучше это делать до или сразу после использования конструкции <jdoc:include type="head"/> , так как это наиболее логичное место, где в первую очередь придёт в голову искать данное подключение.

Итак, после вставки приведённого выше кода на выходе в HTML-документе получим такой результат, который позволит использовать собственные стили шаблона:

Соотнеся результат с введённым в шаблон кодом, можно выявить следующие закономерности:

  • аргумент ‘stylesheet’ преобразуется в аргумент HTML-тега <link> — rel="stylesheet"
  • аргумент ‘template.css’ преобразуется в аргумент HTML-тега <link> — href=". " с правильным относительным путём до файла
  • аргументы массива:
  • ‘version’ => ‘auto’ преобразуется в случайное число, которое служит меткой для определения версии css-файла, и при обновлении шаблона, браузер запросит новую версию стилей у сервера автоматически
  • ‘relative’ => ‘true’ особо не на что не влияет

Выводы

Таким образом, воспользовавшись встроенным в Joomla классом JHtml можно без труда вставлять собственные CSS-файлы со стилями шаблона. Они автоматически подключаются в шаблон и встают в правильное место в вёрстке HTML-документа. При этом, если использовать расширение Joomla для того, чтобы убрать лишние пробельные символы из CSS файлов, наверняка эта операция применится и к собственным файлам с CSS-стилями.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *