Як адаптувати шаблони для WordPress

16

Від автора: вітаю вас, друзі. З цієї статті ви дізнаєтеся, як адаптувати шаблони для WordPress і чому сьогодні дуже бажано робити адаптований шаблон WordPress.

Для початку, мабуть, варто зупинитися на самому понятті адаптивний сайт, адаптивний шаблон і з’ясувати, чому сьогодні важливо робити адаптивні шаблони. Тут насправді все дуже просто. Ми живемо в такий час, коли настільна стаціонарна апаратура впевненим і стрімким кроком переходить в планшети і смартфони. Час, коли навіть ноутбуки зміщуються на другий план… А отже, зростає попит на сайти під планшетні і мобільні пристрої.

Уявіть, що станеться, якщо ваш сайт не адаптований для мобільних пристроїв і його дивиться відвідувач з планшета або, навіть з мобільного телефону. Для користувача буде вкрай незручно переглядати ваш сайт. Не буду наводити ніяку додаткову статистику (хоча така статистика є) відмов перегляду сайтів, які не адаптивні, з мобільних пристроїв. Замість статистики буду ґрунтуватися на власному досвіді і висловлю свою думку, як звичайний пересічний користувач. Отже, останнім часом я все частіше став помічати за собою, що відкриваючи той чи інший сайт в своєму смартфоні, я практично завжди закриваю його, якщо сайт не адаптивний.

Можу помилятися, але, як мені здається, більшість (або принаймні більша частина) користувачів можуть поступати аналогічно. А адже це все аудиторія (або потенційна аудиторія) сайту. І ця ситуація з кожним роком буде збільшуватися, оскільки кількість різноманітних мобільних гаджетів зростає з кожним вже навіть не роком або місяцем, а з кожним днем.

Думаю, питання адаптивної верстки для WordPress — питання цілком очевидний. При цьому не тільки для веб-майстрів, але і для власників сайтів. Вже часто однією з вимог при замовленні теми WordPress можна почути побажання мати адаптивну тему WordPress. Якщо мова йде про преміум шаблоні, то тут без варіантів. Сучасна преміум тема WordPress фактично апріорі повинна бути адаптована для перегляду різних типів пристроїв.

Як адаптувати шаблони для WordPress? Все дуже просто — нам потрібні медіа-запити. Медіа-запити — це основний механізм і спосіб зробити адаптивну верстку. Принцип їх роботи досить простий: той чи інший медіа-запит спрацює рівне для тієї ширини (або, точніше, діапазону ширини) екрана, для якої він написаний. Ну а всередині медизапроса ми пишемо необхідні нам стильові правила, які будуть оформляти той чи інший елемент сайту для відповідної ширини.

Найпростіший приклад. У нас є двухколоночный сайт, який на мобільних пристроях повинен перетворюватися в одноколонковий. Вирішити завдання вкрай просто. Для отримання двох колонок для десктопних пристроїв ми, звичайно, використовуємо властивість float, задаючи обтікання колонок. Ну а на потрібній нам ширині вікна браузера ми просто скинемо float, використовуючи значення none. Приблизно так:

@media only screen and (max-width : 767px) {
.sidebar{
float: none;
}
}

Як бачимо, ми просто помістили звичайне стильове правило всередину конструкції медіа-запиту. Тепер це правило спрацює тільки для ширини вікна браузера менше 768 пікселів.

Як ви розумієте, всі медіа-запити і правила для них містяться в файл стилів теми або в окремий файл стилів, який необхідно підключити до шаблону WordPress. Так, і найголовніше. Щоб медіа-запити працювали і шаблон вийшов адаптивним, потрібно не забути помістити в шапку сайту (як правило, це шаблон header.php теми) наступний рядок коду:

Ось, власне, і все в загальних рисах. Є, звичайно, багато різних нюансів, які складно висвітлити в рамках невеликої статті, але тут я можу запропонувати вам познайомитися з нашим курсом, в якому на прикладі вже існуючої теми WordPress показано, як адаптувати шаблон WordPress.

Як адаптувати шаблони для WordPress

На цьому у мене все. Удачі!