4 способ улучшить мобильную версию темы WordPress

Статья написана:
  • WordPress
  • Обновлено: июль 29, 2013

Мобильная версия WordPress

Давайте посмотрим правде в глаза, мобильные устройства становятся все более популярными. Просмотр рабочего стола больше не растет, он фактически уменьшается, а мобильный быстро растет со всеми этими удивительными смартфонами и таблицами.

Согласно Net MarketShare, мобильные устройства представляют 10% от общего сетевого трафика. Это большая фигура, и она еще больше в некоторых нишах и странах. Но главное здесь - особое внимание, которое требуют мобильные устройства из-за ограниченного пространства экрана и того факта, что мобильные соединения обычно медленнее, чем подключение к рабочему столу.

Многие темы WordPress реагируют, но вы знаете, у нас всегда будет место для улучшений. Итак, здесь мы увидим технологии 4 и способы их использования, чтобы улучшить работу мобильных устройств для ваших пользователей.

#1 Ol 'Типы носителей

Несколько лет назад, когда IE5.5 и IE6 считались живыми, мобильные браузеры только начали выскакивать (и Opera была, безусловно, лучшей), и люди начали понимать, что вещи просто ломаются, так как телефоны тогда просто не могли обрабатывать простые вещи, такие как CSS (не говоря уже о JS, flash и т. д.).

Таким образом, создание полностью разделенного мобильного сайта было единственным вариантом, когда типы медиа пришли, чтобы спасти нас. Идея была простой, вы могли бы сказать браузеру, если файл, который вы предоставляете, - это «продвинутые» правила CSS (для настольных компьютеров) или простые правила CSS (для карманных компьютеров или печати). Синтаксис прост:

<link rel = "stylesheet" href = "handheld.css" type = "text / css" media = "handheld" />

Это может быть хорошим вариантом для создания совершенно другого дизайна для вашего мобильного сайта. Но вы просто не должны его использовать.

Сначала типы носителей могут показаться хорошими, но простая проблема связана с современными смартфонами: отсутствие поддержки браузеров. Большинство основных игроков просто игнорировали такую ​​функциональность (например, яблоко)
Тогда медиа-запросы приходят, чтобы спасти нас.

#2 Media Queries и как реально улучшить мобильный опыт

Это, безусловно, самый популярный способ создания мобильной версии вашего сайта.

Вы можете настроить таргетинг на определенные точки в зависимости от размера браузера, размера экрана устройства, плотности пикселей (да, сетчатки!) И даже типов медиа.

Вот простой медиа-запрос:

@media (max-width: 700px) {body {background: red; }}

Это почти то же самое, что и программирование. IF «Ширина браузера - 700 или ниже», ТОГДА Msgstr "применить следующий CSS-код".

Ребенок Тема

Давайте создадим новую папку в ваших / themes и назовите ее 20Mobile. Я знаю, что двадцать двенадцать уже использует медиа-запросы, но мы здесь, чтобы учиться, не так ли?

Итак, создайте файл style.css и добавьте этот контент:

/ * Название темы: мобильная тема Шаблон: Twentytwelve * / @import url («../entytwelve / style.css»); @media handheld, только экран и (max-width: 767px) {nav ul {display: none;} nav select {display: block}}

Выше мы создали дочернюю тему CSS, а также добавили правило, предназначенное только для мобильных устройств, которое скроет главное меню и покажет выбор. Поэтому, если у вас есть меню в выборе, вы можете сэкономить много места, а не отображать его как элементы ul / li

#3 Extreme makeover с jQuery Mobile

jQuery mobile - это потрясающая структура, которая использует jQuery-функциональность для улучшения мобильного использования, с оптимизированными виджетами и элементами пользовательского интерфейса.

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

Но чтобы JQuery Mobile работал правильно в вашем блоге WordPress, вам нужно сначала вызвать мобильный скрипт jQuery. Возвращаясь к нашей дочерней теме, дублируйте файл header.php основной темы и добавьте эти строки в тег заголовка:

