1. Як же бути тим, у кого старі сайти з фіксованою статичної версткою?
2. Як відбувається заміна старої верстки сайту на адаптивну
3. Як працювати з Bootstrap

Вітаю друзі, днями я нарешті зробив те, що лінувався зробити останні 2 роки - адаптував цей сайт для мобільних устройств.Поісковікі ось уже як кілька років активно натякають вебмастерам про необхідність переходу на адаптивну верстку. І це зрозуміло - частка мобільного трафіку з кожним роком зростає як на дріжджах. Більш того, тепер адаптивність сайту до мобільних дозволами екрану і на Ранжування враховує - про це офіційно заявили представники Гугла.

Тобто якщо сайт не заточений під мобільні пристрої, то ви просто будете втрачати позиції в пошуковій видачі, в порівнянні з тими сайтами, які заточені.

Як же бути тим, у кого старі сайти з фіксованою статичної версткою?

На жаль, але рано чи пізно доведеться міняти верстку, якщо хочете залишатися на плаву. У WordPress проблема, здавалося б, вирішується звичайною зміною шаблону - благо все нові теми для wp зараз робляться адаптивними.

Але у такого рішення є кілька серйозних недоліків:

• Ви втратите всі зміни, які вносили в старий шаблон - верстку і дизайн, лічильники і метрики, хукі і всілякі редагування в коді. По суті після зміни шаблона буде новий, зовсім сирий сайт, зі старим текстом і картинками.
• Є ризик втратити позиції в пошукових система. Неодноразово помічено, що у деяких вебмайстрів після зміни шаблону серйозно і надовго просідав трафік.

Якщо це вас не налякало, то вперед) Однак, як на мене, після зміни шаблона роботи буде куди більше, ніж якщо просто адаптувати старий шаблон під мобільні системи.

Крім того, існують спец. плагіни, які повинні допомогти вебмастеру оптимізувати сайт під мобільні пристрої. Але на ділі все йде не так красиво, як в теорії.

Раніше для цих цілей мені доводилося використовувати спеціальний вордпрессовскій плагін (навіть назва його писати не буду бо не раджу їм користуватися), але він був дуже важкий, і до того ж глючил по чорному: то працював, то не працював, то взагалі не вантажив сайт на мобільних пристроях. У підсумку замість зручності для користувача я часто втрачав мобільного трафіку. Крім того, майже всі ці плагіни платні, а на безкоштовних версіях ви отримуєте урізаний функціонал і відкриті зовнішні посилання на хитромудрих розробників.

Тепер же блог ruskweb.ru може похвалитися власною адаптивної версткою, зручною для читання з мобільників, без всяких плагінів і велосипедів на милицях. Знадобився всього лише фреймворк Bootstrap 3. А так же пару безсонних ночей, і звичайно знання структури wordpress і CSS.

Завантажити Bootstrap 3 можна безкоштовно за цією адресою http://getbootstrap.com/getting-started/#download

Перевірити наскільки зручний ваш сайт для мобільних екранів і планшетів ви можете на сервісі від гугла https://www.google.ru/webmasters/tools/mobile-friendly/

У мого сайту тепер з адаптивністю порядок

Як відбувається заміна старої верстки сайту на адаптивну

Відразу хочу попередити - якщо у вас немає хоча б середнього рівня знань CSS і ви погано орієнтуєтеся в нутрощах вордпресс, то не раджу лізти в такі нетрі. Швидше за все ви тільки ізуродуете верстку свого сайту.

Краще витратити пару тисяч, заплативши фрілансеру, ніж втратити купу нервів і часу, а в результаті покласти сайт.

До речі можете звертатися до мене - можу допомогти зробити ваш сайт адаптивним за скромну винагороду =) Писати на пошту [email protected] або через форму зворотного зв'язку в контактах.

Редагувати потрібно не тільки шаблон головної, але і шаблони сторінок записів single.php, сторінки виду page.php, sidebar.php, сторінки результатів пошуку, сторінки з архівами (рубрики, мітки), та іншу таксономию. Залежно від вашої теми оформлення вордпресс набір може змінюватися. Однак у багатьох файлах блоки будуть повторюватися, тому досить просто скопіювати їх.

Як працювати з Bootstrap

В першу чергу потрібно зрозуміти логіку верстки на Bootstrap. Розмітка сторінки йде по так званій гратчастої моделі - це 12 рівних стовпців, на які можна умовно поділити робочу область сайту.

Весь вміст сайту всередині body має обертатися в спеціальний блок div з класом .container (або .container-fluid для гумової верстки). Далі всередині цього контейнера весь контент обертається в колонки div з класом. col-, розмір яких варіюється для 4-х діапазонів дозволів пристроїв і позначаються префіксами .col-lg- .col-md- .col-sm- .col-xs-:

Після префікса ми додаємо цифру від 1 до 12, в залежності від того, скільки «колонок» повинен займати наш елемент за розмірами. Змінюючи префікси у класу col ми задаємо розміри і позиціонуємо елемент для різних дозволів без будь-якого втручання в CSS.

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

Коли ви бачите такий код, то клас col-md-4 розшифровується так: блок для відображення на середніх пристроях з дозволом екрану ≥992px займає 4/12 частини батьківського елемента.

Для прикладу покажу на своєму сайті. Редагую сторінку index.php для головної, додаю блок відразу після обгортки

Таким чином я виділяю під контент 8/12 частини робочої області сайту. Решта ж 4/12 припадають на сайдбар

В результаті я маю таке - мій контент і сайдбар будуть вибудовуватися в 2 колонки на дозволах для великих і середніх пристроїв, а як тільки розмір вікна перейде позначку в 768 пікселів, то сайдбар попливе вниз під основний контент. Це робиться для того, що б на невеликих екранах все виглядало красиво і гармонійно без горизонтальної прокрутки. Інакше б блок сайдбара стискувався до малесеньких розмірів і став незручним для читання.

При цьому між колонками йде стандартний padding, так що блоки не "злипаються». І так, не забудемо поставити закривають теги для наших div'ов. Причому хочу відразу зауважити, в деяких шаблонах відкриття діва і закриття може знаходиться в різних php файлах.

При бажанні можна приховати непотрібні блоки на обраному вами дозволі, додавши клас .hidden- з префіксом потрібного вам дозволу, на якому потрібно приховати блок.

Там насправді вистачає своїх нюансів і моментів. Детальніше ви можете почитати про бутстрапа тут http://bootstrap-3.ru/css.php або ж знайти в мережі навчальні відео уроки і статті, яких більш ніж достатньо. Для вивчення, звичайно, доведеться витратити час. І не забудьте попередньо зробити повний бекап сайту, перш ніж перейти до практичних занять 🙂

Важливо! Можуть виникати конфлікти старих CSS-стилів сайту і стилів bootstrap. Що б виправити їх можливі наступні дії:

1. Прибирати фіксовані розміри (в основному width) у елементів сайту в таблицях стилів
2. Деякі id і class'и доведеться замінити бутстраповскімі, або видаляти заважають стилі вручну
3. Міняти позиціонування або графічні елементи на сайті, які добре виглядали на статичної верстці, але не підходять для адаптивної
4. Якщо на сайті є великі таблиці, то доведеться повозитися з ними
5. Перевірити кожну сторінку сайту, обов'язково змінюючи розміри вікна браузера, що б знайти косяки в верстці і виправити їх

Таким чином, завдяки цьому інструменти можна замінити застарілу верстку сайту на адаптивну, що не переписуючи тисячі рядків CSS стилів вручну. Після роботи не забудьте перевірити відображення сайту в сервісі гугла і в валідаторі.

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