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

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

А для того, чтобы посмотреть оптимизирован ли ваш сайт для мобильных устройств – Google предлагает вебмастерам 2 онлайн-сервиса:

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

2. Сервис PageSpeed Insights – “developers.google.com/speed/pagespeed/insights/”

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

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

В обоих сервисах от Google сайт с данной темой неоптимизирован.
Приступим же к оптимизации данной темы!

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

1. Метатег viewport:

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

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

<meta name="viewport" content="width=device-width">

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

2. CSS стили:

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

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />

на строчки:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 980px)" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" media="screen and (max-width: 980px)" href="<?php bloginfo( 'template_url' ); ?>/print.css" />

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

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

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

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

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

Для создания еще одного файла стилей вам понадобиться FTP доступ к сайту, но, если его у вас нет, то и эту проблему можно решить, читайте мою статью – “https://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, для того чтобы сайдбар располагался не справа/слева, а под контентом.