Знаете ли вы, что более половины посетителей вашего сайта, скорее всего, станут просматривать его на телефоне или планшете? В этом руководстве описаны основные действия, которые обеспечат пользователям удобство взаимодействия с сайтом на экране любого размера: от выбора адаптивной темы до тонкой настройки контента.
В этом руководстве
Появились вопросы?
Спросите помощника на базе ИИВыбор темы с поддержкой мобильных устройств для сайта WordPress имеет решающее значение для обеспечения удобного и оптимизированного взаимодействия с пользователями на различных устройствах, улучшения доступности сайта и повышения его рейтинга в поисковых системах.
Все темы WordPress.com адаптированы для мобильных устройств. Это означает, что они выглядят безупречно как в мобильных браузерах, так и на настольных компьютерах.
Если вы используете стороннюю тему, убедитесь, что в её описании значится адаптация к мобильным устройствам и что она правильно выглядит на таких устройствах. Ознакомьтесь с документацией по теме, чтобы узнать о возможностях настройки и параметрах, позволяющих управлять внешним видом темы на мобильном устройстве.
Выбрав тему, адаптированную к мобильным устройствам, вы, скорее всего, начнёте с замены контента по умолчанию на свой собственный. При редактировании сайта в редакторе WordPress необходимо обращать внимание на то, как сайт будет выглядеть на мобильных устройствах.
В WordPress нет отдельного «мобильного редактора». Изменения, которые вы вносите на сайте, будут отображаться и на мобильных устройствах, и на ПК. Если тема вашего сайта поддерживает мобильные устройства, контент будет адаптирован под все экраны — большие и маленькие. В этом и заключается понятие адаптивности.
Чтобы посмотреть, как сайт будет выглядеть для посетителей, нажмите значок Предварительный просмотр в правом верхнем углу редактора. Выберите Мобильный или Планшет, чтобы просмотреть в редакторе, как примерно будет выглядеть ваш контент.
Здесь речь идёт о приблизительном представлении, потому что многие элементы в редакторе обусловлены темой сайта. Стили темы не отображаются в редакторе. Они отображаются только при предварительном просмотре страницы в новой вкладке или при просмотре сайта в браузере устройства. Чтобы просмотреть контент с применёнными стилями темы, выберите опцию «Предварительный просмотр в новой вкладке».
После нажатия кнопки «Предварительный просмотр в новой вкладке» мобильную версию можно просмотреть с помощью инструмента проверки в браузере. Чтобы использовать режим проверки браузера для предварительного просмотра страницы или записи в мобильном режиме, выполните следующие действия.
- Нажмите значок предварительного просмотра в правом верхнем углу редактора WordPress.
- Выберите опцию «Предварительный просмотр в новой вкладке».
- Щёлкните правой кнопкой мыши на странице предварительного просмотра и выберите «Проверить» (Chrome, Firefox, Edge) или «Проверить элемент» (Safari).
- В режиме проверки в браузере нажмите значок мобильного устройства, чтобы переключить предварительный просмотр на вид для мобильных устройств.
После публикации изменений стоит открыть сайт на смартфоне или планшете, чтобы увидеть, как он выглядит для обычных посетителей, и убедиться в том, что его вид соответствует задуманному.
Вот несколько советов, как сделать дизайн сайта максимально адаптивным, обеспечив правильное представление контента на мобильных устройствах, планшетах и настольных компьютерах.
Если изображение содержит текст, на небольших экранах он может выглядеть обрезанным, например:
Это вызвано тем, что текст на изображении не обладает адаптивностью.
В редакторе WordPress можно размещать текст поверх изображения. Если вы добавите к изображению текст таким способом, он станет адаптивным. В следующем видео мы воссоздадим то же изображение, что и выше, с помощью блока «Обложка», чтобы продемонстрировать, как оно адаптируется к небольшим экранам.
Чтобы повысить адаптивность размера шрифтов на странице, используйте единицы em или rem вместо пикселей (px). Если размер шрифта задан в пикселях, это значение будет жёстко закреплено, и шрифт будет одинаково отображаться на экранах любых устройств, независимо от их размера. Напротив, em и rem представляют собой относительные единицы размера шрифта, который может увеличиваться или уменьшаться в зависимости от того, сколько доступного пространства имеется на экране.
Вместо текстового меню в мобильной разметке можно настроить блок «Навигация» для отображения мобильного меню, которое называется наложенным меню (а также «меню-гамбургер» или «меню-кебаб»). Эта функция позволяет сделать заголовок компактнее, а меню — удобнее для просмотра и использования на мобильных устройствах.
В некоторых блоках есть опция «Друг под другом на мобильных устройствах», которая позволяет эффективнее использовать пространство на небольших экранах. Если элементы контента отображаются на экране ПК в ряд, на экранах меньшего размера они станут располагаться один под другим, что упростит чтение сайта пользователям мобильных устройств.
Параметр «Друг под другом на мобильных устройствах» доступен в следующих блоках:
Кнопки и меню будут легче читаться на устройствах меньшего размера, если текст станет занимать несколько строк.
Опция «Разрешить перенос по строкам» доступна в настройках разметки следующих блоков:
- Блок «Кнопки»
- Блок «Кнопки «Поделиться»»
- Блок «Навигация»
- Блок «Значки соцсетей»
- Блок «Комментарии»
- Блоки «Строка» и «Друг под другом»
AMP (Accelerated Mobile Pages) — это сторонняя платформа с открытым исходным кодом, которая позволяет создавать веб-сайты, мгновенно загружаемые на мобильные устройства, что обеспечивает посетителям сайтов более быстрый просмотр страниц. Чтобы добавить AMP на сайт, можно установить плагин AMP. На сайтах WordPress.com с поддержкой плагинов, созданных до 13 июня 2022 года, плагин AMP устанавливался по умолчанию.
Имейте в виду, что AMP лишает ваш сайт большого количества функций (в частности, удаляет макет и другие элементы), что позволяет посетителям быстро загружать сайт на мобильных устройствах. Лучше всего использовать AMP только в темах, при создании которых это было предусмотрено. Все темы на WordPress.com уже адаптированы к мобильным устройствам, поэтому AMP для оптимизации не требуется.
Если при отображении сайта, где установлен плагин AMP, возникают проблемы, рекомендуем деактивировать плагин, чтобы понять, не влияет ли он на работу сайта. Если на вашем сайте отображается опция «Выйти из мобильной версии», которую вы хотите полностью удалить, также деактивируйте плагин AMP.
Если плагин AMP долгое время работал на вашем сайте, имейте в виду, что результаты поиска Google не обновляются моментально и страницы AMP будут демонстрироваться ещё некоторое время после деактивации плагина. После деактивации AMP можно настроить перенаправление страниц. Поисковые системы будут индексировать URL-адреса страниц AMP, и им потребуется некоторое время, чтобы удалить эти URL-адреса из своих списков. Это означает, что некоторые посетители увидят на мобильных устройствах страницу ошибки 404.
Есть несколько популярных и бесплатных плагинов перенаправления на выбор. После настройки 301 Redirect, вам, вероятно, понадобится выражение Regex, аналогичное /(.*)\/amp. Рекомендуем провести проверку, чтобы убедиться, что вы правильно настроили переадресацию, и ознакомиться с инструкциями к плагину переадресации.
Поддержка 