Адаптивно оформление на уебсайт в WordPress
Добър ден. Най-вероятно вече сте чували повече от веднъж, че търсачката Google започна да обръща внимание на това как изглежда сайтът на мобилни устройства. И ако дизайнът не е адаптиран, тогава такъв сайт се класира по-зле. И това не е добре. Затова днес искам да ви разкажа за това какво е адаптивно оформление и как да го внедрите на WordPress сайт.
Като цяло, включете музиката и започнете да изучавате мини-инструкцията за адаптиране на дизайна за мобилни устройства.
Също така, за да създадете мобилна версия, има много различни добавки и услуги. Вече говорих за един от тези добавки по-рано в тази статия. Можете да го прочетете, ще бъде полезно, т.к. тази опция също може да се използва, тя е доста подходяща за първи път.
В допълнение към плъгините и услугите, има и следните видове създаване на мобилна версия:
- Индивидуален сайт/версия
- ВЕИ технология
- Адаптивно оформление
Няма да анализираме всеки метод, т.к. няма нужда от това. Лично за себе си избрах 4-ти метод, тоест адаптивно оформление, поради което тази статия ще бъде обсъдена в тази статия. Бих искал веднага да ви предупредя, че за да адаптирате сайта, ще ви трябват поне минимални познания по html, css и уеб дизайн.
Въпреки че във всеки случай можете да поискате помощ от специалисти, включително и от мен.
Направи си сам адаптивно оформление
Каква е красотата на адаптивния дизайн?
- Няма нужда да създавате нов/отделен дизайн.
- Няма нужда да създавате отделен сайт.
- Сравнително проста реализация.
- Google обича отзивчивите уебсайтове 🙂
За адаптиране ще използваме спецификацията заCSS3, наречен Media queries. С помощта на това правило ще можем да създадем различни опции за показване на един елемент от сайта за различни резолюции или устройства. Много е удобно!
Но преди да започнем да „ровим“ в стиловете, трябва да отидете до файла header.php и да въведете следния важен мета таг в тага, който позволява на устройството да коригира ширината на сайта спрямо размера на екрана:
Сега, за начало, ще адаптираме контейнера (div'a), който показва всички елементи на сайта, горния и долния колонтитул, а останалото ще оставим за следващата част на статията.
Така че, на първо място, трябва да анализираме шаблона и да съберем някои данни, а именно да определим идентификатора на желания блок и неговата първоначална ширина. За да направите това, препоръчвам да използвате функцията „Преглед на кода на елемента“ в Chrome или „Панела за програмисти“ във FireFox - много удобно. Ще използвам първия вариант и ще взема тестов шаблон, който все още не е адаптиран, и ще покажа всичко на него.
Както можем да видим от изображението по-горе, в моя случай контейнерът се нарича"#container" и има ширина 960px.
Но какво ни дава това? И всичко е много просто. Ширината на основния ни контейнер е първата точка, където трябва да напишем медийна заявка. И за това трябва да отидете във файла със стилове, обикновено Style.css и в самия край да напишете следната част от кода:
Тоест влиза в максималната ширина на вашия сайт, в моя случай тя е, повтарям,960px, но вашият размер може да бъде съвсем различен.
Също така, в допълнение към адаптирането на контейнера, ние незабавно задаваме стойностите за изображенията, за да ги направим еластични и да не им позволяваме да се разтягат повече от ширината на екрана.
Така че, запазете файла Style.css, актуализирайте сайта и вижте следното:
Тоест, както виждаме от екранната снимка по-горе, сайтът автоматично се сви до желаната ширина на екрана, в моя случай 662px. Страхотно е, нали? И ако нищо не се случи, тогава препоръчвам да напишете !важното правило за ширината на контейнера, тоест ще се окаже:
За да проверя адаптацията, използвам функцията на същия панел "Преглед на кода на елемента".
Също така, след адаптиране на контейнера, вашият сайт може да започне да се показва неправилно. Шапката, страничната лента, мазето и т.н. могат да се изнесат. - Това е добре! Тъй като е необходимо да се извърши тази операция с почти всички елементи на сайта.
Първоначално щях да напиша дълга статия, в която да разкажа и ясно да покажа как да направя адаптивен дизайн от обикновен дизайн, но след това разбрах, че това не е препоръчително. Много по-добре е постепенно да възприемате информацията и веднага да я прилагате на практика, което всъщност ви съветвам да направите.
Благодаря на всички, че прочетохте тази статия до края.
Успех и до нови срещи в следващия пост.