Адаптація шаблонів DLE

20

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

Почнемо з визначення термінів «адаптивний сайт» і «адаптивний веб-дизайн». Власне, визначення інтуїтивно зрозуміло з самого терміна: «адаптивний», «адаптуватися». Ці слова фактично є синонімами слова «підлаштовуватися».

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

Для ілюстрування прикладу давайте візьмемо стандартний шаблон Default для DLE. Цей шаблон доступний нам відразу після установки CMS, і він вже адаптивний. Ось так він буде виглядати на великих екранах:

Адаптація шаблонів DLE

Тепер зайдемо на цей же сайт з мобільного пристрою або просто зменшимо ширину вікна браузера на своєму комп’ютері і побачимо зовсім іншу картину:

Адаптація шаблонів DLE

Як бачимо, шаблон автоматично підлаштувався (адаптувався) під ширину вікна браузера або пристрою. Це дуже зручно для читачів вашого сайту. І, повірте, якщо ваш сайт не адаптується, то якусь частину відвідувачів ви однозначно втратите.

Але і це ще не все. Сьогодні пошукові роботи все активніше використовують критерій адаптивності, як один із критеріїв при ранжируванні та оцінки сайту. Наприклад, Google однозначно заявив, що буде занижувати позиції сайтів, які не є адаптивними. Ну а це означає, що ви можете втратити не тільки частина існуючої аудиторії сайту, але і частина потенційної аудиторії.

Саме тому зробити сайт адаптивним сьогодні вкрай важливо. Як же зробити адаптивний шаблон для DLE. Тут є кілька варіантів. Перший варіант — використовувати CSS фреймворк при верстці шаблону, наприклад найпопулярніший фреймворк Bootstrap. Цей фреймворк дозволяє верстати спочатку адаптивні шаблони.

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

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

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

Ну і, звичайно ж, не забувайте про цьому рядку коду в шапці вашого сайту (між тегами head):

Цей рядок є ключовою і дозволяє зробити ваш шаблон адаптивним. Ну а як зробити сам шаблон для DLE — ви можете дізнатися з нашого курсу Створення сайту на CMS DLE. На цьому я з вами прощаюся. Удачі!