Мобильная версия сайта wordpress без плагина - оптимизация сайта

Опубликовано: 01.09.2018

Здравствуйте, Компания Google с 21 апреля 2015 г. будет отдавать предпочтение сайтам с мобильной версией в своей поисковой выдаче.

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

Если вы не хотите тратить много времени на поисковое продвижение в Гугл и Яндекс — то доверьте это дело профессионалам, тогда у вас появиться много времени для занятия вашим любимым делом, например, для написания полезных статей для своего сайта. А для того, чтобы посмотреть оптимизирован ли ваш сайт для мобильных устройств — Google предлагает вебмастерам 2 онлайн-сервиса:

Как сделать мобильную версию сайта wordpress

1. Сервис «Проверки удобства просмотра на мобильных устройствах» — «google.com/webmasters/tools/mobile-friendly/»

2. Сервис PageSpeed Insights — «developers.google.com/speed/pagespeed/insights/»

WPTouch Плагин WordPress

Поэтому, чтобы Google считал наш сайт оптимизированным — нужно добиться положительных результатов в двух вышеперечисленных сервисах.

Для примера, возьмем простую неоптимизированную бесплатную тему — GlossyBlue, которую можно скачать здесь: «ndesign-studio.com/wp-themes/glossyblue».

В обоих сервисах от Google сайт с данной темой неоптимизирован.

Приступим же к оптимизации данной темы!

Результат до оптимизации:

1. Метатег viewport:

В инструкциях Google сказано, что на страницах сайта, оптимизированных для мобильных устройств, в блоке head должен присутствовать метатег viewport.

Для удовлетворения вышеуказанной рекомендации — заходим в админку wordpress, в левом меню выбираем пункт «Внешний вид», подпункт «Редактор», в списке файлов темы справа выбираем файл header.php и здесь добавляем следующий код между тегами «head»:

Вот так будет выглядеть код:

2. CSS стили:

Далее в этом же файле — header.php указываем файл стиля, который будет использоваться, если сайт будет просматриваться через мобильные устройства, а для этого нужно заменить строчку:

на строчки:

Принцип работы заключаться, в определении размера экрана устройства, с которого происходит просмотр сайта. В новый стандарт HTML5 добавлены специальные параметры –теги, которые позволяют без написания сложных программ — скриптов делать это. То есть, если разрешение больше 980px, то будет активна первая таблица, а ежели меньше, то будет активна вторая таблица. Таким образом, мы поделили сайт на две части, для компьютеров и мобильных устройств. Параметр в 980px – произвольный, вы должны сами определить на каких устройствах какая таблица CSS должна использоваться.

В данном примере вторая таблица стелей — /print.css уже была в теме GlossyBlue — она используется при распечатывании страниц сайта.

А теперь зайдем на онлайн-сервис для «Проверки удобства просмотра на мобильных устройствах» и удивимся, что теперь наш сайт — оптимизирован!

Поэтому, если в вашей неоптимизированной теме есть файл стилей для распечатки сайта, что-то вроде print.css, то его можно использовать как мобильную версию сайта…

Если же у вас данного файл нет, то его можно создать самому.

Для создания еще одного файла стилей вам понадобиться FTP доступ к сайту, но, если его у вас нет, то и эту проблему можно решить, читайте мою статью — «http://mnogoblog.ru/kak-sozdat-novyj-fajl-temy-wordpress-bez-ftp-dostupa» («Как создать новый файл темы wordpress (без ftp доступа)»).

После того как вы создали файл print.css, откроем его — открыть его можно здесь же в админке wordpress — пункт «Внешний вид», подпункт «Редактор», справа в списке файлов темы — находим его и открываем.

Вот пример кода файла стилей для мобильных устройств:

/* Theme Name: GlossyBlue Theme URI: Description: WP glossy theme designed by N.Design Studio. Version: 1.4 Author: Nick La Author URI: This theme was designed and built by Nick La. */ @media screen and (max-width: 980px) { body { width: 100%; float: none; background: none; font-size: 180%; } #content, #primary, #secondary { width: 100%; float: none; margin: 10px 0; } #sitebar { width: 100%; display: none; float: none; margin: 10px 0; font-size: 160%; } #menu2 { display: none; } #commentform { display: none; } #footer { display: none; } .more-link { display: none; } #credits { display: none; } .post-cat { font-size: 160%; } .post-date { display: none; } #share42 { display: none; } }

Разберем более подробно вышеуказанный код:

Свойство «@media screen and … «:

В большинстве сегодняшних wordpress тем используется следующая простая технология создания мобильной и другой версии сайта – в файле стилей (style.css) добавляется следующий тег:

@media screen and (max-width: 320px) { ... }

Вышеуказанный код означает, что для дисплеев с максимальным разрешением экрана в 320px использовать следующие стили оформления.

Таким образом можно прописать отображение сайта для разных разрешений – для мобильных, широкоформатных и др. устройств.

Отличный пример использования данного метода можно увидеть в стандартной теме wordpress, например, Twenty Fourteen (в ней уже сделан акцент на широкоформатные экраны), вот кусок кода её файла стилей:

@media screen and (max-width: 400px) { .list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; } ... @media screen and (min-width: 810px) { .attachment .entry-attachment .attachment { margin-right: -168px; margin-left: -168px; max-width: 810px; } ... @media screen and (min-width: 846px) { .content-area, .content-sidebar { padding-top: 72px; } ... и т.д.

Свойство display :

Здесь как вы видите часто используется свойство display со значением none — то есть скрыть данный блок. Можно скрыть сайдбар, футер, панель навигации, кнопки социальных сетей и т.д.

Свойство font-size

Также с помощью свойства font-size можно увеличить размер шрифта, например на 180%.

Свойство float

Конечно же нужно использовать свойства float (отвечающее за позиционирование) со значением none, для того чтобы сайдбар располагался не справа/слева, а под контентом.