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 стыляў ўручную. Пасля працы не забудзьцеся праверыць адлюстраванне сайта ў сэрвісе гугла і ў валідатары.

Калі ж вам лянота самім ва ўсім разбірацца або проста няма на гэта часу, то лепш скарыстацца паслугамі прафесіяналаў і зрабіць адаптацыю ці ўвогуле замовіць сайт пад ключ цалкам.