Как да си направим адаптивно оформление на сайт на WordPress

Поздрави приятелите си, на другия ден най-накрая направи това, което аз бях мързелив, за да се направи през последните 2 години - да се адаптират този мобилен сайт. Търсачки вече няколко години активно намек за уебмастъри трябва да се премести в адаптивно оформление. Това е разбираемо - делът на мобилния трафик на данни се увеличава всяка година с големи скокове. Освен това, сега адаптивността на сайта на мобилния разделителна способност на екрана и класацията на влияния - това е официално обявено от представители на Google.

Т.е. ако сайтът не е наострен за мобилни устройства, вие просто ще загубят позиции в резултатите от търсенето, в сравнение с тези сайтове, които са заточени.

Какво ще кажете за тези, които имат стари сайтове със статично фиксирано оформление?

Уви, но рано или късно ще трябва да промените оформлението, ако искате да се задържи на повърхността. В WordPress проблем изглежда да бъде решен с обичайните промени модела - в полза на всички нови WP Теми в момента се прави адаптивни.

Но това решение има някои сериозни недостатъци:

• Ще загубите всички промени, направени на стария модел - оформлението и дизайна на броячи и показатели, куки и всякакви промени в кода. В действителност, след смяната на модела ще бъде нов, много сурово място, със стария текст и изображения.
• Има риск от загуба на позиции в търсачките. Многократно се отбележи, че някои уебмастъри след шарката на смяна значително и трайно едва започнаха трафик.

Ако това не ви плаши, след което продължете напред) Но тъй като за мен, след промяна на работното модел ще бъде много по-голяма, отколкото ако просто се адаптират стария шаблон за мобилни системи.

В допълнение, има специален. плъгини, които би трябвало да помогнат на уебмастера да оптимизират сайта за мобилни устройства. Но в действителност това не е толкова красива, както на теория.

По-рано, за тази цел трябваше да се използва специален vordpressovsky плъгин (дори и името, че няма да пиша, защото аз не те съветвам да го използвам), но това е много тежък, а освен това бъги на черно: какво работи, какво не работи, а след това не се превозва сайт на мобилни устройства. В резултат на това вместо удобство за потребителя, често лишени от мобилния трафик. Освен това, почти всички от тези плъгини са платени, а в безплатната версия можете да получите функционалност олекотена и открити външни препратки към умните разработчици.

Сега блог ruskweb.ru разполага със собствен адаптивни оформление, лесен за четене от мобилен телефон, без никакви добавки и велосипеди патерици. Отне само рамка за първоначално зареждане 3. И само няколко безсънни нощи, и разбира се на знанията на WordPress структура и CSS.

Сайтът ми вече е с адаптивна процедура

Как е замяната на старата оформление сайт на адаптивна

Просто искам да предупредя - ако не разполагате с поне средно ниво на владеене на CSS и бивате отведени лошо в червата на WordPress, тогава аз не те съветвам да отидеш в такава джунгла. Най-вероятно просто izuroduete оформление на вашия сайт.

По-добре да прекара няколко хиляди, като се обръща на свободна практика, вие губите много нерви и време, и като резултат сложи на сайта.

Между другото, можете да се свържете с мен - аз може да ви помогне да направите сайта си адаптивна срещу скромна такса =) Напиши [email protected] поща или чрез формата за обратна връзка на контактите.

Вие трябва да редактирате не само основният модел, но също така и на шаблони на страници single.php записите, страница тип page.php, sidebar.php, страницата с резултатите от търсенето, страницата с архиви (позиция, с тагове) и други класификации. В зависимост от вашите WordPress теми, определени може да варира. Въпреки това, в много блокове на файла ще се повтаря, така че просто ги копирате.

Как да работим с първоначално зареждане

Първото нещо, което да се разбере логиката на налагане на първоначално зареждане. оформление на страниците е така наречената решетка модел - това е равно на 12 графи, които могат да бъдат разделени на работното пространство на сайта.

Цялото съдържание на обекта в тялото да бъдат опаковани в специален блок с .container DIV клас (или .container-течност за каучук оформление). Освен това, в рамките на този контейнер цялото съдържание е обвито в колона с DIV клас .col-. размерът на които варира в продължение на 4 устройства позволява диапазони и са отбелязани с префикси .col-Lg- .col-md- .col-SM-.col-xs-:

След като добавите номера на префикса 1-12, в зависимост от това колко "колони" трябва да заеме нашето размер елемент. Промяна на представки в клас цв ние определени размери и позициониране елемент за различни резолюции на без никаква намеса в CSS.

На пръв поглед може да изглежда твърде трудно, но повярвайте ми, с практика ще оцените бързината и лекотата на този план, като в сравнение с ръчните стилове за редактиране. Ето няколко примера за това, изглежда това на практика:

Когато видите този код, класа на цв-MD-4 се тълкува по следния начин: на блока, за да изведете на вторичния устройството с разделителна способност на екрана ≥992px заема 4/12 от майка елемент.

Например, за да се покаже на вашия сайт. Редактиране на страницата index.php за основна, добавете блок