Отмечая рост использования мобильных устройств, с конца апреля 2015 года Google наказывает веб-сайты, страницы которых не адаптированы для мобильных устройств. Следствие для вашего SEO, вам необходимо убедиться, что ваш сайт нормально отображается как на больших, так и на маленьких экранах.
В этой статье я покажу вам, как вы можете разместить свой сайт на странице, используя правило @media из CSS3.
Важно отметить, что термины «отзывчивый» и «мобильный совместимый» часто используются как синонимы, несмотря на различие в их реальном значении. Понимание того, что каждый из них означает, важно для обеспечения того, чтобы ваш веб-сайт соответствовал необходимым критериям для размещения всех размеров экрана.
Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге
Тогда давайте вернемся к тому, почему мы здесь.
Адаптивный и мобильный-совместимым
Сайты, которые не являются ни реагировать, ни-совместимый мобильный, одинаково отображаются на всех экранах, т.е. везде отображается версия для больших экранов. На экранах меньшего размера вам нужно прокручивать страницу по горизонтали, чтобы увидеть все их содержимое. На этих экранах сложно ориентироваться.
Откройте также эти Плагины 8 WordPress для настройки внешнего вида вашего сайта
Веб-сайт Mobile совместимы когда он соответствует строгому минимуму для просмотра на мобильных устройствах, что не делает его адаптивным веб-сайтом. Например, веб-сайт можно считать совместимым с мобильными устройствами, если вам не нужно перемещаться по горизонтали. В результате его элементы становятся маленькими и неразличимыми. Затем вы должны увеличить масштаб, чтобы прочитать его содержимое.
На их стороне сайты отзывчивый идеально адаптироваться к разным размерам экрана. Они переопределяют свои элементы, чтобы их можно было легко увидеть и использовать на небольших экранах. Это тот тип дизайна, который вам нужен для своего сайта.
Смотрите также наш Плагины 10 WordPress для создания формы бронирования на вашем сайте
Теперь вы знаете разницу между отзывчивым и совместимым мобильным. Теперь мы увидим правило @media CSS3, который позволяет вам обновить свой веб-сайт для адаптивного или довольно легко создать Темы WordPress с адаптивным контентом.
Правило @media из CSS3
Чтобы сделать вашу тему отзывчивой, вам понадобится правило @media CSS3. По сути, он позволяет вам определять стили, которые вы хотите использовать для определенного типа (размера) экрана. Вы будете использовать его как другое правило CSS (с фигурными скобками), за исключением того, что оно содержит другие правила CSS.
@media media-type (выражение) {css-test-selector {свойство1: значение1; свойство2: значение2; }}
В этой структуре элементы внутри правила @ СМИ только работа, когда добрейшей из-СМИ указано, что было успешно обнаружено. Тип выбранного носителя, вы можете указать характеристики с точки зрения размеров.
Откройте для себя Как применить интерфейс и пользовательский опыт к WordPress
Правило @media определяет для вас тип экрана, на котором посещается ваш веб-сайт, и выбирает правила, которые лучше всего подходят для этого типа экрана. Все основные браузеры уже интегрировали правило @media.
Вот список для вашей информации: Chrome , Safari , Firefox, IE, Opera et Edge.
Определите целевые экраны
Если вы хотите изменить WordPress тема существующий, пожалуйста, сделайте резервную копию CSS последнего, чтобы иметь возможность вернуться в случае необходимости.
Читайте также нашу статью о Как постепенно загружать комментарии Facebook и Disqus
Как мы видели в его структуре, чтобы определить тип экрана, вы должны переслать @media тип целевого экрана. Вот список различных типов экрана:
– Найти : для всех типов экранов или для размеров, указанных в выражение
– экран : для всех экранов, будь то мобильный, планшет, ноутбук или компьютер
– Распечатать : для принтеров, если вам нужны определенные стили для страниц, которые можно распечатать
– речь : для программ чтения с экрана, если вам нужны стили для слабовидящих.
Есть также операторы, которые можно поставить перед типом экрана; в качестве не для отображения стилей для экранов другого типа, отличного от указанного, или только применять стили только к указанным экранам. Таким образом, вы можете иметь:
@media только экран
Определите стили для размеров экрана
Вы можете использовать выражение чтобы предоставить более подробную информацию о характеристиках экрана. После @media входить и за которым следует выражение. Если вы используете несколько выражений, все они должны быть разделены и, Вот пример структуры:
@media only screen и (max-width: 640px) {selector-css-example {/ * Ваш обычный CSS здесь * /}}
В этом примере я использую макс-ширина со значением 640px. Это позволяет установить максимальную ширину экрана размером с iPhone или небольшой смартфон Android. С такой структурой вы можете контролировать, как ваш сайт будет выглядеть на разных устройствах. Вот список свойств, связанных с размерами, которые вы можете использовать в выражение :
Узнайте также наш Плагины 8 SEO WordPress для оптимизации SEO вашего сайта
– mв-ширине et макс-ширина : соответственно минимальная и максимальная ширина, необходимая для отображения стилей, содержащихся в правиле @media, Еще один пиксель и стили не отображаются.
– mв высоту et макс высота : соответственно минимальная и максимальная высота, необходимая для отображения стилей, содержащихся в правиле. @media, Поскольку большинство экранов предназначены для вертикального развертывания страниц, свойства мин-высота et макс высота мало используются.
Вот список размеров экрана для некоторых терминалов:
– IPhone: 640px
- IPad: 1024 пикселей
- Планшеты: 1366 пикселей
- Смартфон Android: 640 пикселей, 720 пикселей, 854 пикселей, 960 пикселей
- Android очень большой: 1024px, 1066px
- Windows Phone: 480
- Windows phone большой: 768 пикселей
- молодые и старые: 320 пикселей
- Ультрабук / ноутбуки: 1366 пикселей
- Настольные компьютеры и телевизоры: 1920 пикселей
Есть много других свойств, которые вы можете использовать в выражение. Например, если вы ориентируетесь на настольные компьютеры или телевизионные экраны, способные отображать изображения с соотношением сторон 16: 9, вы можете использовать такую структуру:
@media only screen и (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Ваш обычный CSS здесь * /}}
Для получения более полных списков и примеров обратитесь к w3schools et Mozilla Developpers.
Протестируйте адаптивную функциональность вашего сайта
Когда вы изменяете или строите свой WordPress тема или в конце, если вам нравятся сюрпризы, вы должны проверить результат, чтобы увидеть, отвечает ли он наконец. Помните, что Google отслеживает веб-сайты, которые не отвечают.
Смотрите также эти 10 WordPress плагины для создания вкладок в вашем блоге
При отсутствии всех мобильных устройств, на которые вы нацеливаетесь, существует (к счастью для наших фондовых бирж) большое количество инструментов, позволяющих увидеть, как ваш веб-сайт адаптируется к различным экранам.
Непосредственно в браузере вашего компьютера вы можете использовать Окно Resizer браузер Chrome Extension, ResponsiveResize, ResizeMe ou Firesizer, Ниже приведено изображение BlogPasCher в представлении адаптивного дизайна, которое по умолчанию поставляется с Firefox.
Есть также сайты, посвященные этой задаче:
Особенность этого веб-сайта заключается в том, что вы можете самостоятельно выбрать размеры экрана. Имейте в виду, что этот веб-сайт загружает ваше изображение в рамке. Так что если ваш WordPress тема был разработан для того, чтобы не отображать его в рамке, поэтому вполне возможно, что он не будет отображаться здесь.
IPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Этот веб-сайт полезен для тестирования вашего веб-сайта на новейших устройствах Apple, iPad и iPhone. Просто введите свой URL. Обратите внимание, что у него та же проблема с кадром, что и у responseivepx.
На этом веб-сайте вы можете протестировать свой на маленьких экранах и на старых моделях телефонов, которые вы выбираете в правой части экрана. Вы также можете настроить некоторые свойства экрана.
Google Mobile Дружественные Test
Это один из самых важных тестов, если не самый важный. Просто введите свой адрес в строку и нажмите Анализировать чтобы начать тест. После теста инструмент отображает отчет и оценку. Если тест окажется положительным, то тем лучше, Google не накажет вас.
Если вы не разработчик, советую список адаптивных тем WordPress чтобы начать.
Рекомендуемые ресурсы
Также откройте для себя другие рекомендуемые ресурсы, которые помогут вам лучше привлечь ваших партнеров и подписчиков, а также повысить безопасность вашего веб-сайта.
- Как создать пользовательские ссылки курсы по WordPress
- 5 WordPress плагины для добавления отзывов клиентов в ваш блог
- Как создать колесо фортуны для купонов на WooCommerce
- Откройте для себя лучшие предложения и купоны для вашего блога
Заключение
Вот ! вы знаете все, что нужно знать о том, как сделать свой сайт или тему WordPress адаптивными, используя правило @media из CSS3. Если мы пропустили тему WordPress, которая вам дорога или которую вы предпочитаете, оставьте ссылку в разделе Комментарии ниже.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Мы также приглашаем вас поделиться в ваших разных социальных сетях.
...
