Адаптивна верстка сайту на WordPress
Добридень. Швидше за все Ви вже неодноразово чули про те, що пошуковик Google почав звертати увагу на те, як сайт виглядає на мобільних пристроях. І якщо дизайн не адаптований, такий сайт ранжується гірше. А це не є добре. Тому сьогодні я хочу розповісти Вам про те, що таке адаптивна верстка і як її реалізувати на WordPress сайті.
Загалом, включайте музику та починайте вивчати міні-інструкції з адаптації дизайну для мобільних пристроїв.
Також, для створення мобільної версії існує безліч різних плагінів та сервісів. Про один і таких плагінів я вже розповідав раніше, у цій статті. Можете прочитати, корисно, т.к. такий варіант теж можна використовувати, він цілком підійде спочатку.
Крім плагінів та сервісів, ще є такі види створення мобільної версії:
- Окремий сайт/версія
- Технологія RESS
- Адаптивна верстка
Розбирати кожен спосіб ми будемо, т.к. у цьому немає жодної потреби. Особисто для себе я вибрав 4 спосіб, тобто адаптивну верстку, тому саме про неї і йтиметься у цій статті. Відразу хочеться попередити, що для адаптації сайту Вам знадобляться хоча б мінімальні знання html, css та веб-дизайну.
Хоча, у будь-якому випадку, Ви можете звернутися за допомогою до фахівців, у тому числі до мене.
Адаптивна верстка своїми руками
У чому ж вся краса адаптивного дизайну?
- Немає потреби створювати новий/окремий дизайн.
- Немає потреби створювати окремий сайт.
- Щодо просте використання.
- Google любить адаптивні сайти 🙂
Для адаптації ми будемо використовувати специфікацію дляCSS3 під назвою Media queries. За допомогою цього правила ми зможемо створювати різні варіанти відображення одного елемента сайту під різні дозволи чи пристрої. Це дуже зручно!
Але перед тим, як ми підемо "колупатися" в стилях, необхідно зайти в файл header.php і в тег вписати наступний важливий мета-тег, що дозволяє пристрою підлаштувати ширину сайту під розміри екрана:
Зараз, для початку, ми зробимо адаптацію контейнера (div'а), в якому відображаються всі елементи сайту, шапку та підвал, а решту залишимо на наступну частину статті.
Так ось, в першу чергу нам потрібно зробити аналіз шаблону та зібрати деякі дані, а саме визначити ідентифікатор потрібного блоку та його початкову ширину. Для цього я рекомендую використовувати функцію "Перегляд коду елемента" у Chrome або "Панель розробника" у FireFox - дуже зручно. Я використовуватиму перший варіант і візьму тестовий шаблон, який ще не адаптований і показуватиму все на ньому.
Як бачимо із зображення вище, у разі контейнер так і називається«#container» і має ширину 960px.
Але що це нам дає? А все дуже просто. Ширина нашого головного контейнера, це і є першою точкою, в якій нам необхідно прописати медіа-запит. А для цього потрібно зайти у файл зі стилями, зазвичай це Style.css і в самому кінці прописати наступний шматочок коду:
Тобто, вписує максимальну ширину Вашого сайту, в моєму випадку це, повторюся,960px, у Вас розмір може бути абсолютно інший.
Також, крім адаптації контейнера, відразу ж прописуємо значення для зображень, щоб зробити їх еластичними і не дозволяти розтягуватися більш ніж ширина екрану.
Так ось, зберігаємо файл Style.css, оновлюємо сайт і бачимо таке:
Тобто, як ми бачимо зі скріншота вище, сайт автоматично стиснувся до потрібної ширини екрана, у моєму випадку 662px. Здорово, чи не так? А якщо нічого не сталося, то рекомендую прописати правило !important для ширини контейнера, тобто вийде:
Для перевірки адаптації я використовую функцію тією ж панеллю «Перегляд коду елемента».
Також, після адаптації контейнера Ваш сайт може почати відображатися неправильно. Може з'їхати шапка, сайдбар, підвал тощо. - це нормально! Тому що необхідно проводити цю операцію практично з усіма елементами сайту.
Спочатку я збирався написати тривалу статтю, в якій повністю б розповів і наочно показав про те, як зі звичайного дизайну зробити адаптивний, але потім зрозумів, що це не доцільно. Набагато краще поступово сприймати інформацію і відразу застосовувати її на практиці, що я власне і раджу зробити Вам.
Всім дякую що дочитали статтю до кінця.
Бажаю удачі і до зустрічі у наступній статті.