В любом шаблоне файл style.css обязателен. Фактически, Вордпресс не опознает шаблон как шаблон, если в нем в папке не будет обнаружен этот файл. Он там должен быть обязательно, но вам не обязательно использовать его. И даже не обязательно вызывать этот файл в шапке шаблона. Просто он должен быть в папке и все тут. Но в большинстве случаев этот файл таки используется.
Различные способы подключения файла стилей
Не очень динамичный способ
<link rel="stylesheet" href="/wp-content/themes/Your-Theme/style.css" type="text/css" media="screen, projection" />
Супер-точный способ
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
Динамичный способ
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/ css" media="screen, projection" />
В стиле IE спецификации
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href= "<?php bloginfo('stylesheet_directory'); ?>/ css/style-ie6.css" /> <script type='text/javascript' src='<?php bloginfo('template_url'); ?>/js/DD_belatedPNG_0.0.8a- min.js'></script> <![endif]-->
Подключение множественных файлов
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/ css" media="screen, projection" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/forms.css" type="text/ css" media="screen, projection" />
@import
Достаточно распространенная техника динамического вызова файлов стилей, путем их подключения к основному. Используется, например, для вставки типовых блоков стиля вместо дописывания их в основной файл
@import "style/css/reset.css"; @import "style/css/typography.css"; @import "style/css/layout.css";
Условное подключение дополнительных файлов
<?php if (is_page_template("page-snippet.php")){ ?> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ? /css/snippets.css" /> <?php } ?>
Сбрасывать или не сбрасывать?
Раз уж мы подняли тему стилей и CSS, не лишним будет заострить внимание на одной важной теме, известной как сброс стилей. «Теория Ресета» заключается в том, что удаляются различные настройки стилей по умолчанию, применяемые к элементом правилами браузеров, т.к. эти стили по умолчанию могут быть несколько непредсказуемыми и у каждого браузера свои.
Например, отступы по умолчанию в Firefox отличаются от отступов в Internet Explorer. А к некоторым элементам в разных браузерах могут быть такие правила, которых совершенно нет в других. Поэтому сброс стилей выполняется для того, чтобы устранить эти различия и начать с чистого листа. Если затем нам понадобятся какие-либо свои стили, мы их применим в соответствии с потребностями и с учетом кросс-браузерности (одинакового отображения стилей сайта во всех браузерах).
Популярные CSS Reset
- Eric Meyer’s Reset Reloaded https://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- YUI (Yahoo User Interface) Reset CSS https://yuilibrary.com/
- Star Selector Reset * { margin: 0; padding: 0; }
Полное собрание сбрасывателей стилей можно посмотреть тут https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/
Сбрасывание стилей не обязательно для Вордпресс, но общепринято для всех сайтов. В контексте правильного подключения это будет выглядеть вот так
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" type="text/css" media="screen, projection" />
Обратите внимание, что сброс стилей производится до подключения основных стилей. Также применительно к своему сайту или стилям можно использовать онлайн инструмент сброса стилей https://cssresetr.com/
Базовая оптимизация CSS
И теперь после того, как мы показали вам, как подключать стили в шаблон, мы скажем вам, что это не самый лучший способ. Ха! Не расслабляйтесь.
Проблема подключения сброса стилей не в том, что он делает, а в том, как это сделано. Это отдельный файл, а значит это еще один запрос, который браузер должен обработать и еще один файл, который должен быть загружен. Чем больше запросов выполняется на странице, тем медленнее она загружается и выполняется.
Если вы помешаны на скорости загрузки сайта, вы, возможно, захотите включить содержимое сбрасывателя в ваш основной css файл. В этом случае это будет идеально, т.к. сброс будет загружен на все страницы вашего сайта. Но что делать, если разные стили загружаются в зависимости от разных условий? Или для разных страниц стили отличаются — для главной и для записи. Поэтому не всегда объединение всех стилей в один файл имеет смысл.
Снижение количества css файлов – не единственный путь оптимизации, можно применять технику уменьшения самих размеров файлов. В процессе написания стилей, мы их пишем так, чтобы нам было понятно что, где, как и зачем, плюс многие места сопровождаются комментариями и пояснениями. Но все эти пробелы, отступы, табуляции, переносы и комментарии добавляют веса файлу, заставляя посетителей загружать файл большего размера.
Красиво отформатированный файл удобен вам, но не браузеру и не посетителям. Поэтому нет важной причины хранить такой файл, особенно, когда разработка шаблона завершена и больше частые правки и переделки не планируются. Можно использовать онлайн-утилиту типа https://www.cssoptimiser.com для удаления всего ненужного из файла. Конечно, после такой очистки он превратится в трудно читаемый набор стилей, но никто не запрещает сохранить оригинальную копию для себя. При необходимости вносите в него правки и снова сохраняете на сайте сжатую версию.
Вот пример того, как может выглядеть сжатый css файл
#mainNav{position:absolute;bottom:8px;left:0;width:780px;list-style:none;z-index:100}#mainNav li{display:inline}#mainNav li a{-webkit-transition:opacity .15s ease-in-out;display:block ;float:left;width:144px;height:50px;background:url(images/nav.png) no-repeat;text-indent:- 9999px;margin:0 10px 0 0;opacity:0.5;filter:alpha(opacity=50)}#mainNav li.forums a{background:- 144px 0}#mainNav li.videos a{background:-288px 0}#mainNav li.downloads a{background:-432px 0}#mainNav li.snippets a{background:-576px 0}
Не очень читаемо? Зато на 43% меньше, чем оригинальный файл.