Здравствуйте, давайте рассмотрим как создать различные версии отображения сайта в зависимости от разрешения экрана: мобильную, широкоформатную –  без плагинов, а также с помощью них.

Скачать исходники для статьи можно ниже

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

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

Перед тем как начать создавать мобильную и широкоформатную версию сайта стоит упомянуть об очень полезном онлайн сервисе, позволяющем просмотреть ваш сайт в разных разрешениях экрана (мобильном, стандартном, широкоформатном и т.д.) – это Screenfly:

“quirktools.com/screenfly/”

Недавно писал статью про Онлайн сервис Google – PageSpeed Insights – ускоряем загрузку сайта – и при анализе своего сайта “дядя Google” дал моему сайту – 60 баллов из 100 – ссылаясь на мелкий шрифт текста, мелкий размер активных элементов и область просмотра – думаю это тоже в какой-то мере влияет на ранжирование позиции в поисковике…

Еще в комментариях был вопрос – А как сделать эти кнопочки прозрачными (плавающие кнопки социальных сетей)? Просто когда с телефона на сайт заходишь они мешают. Спасибо!

Поэтому и мобильная версия сайта, также очень важна!

Создаем мобильную, широкоформатную версию сайта без плагинов:

В большинстве сегодняшних 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;
	}
...
@media screen and (min-width: 1008px) {
	.search-box-wrapper {
		padding-left: 182px;
	}
...
@media screen and (min-width: 1040px) {
	.site-content .has-post-thumbnail .entry-header {
		margin-top: -48px;
	}
...

@media screen and (min-width: 1080px) {
	.search-box .search-field {
		width: 324px;
	}

...

@media screen and (min-width: 1110px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media screen and (min-width: 1218px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		margin-right: 54px;
	}
...

@media screen and (min-width: 1260px) {
	.site-content blockquote.alignleft,
	.site-content blockquote.alignright {
		width: -webkit-calc(50% + 18px);
		width:         calc(50% + 18px);
	}

...

Как видите тема учитывает разрешения от 400px до 1260px.

Для примера, можете добавить в файл стилей своего сайта (style.css) код для окрашивания ссылок на вашем сайте в красный цвет для разрешения экрана не более 641px в ширину:

@media screen and (max-width: 641px) {
   
	a {
	color: #fe0321;
	}
}

Далее смотрим с помощью онлайн сервиса “quirktools.com/screenfly/” на результат работы кода.

А теперь рассмотрим интересные wordpress плагины для создания мобильной, широкоформатной версии сайта:

1. WPtap Mobile Detector

Плагин достаточно давно не обновлялся: 2010-5-26
Загрузок: 46,150
Сайт плагина: “wordpress.org/plugins/wptap-mobile-detector/”

Этот плагин автоматически определяет тип мобильного устройства и активирует ту тему, которую вы выбрали для него. Пользователь может установить несколько мобильных темы и связать их с различными мобильными устройствами для лучшей производительности. Если у вас есть отдельный WAP или мобильный веб-сайт, этот детектор также позволяет перенаправлять свой мобильный трафик на него.

2. JetPack
Последнее обновление: 2014-5-22
Загрузок: 10,572,485
Сайт плагина: “wordpress.org/plugins/jetpack/”

3. WPtouch
Последнее обновление: 2014-6-5
Загрузок: 5,510,676
Сайт плагина: “wordpress.org/plugins/wptouch/”

4. WordPress Mobile Pack
Последнее обновление: 2014-6-11
Загрузок: 572,616
Сайт плагина: “wordpress.org/plugins/wordpress-mobile-pack/”

5. WP Mobile Edition
Последнее обновление:2014-5-16
Загрузок: 40,671
Сайт плагина: “wordpress.org/plugins/wp-mobile-edition/”

6. Wapple Architect Mobile Plugin
Последнее обновление: 2013-9-4
Загрузок: 112,319
Сайт плагина: “wordpress.org/plugins/wapple-architect/”

7. MobilePress
Последнее обновление:2013-8-9
Загрузок: 217,085
Сайт плагина: “wordpress.org/plugins/mobilepress/”

8. Duda Mobile Website Builder
Последнее обновление:2014-6-10
Загрузок: 84,773
Сайт плагина: “wordpress.org/plugins/mobile-website-builder-for-wordpress-by-dudamobile/”