<link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src = "http://code.jquery.com /mobile/1.3.1/jquery.mobile-1.3.1.min.js "> </ скрипт>

Я должен упомянуть, что для коммерческих предложений вы должны использовать wp_enqueue _script, чтобы избежать дублирования библиотек на вашем сайте.
Теперь мы можем поиграть с почти любым элементом пользовательского интерфейса, который вы хотите. В jQuery mobile есть много виджета пользовательского интерфейса, которые вы можете использовать в теме, но давайте применим страницу и разборные панели.
Это основной синтаксис HTML:

<div data-role = «page»> <div data-role = «header»> </ div> <div data-role = «content»> </ div> <div data-role = «footer»> </ div> </ div>

С помощью этого кода вы создадите новую «страницу» и заголовок, контент и нижние области. Верхний и нижний колонтитулы фиксированы, и содержимое будет изменяться в зависимости от текущей страницы, поэтому вы можете сразу загрузить несколько страниц и просто скрыть их, назначив разные идентификаторы.
Это основной HTML для сменных панелей:

<div data-role = «collapsible-set»> <div data-role = «collapsible-set» data-collapsed = «true»> <p> Содержимое складной области </ p> </ div> </ div>

Это довольно просто реализовать цикл, не так ли? Ну, ваш код будет выглядеть так:

<div data-role = "collapsible-set"> <? while (have_posts ()) {...?> <div data-role = "collapsible" data-collapsed = "true"> </ div> <? ...}?> </ div>

Выбранное меню изменено

С кодом, который мы видели выше (в разделе медиа-запросов), вы можете скрыть свое обычное меню и показать специальное меню выбора. jQuery позволяет вам добавить его без большого кода PHP (честно говоря, нам вообще не нужен PHP). Давайте создадим новый файл и добавим сюда код:

jQuery (function ($) {// когда DOM готов $ (document) .ready (function () {// давайте создадим элемент select $ ("<select />").appendTo("nav"); / / С новой опцией перейдите к… $ («<option />», {«value»: «», «text»: «Перейти к…»}). AppendTo («nav select»);}); / / Теперь у нас есть созданный выбор, заполним его: $ ("nav .menu a"). Each (function () {// для каждой ССЫЛКИ, найденной в меню, var aux = $ (this); $ ("<option) /> ", {" value ": aux.attr (" href ")," html ": aux.text ();}). appendTo (" nav select "); // добавляем новый элемент в выборку)} ; // затем мы устанавливаем функциональность выпадающего меню для перенаправления при выборе нового элемента $ ("nav select"). change (function () {window.location = $ (this) .find ("option: selected"). val ();});});

Это создаст новое мобильное меню, но проблема в том, что мы загружаем jquery mobile даже в «нормальную» версию сайта. Вот почему мы можем использовать также несколько плагинов, которые помогут нам улучшить наш сайт.

#4 - Обертывание всего с помощью мобильного детектора

Этот потрясающий плагин создает новую функциональность, которая позволяет условно загружать темы в зависимости от пользовательского устройства. И он работает с простыми условными правилами, например:

<? php if (MobileDTS :: is ('android')) {....} elseif (MobileDTS :: is ('mobile')) {....} else {}?>

Метод MobileDTS проверяет текущее устройство и возвращает простое значение true / false. Затем мы можем использовать магическую функцию, называемую switch_theme (), для установки новой темы, и вы можете использовать условные обозначения плагина, такие как MobileDTS :: is_switcher_enabled (), например, для создания ссылки на настольную версию при использовании мобильных устройств.

Вывод

Итак, вы когда-нибудь использовали мобильные плагины или функции в своей теме WordPress? Какой метод вы предпочитаете? Не стесняйтесь и делитесь своими мыслями!

Статья Рочестера Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Присоединиться: