Мобильная версия сайта WordPress: Удобство для мобильных устройств
Мобильная версия сайта – это неотъемлемая необходимость. Во многих случаях мобильный трафик может даже превосходить стационарный, в зависимости от тематики сайта. Это аспект, который нельзя игнорировать. В современном мире, где мобильные устройства стали неотъемлемой частью нашей повседневной жизни, нельзя недооценивать их роль.
Согласно всем принципам удобства использования сайта, мы обязаны предоставить нашим посетителям полноценную мобильную версию сайта на WordPress. Это позволит каждому, независимо от устройства — будь то планшет, смартфон или компьютер — с комфортом и удовольствием читать контент.
Зачем нужна мобильная версия сайта WordPress?
Мобильная версия сайта – это адаптированная версия вашего ресурса, специально разработанная для мобильных устройств. Основная задача мобильной версии – обеспечить удобное и быстрое взаимодействие с контентом, учитывая ограниченное пространство экрана и другие особенности мобильных устройств.
Оптимизация мобильной версии сайта
Мобильная версия должна иметь более простой и легкий дизайн. Нужно убирать все лишние элементы и изображения, которые могут замедлить загрузку. Упростить дизайн до минимума, но при этом не нарушить его узнаваемость.
- Удобная навигация: Создайте удобное мобильное меню WordPress, которые легко будет доступно на маленьких экранах. Рассмотрите возможность использования выпадающих или аккордеон-меню.
- Текст и контент: При создании мобильной версии обратите внимание на размер шрифта и читаемость текста. Для маленьких экранов рекомендуется уменьшить размер шрифта, чтобы обеспечить удобное чтение.
- Отступы блоков: Также важно правильно настроить внешние и внутренние отступы блоков. Учтите, что на мобильных устройствах меньше места, поэтому сделайте отступы не слишком большими, чтобы сохранить компактный и аккуратный вид страницы.
- Медиа-контент: Оптимизируйте медиаконтент, такой как изображения и видео, для мобильных устройств. Используйте форматы и размеры, которые обеспечивают хорошее качество и быструю загрузку.
Как создать мобильную версию сайта на WordPress?
Для решения этого вопроса существует множество вариантов, каждый из которых обладает своим уровнем сложности и особенностями. Выбор подходящего метода будет зависеть от вашего опыта и уровня технических навыков. Давайте рассмотрим каждый из этих вариантов более подробно, чтобы вы могли определиться с наиболее подходящим для вас.
Использование готовых тем
Множество готовых тем для WordPress уже содержат адаптивный дизайн. Вам нужно только выбрать подходящею для своей тематики сайта и не мучатся с её адаптивностью. В официальном репозитории WordPress есть огромный выбор с разными параметрами.
Плагины для создания мобильной версии сайта
Существует множество плагинов, которые позволяют создать отдельную мобильную версию сайта. Некоторые из них предоставляют возможность настройки дизайна и контента специально для мобильных устройств.
Плагин WPtouch
Это популярный плагин для WordPress, который позволяет создать мобильную версию вашего сайта без необходимости писать код или заниматься сложной адаптацией. Все происходит визуально с помощью параметров плагина.
Jetpack — модуль Mobile Theme
Jetpack включает в себя разнообразные модули, расширяющие функциональность вашего сайта. Один из таких модулей — Mobile Theme. Он позволяет автоматически оптимизировать ваш сайт для мобильных устройств.
Ручное создание мобильной версии
Этот вариант не является простым, и, к сожалению, здесь нет универсального способа для адаптации разных тем WordPress с помощью одного магического хука. Для этого понадобятся навыки и знания CSS и HTML, чтобы понимать, как создавать адаптивную версию сайта.
@media-запрос
Эти запросы позволяют изменять стиль сайта в зависимости от размера экрана устройства, на котором он отображается. Их нужно прописывать в основном файле style.css в самом низу. Например, вот как можно использовать медиа-запросы для адаптации стилей мобильной версии:
/* Адаптация для планшетов и средних экранов */ @media (max-width: 768px) < .header < padding: 10px; >.menu < display: none; >> /* Адаптация для мобильных устройств */ @media (max-width: 480px) < .header < padding: 5px; >.menu-toggle < display: block; >>
Подключить свой файл стилей
В этом случае мы создадим специальный файл стилей, например, mobile.css, и зададим параметры медиа-запроса, при которых этот файл стилей будет применяться. Вот как это делается:
Вначале создайте файл стилей и назовем его mobile.css. (он должен находиться внутри вашей темы).
Затем откройте файл functions.php вашей темы и добавьте следующий код:
// Стили для адаптивности сайта function ws_enqueue_mobile_styles() < wp_enqueue_style('ws-mobile-styles', get_stylesheet_directory_uri() . '/mobile.css', array(), '1.0', 'screen and (max-width: 767px)'); >add_action('wp_enqueue_scripts', 'ws_enqueue_mobile_styles');
Этот код подключает файл стилей mobile.css только тогда, когда ширина экрана начинается от 767px и меньше.
Теперь откройте файл mobile.css и начните добавлять стили, которые будут применяться только в соответствии с указанной шириной экрана. Пример:
.header < padding: 10px; >.menu
Заказать у специалиста
Если у вас нет времени или возможности заниматься самостоятельной разработкой мобильной версии, вы всегда можете обратиться к специалистам. Мы как раз предоставляем услуги WordPress и можем вам помочь со многими вопросами, включая разработку адаптивных версий сайтов.
Читайте также:
- Плагин мобильного меню на WordPress
- Боковое меню WordPress без плагина
- Медиа-запросы CSS – адаптивная верстка
Как редактировать мобильную версию сайта wordpress?
Для редактирования мобильной версии сайта WordPress можно использовать несколько способов:
- Использование адаптивной темы WordPress: многие темы WordPress уже адаптированы для мобильных устройств и автоматически регулируют отображение сайта в зависимости от размера экрана. Если вы используете адаптивную тему, то вы можете изменять содержимое сайта через панель управления WordPress, а изменения будут автоматически отображаться и на мобильной версии.
- Использование плагина для мобильной версии: если ваша тема не адаптивна или вы хотите настроить отображение сайта на мобильных устройствах более гибко, можно использовать плагин, например, WPtouch Mobile Plugin или Jetpack Mobile Theme. Плагины позволяют настраивать отображение страниц, меню, шрифтов и других элементов сайта на мобильных устройствах.
- Использование CSS-стилей: если у вас есть знания в CSS, вы можете создать свои собственные стили для мобильной версии сайта. Для этого можно использовать инструменты разработчика в браузере, чтобы определить классы и идентификаторы элементов и написать соответствующие стили.
В целом, для редактирования мобильной версии сайта WordPress необходимо иметь доступ к панели управления WordPress и знания в веб-разработке, включая HTML, CSS и JavaScript. Если у вас нет опыта в этой области, то вам могут помочь специалисты по веб-разработке или дизайнеры.
MnogoBlog
Как создать сайт на wordpress, настроить и оптимизировать wordpress
Мобильная версия сайта wordpress без плагина
Здравствуйте, Компания 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”:
Вот так будет выглядеть код:
2. CSS стили:
Далее в этом же файле – header.php указываем файл стиля, который будет использоваться, если сайт будет просматриваться через мобильные устройства, а для этого нужно заменить строчку:
" type="text/css" media="all" />
" /> /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, для того чтобы сайдбар располагался не справа/слева, а под контентом.
Мобильные плагины для WordPress
Мобильные плагины адаптируют сайт под мобильные телефоны и планшеты: посетителю удобно пользоваться сайтом с любого устройства.
Рассмотрим несколько популярных плагинов, которые помогут адаптировать сайт на WordPress для мобильных платформ:
Плагин JetPack
JetPack адаптирует сайт на WordPress для мобильных устройств нажатием одной кнопки. Отметьте “Включает мобильную тему JetPack” в блоке настроек “Расширения темы”. JetPack подойдет для мобильной адаптации блога и простого сайта.
Мобильный плагин Wiziapp
Wiziapp не только адаптирует сайт или блог для мобильного, но и конвертирует сайт в мобильное приложение. Причем это никак не влияет на отображение сайта на десктопах.
За определённую сумму можно опубликовать свои мобильные приложения для Android и IOs в AppStore и Play Market.
В меню настроек плагина “Themes” выберите одну из восьми представленных тем, которая будет отображаться на мобильных устройствах. При этом тема сайта со стационарного ПК или ноутбука останется прежней.
Чтобы просмотреть как будет выглядеть мобильное приложение конвертированное плагином, зайдите в блок настроек “Settings” и выберите “Simulate the App – Web Simulator”. Выберите нужную вам систему Android либо iOS.
Если публикации, приложения и расширенный функционал вам не нужны, пользуйтесь плагином бесплатно. Все необходимые функции для начинающего сайта есть в бесплатной версии.
Мобильный плагин WPtouch Mobile
Плагин WPtouch Mobile автоматически переделывает сайт для мобильных платформ и динамически загружает статьи с помощью технологии Ajax, поддерживая плавные переходы на сенсорных экранах устройств.
Чтобы посмотреть как будет выглядеть версия сайта адаптированная под мобильные платформы, нажмите в настройках плагина кнопку “Preview Theme”.
Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.
Мобильный плагин WP Mobile Detector
Плагин WP Mobile Detector автоматически определяет модель смартфона пользователя и в зависимости от этого загружает для него одну из выбранных вами тем. При этом тема сайта со стационарного ПК или ноутбука останется прежней. У вас может быть несколько различных тем для различных устройств. Также плагин WP Mobile Detector автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Плагин работает с более чем 5000 видов мобильных телефонов и смартфонов.
Плагин собирает статистику по мобильным пользователям, включая число уникальных посещений, поисковый трафик и т.д.
Задайте тему в настройках плагина, которая отобразится на мобильном.
Мобильный плагин WP Mobile Edition
Плагин WP Mobile Edition, как и WP Mobile Detector, определяет популярные мобильные устройства и показывает контент в том разрешении и качестве, которое необходимо конкретному мобильному телефону. WP Mobile Edition создает мобильную версию на поддомене вида m.facebook.com с индивидуальными настройками и перенаправляет всех мобильных пользователей на него. Это необходимо для ускоренного кэширования и поддержки мобильных cookie.
Также плагин поддерживает систему комментирования Disqus и мобильную карту XML с собственным генератором для сайтов, что положительно влияет на поисковую оптимизацию.
Сделайте основные настройки плагина и задайте функции темы.