Стилизация шаблонов в WordPress

В любом шаблоне файл 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 спецификации

<!--&#91;if IE 6&#93;>
<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>
<!&#91;endif&#93;-->

Подключение множественных файлов

<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

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

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

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

13.02.2014 Wordpress admin 1818 0