Как увеличить ширину сайта на WordPress (от 960 grid к 1140 grid)

По-умолчанию ширина многих сайтов и блогов на WordPress равна 960 пикс. Но в наше время даже мобильные устройства имеют гораздо большую ширину экрана, а на мониторах компьютеров и ноутбуков такие сайты выглядят несколько старомодно и очень узко. В данной статье я расскажу о том, как за 5 минут увеличить ширину сайта до 1140 пикс.

960 Grid System и WordPress

Ширина в 960 пикселей — не случайна. Дело в том, что верстка многих шаблоны сайтов WordPress использует так называемую 960 Grid разметку, основанную на колоночном дизайне.

Суть ее такова: поле делится на 24 равных по ширине колонки с одинаковыми отступами слева и справа. Основной контейнер сайта имеет ширину в 24 колонки, шапка сайта обычно поделена на две части равной ширины (шириной по 12 колонок), одна из которых содержит логотип. Остальные блоки сайта, такие как сайдбар, контейнер для основной информации, — могут иметь разную ширину, кратную ширине одной колонки макета. Но в любом случае суммарная ширина всех блоков сайта по горизонтали равна 24 колонкам. Все это наглядно можно увидеть на иллюстрации ниже.

wordpress-960-grid-system

WordPress 960 gs разметка

Технически все это осуществляется с помощью стилей CSS. Практически каждый шаблон содержит файл screen.css в папке /css вашего шаблона. Вот пример кода из этого файла:

.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
.span-6 {width:230px;}
.span-7 {width:270px;}
.span-8 {width:310px;}
.span-9 {width:350px;}
.span-10 {width:390px;}
.span-11 {width:430px;}
.span-12 {width:470px;}
.span-13 {width:510px;}
.span-14 {width:550px;}
.span-15 {width:590px;}
.span-16 {width:630px;}
.span-17 {width:670px;}
.span-18 {width:710px;}
.span-19 {width:750px;}
.span-20 {width:790px;}
.span-21 {width:830px;}
.span-22 {width:870px;}
.span-23 {width:910px;}
.span-24, div.span-24 {width:950px;margin:0;}

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

Например:

span-24 — основные контейнеры, распространяющиеся на всю ширину;

span-13 — блок основной информации;

span-11 — сайдбар (боковая панель) и т.п.

Посмотреть разметку своего сайта можно с помощью Google Chrome — контекстное меню «Просмотр кода элемента», через Opera — «Проинспектировать элемент», а также через Firefox.

Разметка 960gs на WP-сайте (просмотр кода элемента в Google Chrome)

Разметка 960gs на WP-сайте (просмотр кода элемента в Google Chrome)

Увеличиваем ширину сайта с помощью 1140 Gris System

Мы разобрались с механизмом колоночной разметки. Теперь о том, как увеличить ширину сайта. Мы будем использовать библиотеку под названием 1140 Grid System. Скачиваем необходимые файлы вот отсюда: http://www.1140px.com/ (кнопка Download вверху страницы).

В архиве содержится три файла: 1140.css — основной файл стилей, css3-mediaqueries.js — для поддержки более старых браузеров и файл примеров examples.html. Нам нужны первые два. Распаковываем файлы соответственно в папки /css и /js вашего шаблона. В админ-панели переходим в меню Внешний вид -> Настройка темы (Ваша_тема). Добавляем скрипты в шапку:

<link rel="stylesheet" href="http://ваш_сайт.ru/wp-content/themes/ваша_тема/css/1140.css" type="text/css">

<script src="http://ваш_сайт.ru/wp-content/themes/ваша_тема/js/css3-mediaqueries.js" type="text/javascript"></script>

Теперь о том, как интегрировать систему на сайт. 1140 Grid поддерживает два типа разметки — 12-колоночный и 16-колоночный. Лично я выбрал последний, так как он дает больше возможностей для трехколоночного дизайна сайта (контент + два сайдбара). Визуально выбрать для Вашего сайта нужную разметку помогут вот эти изображения:

12-колоночный макет

Примеры 12-колоночной разметки сайта

Примеры 12-колоночной разметки сайта

16-колоночный макет

Примеры 16-колоночной разметки сайта

Примеры 16-колоночной разметки сайта

Когда Вы определились с нужным макетом, переходим в редактор (Внешний вид -> Редактор) и действуем следующим образом. Прежде всего, редактируем файл стилей — выставляем значение ширины для класса .container1140px. Далее в файлах шаблона для блока с классом container добавляем класс выбранной разметки: container12 — для 12-колоночной и container16 — для 16 колоночной. В нашем случае это 16-колоночный дизайн:

<div id="container">

Теперь мы инспектируем нужные нам блоки в Google Chrome или других браузерах и узнаем их класс. Далее смотрим на изображения разметки (см. выше) выше и назначаем каждому блоку соответствующий класс — column1, column2, column3 … column16, в зависимости от ширины блока.

К примеру, смотрим исходный код файла шаблона «Заголовок» (привожу в пример только интересующую нас часть кода, опуская все ненужное) :

<div id="wrapper">

<div id="container" class="container">
<div class="span-24">
<div id="pagemenucontainer">
<!-- код верхнего меню -->
</div>
</div>

<div id="header" class="span-24">
<div class="span-12">
<!-- код логотипа -->
</div>

<div class="span-12 last" style="padding-top: 12px; text-align:right;">
<!-- код для рекламы -->
</div>
</div>

<div class="span-24">

<div id="navcontainer">
<!-- код меню сайта -->
</div>
</div>

В приведенном примере мы видим код основного контейнера (<div id=»container» class=»container»>). Назначаем ему класс container16. Далее — блок верхнего меню с классом span-24. Заменяем класс на column16. Шапку (header) тоже выставляем по всей ширине, добавив класс column16. Этот блок также содержит два вложенных блока — логотип и место для рекламы с одинаковыми классами: span-12. Заменяем классы на column8 и еще добавляем для первого блока класс alpha, а для второго — omega. Alpha отменяет у блока отступ слева, а omega — отступ справа. Т.е. первым блокам в одной строке мы обязательно назначаем класс alpha, а последним — omega. Отредактированный код будет выглядеть так:

<div id="wrapper">

<div id="container" class="container container16">
<div class="column16">
<div id="pagemenucontainer">
<!-- код верхнего меню -->
</div>
</div>

<div id="header" class="column16">
<div class="column8 alpha">
<!-- код логотипа -->
</div>

<div class="column8 omega" style="padding-top: 12px; text-align:right;">
<!-- код для рекламы -->
</div>
</div>

<div class="column16">

<div id="navcontainer">
<!-- код меню сайта -->
</div>
</div>

Таким же образом изменяем другие файлы шаблона.

Если Вы хотите, чтобы основное содержание сайта (левая и правая граница текста) не имело отступов по 10 пикселей слева и справа (по отношению к шапке, подвалу сайта) — заходим в файл 1140.css и изменяем значение ширины для классов .container12 .container16 — выставляем ширину в 1120 пикселей:

width: 1120px.

То же самое делаем для класса .container в файле стилей шаблона. Вот, собственно и все… Пример подобной разметки — этот сайт.

Понравилась запись? Ставь лайк!
Loading more content...