Как сделать адаптиванный шаблон для WordPress
Сегодня адаптивный дизайн нужен практически каждому сайту, так как все большее число пользователей предпочитает серфить по интернету при помощи планшетов и мобильных телефонов. Поисковые системы Google и Яндекс также обращают внимание на то, как быстро загружается и как выглядит сайт на портативных устройствах. Не адаптированный web-ресурс, дизайн которого не помещается на небольшой экран гаджета, может быть запросто понижен в мобильной (а иногда и основной) выдаче. Поэтому лучше не лениться, а сделать адаптивный дизайн для своего сайта.
В данной статье мы рассмотрим создание адаптивного шаблона для WordPress. К преимуществам описанного метода верстки относится его легкость и SEO-оптимизированность. Данный дизайн используется и на сайте SEO-PRAKTIKA.COM.
В статье Как сделать мобильную версию сайта? мы уже рассматривали самый простой способ адаптировать сайт для мобильников практически без внесения изменений в шаблон. Однако такой путь подходит далеко не всем.
Создаем адаптированный шаблон
Самый простой способ сделать адаптированный дизайн для WordPress и любого другого движка – это создание шаблона из одной колонки, ширина которой определяется в процентах. В этом случае сайт будет состоять из трех последовательно идущих друг за другом DIV-ов, расположенных сверху («шапка»), в середине («основной контент») и внизу экрана («футер»).
Однако такой способ верстки подходит далеко не всем, так как он имеет массу недостатков, главный из которых – невозможность разместить в сайдбаре (который попросту отсутствует, лол) рекламные блоки и прочую служебную информацию. Поэтому мы будем делать шаблон для WordPress, состоящий из двух колонок.
Код шаблона будет состоять из основных четырех блоков (DIV) – один в «шапке» сайта (header), второй – для основного контента (conternt), третий – для сайдбара (sidebar) и четвертый (footer) – для футера. Основная сложность состоит в том, чтобы при открытии на мобильных устройствах с маленькими экранами сайдбар не отнимал место у основного контента, делая его прочтение невозможным, а съезжал вниз, под него.
Поместим на страницу DIV, который будет служить контейнером для всего остального контента. В его свойствах пропишем:
#container
{
max-width: 1200px;
margin: 0 auto;
position: relative;
}
Здесь мы указали максимальную ширину, на которую может разворачиваться содержимое сайта, а также поместили его по центру экрана.
Добавляем внутрь «контейнера» остальные блоки. В итоге у вас должно получиться следующее:
<div id="container"> <div id="header"></div> <div id="content"></div> <div id="sidebar"></div> <div id="clear"></div> <div id="footer"></div> </div>
Блок clear необходим для того, чтобы прижать футер к низу.
В файле CSS пропишем
#header
{
width:100%; //«шапка» занимает всю ширину экрана; больше 1200 пикселей она не займет, так как блок header помещен внутри DIV container с max-width 1200px.
height:90px; //высота равна 90 пикселям
}
#content
{
float: left; //обтекание по левому краю
width:75%; //ширина блока
}
#sidebar
{
float: right; // обтекаем блок content справа
width:25%; // ширина
}
#clear{ // блок, необходимый для прижатия «футера» к низу
clear: both; //запрет обтекания справа и слева; запрет блокам content и sidebar обтекать блок справа и слева
float: none; // запрет обтекания
height: 10px;
}
#footer
{
position: absolute; //абсолютное позиционирование
bottom: 0; //расстояние снизу равно нулю
left: 0; // расстояние слева равно нулю
width: 100%; // как и header занимает всю ширину экрана
height: 80px; // высота
}
Итак, верстка «дивами» выполнена, однако остался еще одна проблема. При просмотре на маленьких экранах мобильных устройств, содержащий не особо важную информацию блок sidebar будет отнимать место основного контента. Это очень неудобно для пользователей: читать итак приходится на небольшом дисплее, так еще и основной контент занимает не весь экран. А инструмент от Google PageSpeed Insights найдет в мобильной версии сайта множество ошибок.
Поэтому добавляем вниз файла CSS
@media screen and (max-width: 600px) {
#content
{
width:100%;
}
#sidebar
{
width:100%;
}
Таким образом, при ширине устройства менее 600 пикселей блоки content и sidebar будут размещаться другом за другом, занимая 100% от ширины экрана. Это стало возможным, благодаря появлению в CSS3 поддержки технических свойств гаджетов, на которых отображается сайт.
Подобный адаптированный дизайн можно использовать для верстки шаблонов различных CMS, включая не только WordPress. Посмотреть на то, как будет выглядеть шаблон можно по ссылке. В примере есть некоторые отличия от приведенного кода: во-первых, для наглядности у блоков content и sidebar добавлена высота, во-вторых, у каждого отображаемого DIV прописан background (фон). Вы можете попробовать поменять размеры ширины бразуера, чтобы увидеть, как меняется верстка страницы, в зависимости от разрешения.
Меню сайта
- Создание и продвижение сайтов
- Как сделать адаптиванный шаблон для WordPress
 Как сделать адаптиванный шаблон для WordPress |