Adaptive дизайн на сайта - как да се приложи за блогове на WordPress
Адаптивен дизайн модерен сайт е ключов показател за неговото качество.
Освен това, търсачките ранг уеб сайтове, пригодени за мобилни устройства по-лоялни. Това е особено вярно за Google подстанция, която пряко налага на сайтове на тези изисквания.
Какво е адаптивен дизайн на сайта
Как да направите вашия сайт адаптивна
- Adaptive шаблон.
- Мобилна версия на сайта.
- Инсталиране на специално приложение на устройството на потребителя.
Опитът показва, че най-доброто решение е да се създаде адаптивна шаблон. Две други начини за решаване на този проблем също, но значително по-малък от първия метод.
Ако използвате мобилна версия на сайта на броя на труда, време и пари, е сравнимо с развитието и усъвършенстването на адаптивната шаблона.
Но когато се добавят, работещи действия, за да се запази значението на мобилния сайт, информация синхронизация с основния сайт. И за промоция SEO се добавят допълнителни въпроси за двойки и т.н.
Инсталирането на приложението на мобилни устройства и не зависи от вас. На първо място, не всяко устройство може да се използва. На второ място, тя изисква допълнителни знания и действия, и не всички потребители ще се съглася с неудобството.
Обобщавайки, можем да заключим: създаването на адаптивен дизайн за вашия сайт е най-ефективното решение за малко или средно сайт.
Adaptive оформлението на сайта
За създаване на отзивчив дизайн ще трябва да прибегне до налагането на адаптивна технология. Същността му е, както следва:
Направете шаблон "гума"
Това не е здраво прикрепен към ширината на страницата и използвайте относителни единици. Това е да си направите шаблон пропорционално сгъстим, че е "гума".
За тази цел ширината на страницата е даден имот CSS макс ширина вместо ширината и имат по отношение на тази стойност, ширината на другите елементи са избрани в проценти (%).
Определя "контролни точки" ширината на екрана на
Определя се нуждае от контролните точки (КТ) на ширината на екрана за планиране на по-нататъшни действия.
Screen оформление планиране за всяка CT
Според тези тестови точки съставяне подреждането на отделните звена на сайт, така че те да са правилно отразени на мобилни устройства.
За повече информация за справяне с тези проблеми, можете да се запознаете с безплатни курсове по адаптивен дизайн екип WebFormMySelf.
запитвания медийни
Вие трябва да използвате медийни заявки за задаване на контролни точки. Тези стандарти директиви CSS3 за управление на съдържанието на дисплея на страници за различни резолюции на екрана.
Тази директива изглежда по следния начин:
Отзивчиви шаблон за WordPress блогове
Adaptive шаблон за вашия блог на WordPress може да се постигне по няколко начина.
- Инсталирайте подходящия плъгин.
- Купените готови адаптивен модел.
- Адаптирайте съществуващ шаблон сами или заявка за сервиз.
Решавайки да върви в крак с времето, аз също започнах обучение, за да се адаптира в блога си. За плъгини за адаптиране на РП в интернет много информация. Запознах се с работата и на изискванията на най-популярните плъгини и реши, че прилагането им не би било най-доброто решение за моя блог.
Купи модерен отзивчив шаблон в интернет също е доста лесно, би било пари. Необходимо е обаче, че шаблонът ви харесва, и да отговаря на всички ваши желания.
С една дума, спрях в третия вариант, и реши да се адаптират собствените си шаблон.
Adaptive шаблон за WordPress сами по себе си
След преглед на принципите на изграждане на адаптация за мобилни устройства, аз весело отиде да работи, но аз чувствах, че моите познания за HTML, CSS, PHP не е достатъчно.
И тя започна да се насочват към закупуване на готови шаблони, но в този момент е бил информиран за хода на две Андреев Biernacki и Кудла «WordPress-Майстора от лични блогове, за да Шаблон Premium". Един от блоковете на курса съдържаха научих шаблон адаптация завърши за мобилни устройства.
Цената на курса е сравнима с цената на нова модерна адаптивна шаблон. Затова реших да прекарат тази сума за закупуване на курса и да получат вместо готови шаблони - знанието. Мисля. Че инвестицията е правилно и напълно се оправдава.
Кой се интересува от този курс - последвайте този линк. Но първо, да започнем с един свободен, също много полезен материал.
Както се оказа, да се адаптира своя шаблон доста вероятно себе си. Можете да проверите това чрез издърпване на мишката десния край на прозореца на браузъра и да гледате в същото време:
- Както стеснява ширината на екрана.
- Като странична лента отива надолу.
- Как да се намали изображението.
- Как загубена изображения в заглавната си част.
- Както меню, за да застане на два реда.
Ако накратко описват извършване на работата, аз го направих следното:
- Той изостави фиксирана ширина на страницата. Използвам макс ширина вместо ширина.
- Определяне на ширината на отделните елементи - съдържанието на ядрото на страничната лента, капачки, менюта, мазето в% спрямо ширината на страницата.
- Оставянето само дясната лента. А информация лента прехвърля от ляво на дясно. В предишната версия има две ленти в блога е - в ляво и дясно на съдържание блок.
- Създаден прекъсване 520 пиксела и предписани необходимите промени в него.
Проверих резултати за адаптиране на Google и получи положителна оценка и похвала, дори и от него.
Очевидно е, че това е трябвало да бъдат добавени към файла header.php описание мета изгледа на. В противен случай, няма начин. Ето описанието:
<Мета име = "прозореца за показване" съдържание = "ширина = устройство ширина, първоначално мащаб = 1.0">
Услуги проверки показване на сайта на мобилни устройства
В процеса на работа на адаптирането на шаблона не е много полезно, ако не разполагате с тези устройства на ръка.
Ето защо, за такива цели, можете да се възползвате от услугите, които симулират показването на сайта на различни устройства с различна ширина на екрана.
Списъци на тези, които се използват в работата си.