Адаптивний шаблон для WordPress

1. Адаптивний шаблон для WordPress - засіб від зниження позицій сайту в пошуковій видачі.
2. Як перевірити, чи є шаблон для сайту адаптивним?

Вітаю, друзі! Настав час, коли адаптивний дизайн для WordPress став необхідністю, так як щодня у всьому світі продаються десятки тисяч мобільних пристроїв і пошукові системи зобов'язують вебмайстрів змінити шаблон своїх сайтів і блогів на адаптивний.

Ось і мені довелося відволіктися на блог від першорядних завдань. Причиною тому Гугл. «Порадував» днями мене попередженням:

To: Веб-майстру сайту https://seomodern.biz/

Ми перевірили 56 стор. Вашого сайту і виявили, що 100% з них незручно переглядати на мобільних пристроях. Через помилки на цих 56 стор. У користувачів складається погане враження про ресурс. Ці сторінки не вважаються оптимізованими для мобільних пристроїв з точки зору Пошуку Google, і вони будуть відображатися і ранжуватися в результатах пошуку на смартфонах відповідним чином.

Адаптивний шаблон для WordPress - засіб від зниження позицій сайту в пошуковій видачі.

Після цього повідомлення я відразу ж звернувся до того ж Гуглу із запитом «адаптивний шаблон для wordpress». І мені, сподіваюся, відразу пощастило. Чому «сподіваюся»? Тому що доведеться ще багато чого доводити, але, на перший погляд, основна частина вкраплень коду збереглася, а сам шаблон мені сподобався з першого погляду - поєднання мінімалізму з чорним і зеленим кольором 🙂 - такі кольори в шаблоні встановлені за замовчуванням. Кольорову гаму можна підібрати на свій смак і зробити інші необхідні налаштування в панелі управління шаблоном.

Шаблон називається Endolf і має російську локалізацію. Стане в нагоді тим, хто шукає безкоштовні російські шаблони для WordPress, що адаптуються під будь-які типи пристроїв. Але будьте готові до того, що в безкоштовних шаблонах можуть бути присутніми зашифровані посилання на інші сайти, що негативно позначиться на збільшення відвідуваності вашого інтернет-ресурсу і зростання його пузомерок - тИЦ і PR (PR вже давно не оновлювався). Тому, якщо у вас немає досвіду у виявленні і видаленні прихованих посилань і сторонніх скриптів на сайті, то завантажуйте безкоштовні шаблони тільки з офіційного репозиторію Вордпресс або, по-можливості, купуйте шаблони у офіційних представників і розробників або замовте шаблон у фахівців. Прості шаблони з необхідним функціоналом обійдуться недорого - близько $ 5.

Для самостійного пошуку і видалення прихованих посилань в шаблонах для WordPress можна скористатися плагіном ТАС - ru.wordpress.org/plugins/tac. Для пошуку та усунення вірусів та інших шкідливих скриптів - безкоштовним сканером Ai-Bolit - revisium.com/ai - або безкоштовним сервісом онлайн-перевірки сайтів і файлів на віруси Virustotal .

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

Як перевірити, чи є шаблон для сайту адаптивним?

Найпростіший спосіб визначити, чи є шаблон (дизайн) сайту адаптивним - збільшити масштаб сайту: при зміні масштабу вашого блогу чи сайту з адаптивним дизайном в браузері не повинні з'являтися смуги прокрутки - все елементи сайту (текст, картинки) повинні адаптуватися під вікно браузера. Так само смуги прокрутки не повинні з'являтися при зміні розміру вікна браузера. Те ж саме має відбуватися і на мобільних пристроях - не повинна виникати необхідність рухати пальцем по екрану планшета або мобільного в різні боки, щоб повністю побачити вміст сайту.

В адаптивному шаблоні для сайту сайдбар (бічна колонка) на мобільному пристрої повинен зміщуватися вниз - під основну колонку, щоб пункти меню та інші елементи не наближалися дуже близько один до одного і по ним можна було без праці потрапити пальцем.

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

У браузері Google Chrome так само можна перевірити, як буде виглядати ваш сайт з адаптивним дизайном на конкретній моделі мобільного пристрою. Натискаємо на кнопку «Налагодження та управління Google Chrome» в правому верхньому куті браузера, в меню «Додаткові інструменти» вибираємо «Інструменти розробника» або натискаємо комбінацію клавіш Ctrl + Shift + I. У вікні, в лівому верхньому кутку вибираємо потрібну модель мобільного пристрою.

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

Поряд з чищенням і реструктуризацією блогу доведеться поміняти головні картинки до статей, щоб вони відповідали дизайну шаблону і задати мініатюри до кожної статті, чого я раніше не робив. Ще б і авторське відео до кожної статті додати ... Роботи - не початий край 🙂

Чому необхідно в терміновому порядку змінити шаблон свого сайту на адаптивний і як перевірити, чи є він адаптивним в очах пошукової системи Google, можна прочитати в статті « Як уникнути зниження позицій сайту в SERP Google? »

З повагою, Сергій Грицюк, автор блогу seomodern.biz