Как правильно выбрать шаблон WordPress

Выбор шаблона WordPress — это важный шаг при создании сайта. Соблюдение ниже описанных рекомендаций поможет избежать серьезных ошибок. В данной статье описаны следующие виды проверки:

  • w3.org
  • мобильная адаптация
  • поддержка HTML 5
  • скорость загрузки сайта
  • чистота верстки

w3.org

В первую очередь, рекомендуется проверить тему с помощью бесплатного сервиса w3.org, который сканирует шаблон и выдает отчет о качестве кода и соблюдении в нем международных стандартов веб-программирования — «International Standard ISO/IEC 15445—HyperText Markup Language (HTML), и International Standard ISO 8879—Standard Generalized Markup Language (SGML)».

Проверка сайта кссс.рф показала следующий результат:

Результат проверки сайта кссс.рф с помощью w3.org
Результат проверки сайта кссс.рф с помощью w3.org

При проверке сайта допускается наличие ОДНОЙ ошибки (помеченной красным цветом), большее их количество говорит о несоблюдении стандартов программирования при разработке шаблона. В этом случае, стоит задуматься о поиске другой темы. В случае сайта кссс.рф ошибку можно игнорировать, поскольку она связана с внешним кодом от yandex.ru, и не имеет отношение к теме.

Мобильная адоптация

Наглядный пример мобильной адаптивности сайта кссс.рф
Наглядный пример наличия мобильной адаптации у сайта кссс.рф

Мобильная адоптация — второй важнейший критерий при выборе шаблона WordPress по двум причинам:

  1. сайты с мобильной адаптацией имеют плюсы ранжирования у поисковиков
  2. огромная доля посетителей веб-страниц приходится на пользователей смартфонов и планшетов — это львиная доля трафика

Проверить наличие мобильной адаптации очень просто — если при сужении окна вашего браузера, страничка начнет автоматически адаптироваться под заданную ширину без появления полосы горизонтальной прокрутки, то ваша тема адаптирована! На рисунке справа вы можете видеть пример данной адаптации у сайта кссс.рф.

Если у выбранной вами темы данная опция отсутствует, ищите другой шаблон.

Поддержка HTML 5

Поддержка адаптивного веб-дизайна крайне важна в современном сайто-строении. В связи с чем, ваш шаблон обязательно должен поддерживать код HTML 5. Чтобы проверить это, необходимо установить заинтересовавшую вас тему, открыть основную страницу, кликнуть правой клавишей на экране (при условии, что вы используете Google Chrome) —> и выбрать «Посмотреть код страницы», как показано на рисунке ниже:

Как посмотреть код страницы
Как посмотреть код страницы в браузере Google Chrome

У тем, выполненных с поддержкой HTML 5 вы обнаружите в самом начале следующий код <!DOCTYPE html>

Проверка поддержки HTML 5
Проверка поддержки HTML 5

Если этого кода нет, ищите другую тему.

Скорость загрузки сайта

PageSpeed Insights — это бесплатный сервис от компании Google, позволяющий оценить скорость загрузки вашего веб-сайта на разных устройствах.

wp-theme-checkup-06
Сервис от Google для проверки скорости загрузки веб-страниц — PageSpeed Insights

Проверка сайта кссс.рф показала следующий результат:

Результат проверки скорости загрузки сайта кссс.рф
Результат проверки скорости загрузки сайта кссс.рф

Как видим, скорость загрузки сайта кссс.рф находится в красной зоне для мобильных устройств и в желтой для настольных ПК. Это сигнал к тому, что нужно что-то оптимизировать. Я пробежался по рекомендациям и решил оптимизировать изображения. Вот, какого результата мне удалось добиться после оптимизации:

Как оптимизировать скорость загрузки сайта
Как оптимизировать скорость загрузки сайта

Результат меня порадовал!

Чистая верстка

Для людей не имеющих опыта в веб-программировании, проверить чистоту верстки сложно, но можно следующим образом: откройте любую страницу сайта и просмотрите код страницы, как описывалось выше. Ваша задача — обнаружить явные признаки «мусора». Например, на рисунке ниже приведен целый блок тегов <div></div>.

wp-theme-checkup-05
Пример того, как выглядит плохой код верстки шаблона

Элемент <div> является блочным элементом и предназначен для применения какого-либо стиля целому блоку документа. В данном случае мы видим бесполезное применение стилей к абсолютно пустым блокам, то есть между тегами <div></div> нет никакой информации. Наличие такой верстки ставит под сомнение профессионализм верстальщика и данный шаблон использовать не рекомендуется.

Если у вас есть свои рекомендации как правильно сделатьвыбор шаблона WordPress, буду рад их услышать.