Вверх

Как создать тему WordPress для мобильного телефона, с JQuery Mobile

JQuery Mobile — разработан командой jQuery, специально для сенсорных веб фреймворков (так же известных как мобильный фреймворк). Разработка jQuery Mobile была сфокусирована в сторону смартфонов и планшетов. JQuery Mobile так же совместим с остальными мобильными фреймворками.

Этот инструмент позволяет вам создавать мобильные веб-сайты и веб-приложения. В этом уроке я покажу вам, как создать мобильную тему для wordpress.

Примерно вот это, мы получим в конце:

И так, начнем.

ШАГ 1 : Скачивание файлов

Мы бы могли создать тему с нуля, но в этом нет необходимости, так как есть то, что сможет вам с этим помочь и поможет сэкономить уйму времени. И то, что мы будем использовать, это пустая тема wordpress. Тема работоспособна, за исключением того, что в ней не установлены стили — установлены только самые необходимые. Вот так она выглядит:

ШАГ 2: Верхний и нижний колонтитулы

Так как мы собираемся использовать JQuery, то нам нужно его подключить. Как подключать JQuery решать вам: вы можете скачать JQuery и JQuery Mobile по ссылке http://jquery.com/download/ или подключить его с онлайн сервиса http://code.jquery.com/.

Я буду использовать 2 вариант, а именно подключи Query и JQuery Mobile с онлайн сервиса.

Откройте header.php вашей темы, и вставьте следующий код между тегами и : 

 Теперь файлы jQuery подключены. Но это еще не все. И так как jQuery Mobile использует HTML5, вам нужно изменить тип документа. Замените первые 6 строк файла header.php, на: 

Затем найдите тег , и замените все от тега до самого конца, следующим:

Этот простой код будет вставлять колонтитул бар к нашей теме и кнопку, которая будет прокручивать страницу до заголовка, когда пользователь нажмет на нее. А вы заметили атрибут data-icon? Он позволяет указать, вид значка. В данном случае, это стрелка вверх, но это не единственная иконка которую можно использовать, их много.

ШАГ 3: Домашняя страница

Теперь, немножко изменим главную страницу нашего сайта. Для того чтобы построить мобильную тему — много фантазии не требуется. По этому, давайте выведем на главной странице сайта, список последних сообщений. Чтобы сделать это, откройте index.php вашей темы, найдите цикл(loop), и замените его следующим: 

Сохраните файл и посмотрите что получилось: Здорово правда? Теперь у нас есть список последних записей… хорошо выглядящий список последних записей, с красивыми эффектами перехода, без использования для этого JavaScript. Это магия JQuery Mobile) .

Теперь изменяем циклы в single.php и page.php файлах вашей темы, как мы это делали для index.php.

ШАГ 4: single.php и page.php файлы

По умолчанию single.php и page.php файлы выглядят уже хорошо в нашей мобильной теме, так что, мы можем их не трогать. Хотя, мы можем кое-что сделать для улучшения вида: Спрятанные комментарии по умолчанию и показать комментарии при нажатии. Это легко делается с помощью JQuery Mobile.

Открываем comments.php, находим 15 строчку и вставляем перед

…, эту строчку: 

Потом найдите строчку 31 и прямо перед

).

Теперь комментарии отображаются: по умолчанию — скрыты и при нажатии — открыты. Если вы не хотите чтобы они были скрыты, то удалите атрибут data-state=»collapsed».

ШАГ 5 : Реализация поиска

Прямо сейчас, наша тема полностью оптимизирована под мобильные устройства, но отсутствует кое-что важное: Легкий доступ к панели поиска. Открываем searchform.php и заменяем содержимое файла, кодом: 

 Вот эта строчка выводит форму поиска: 

 Мы ее уже вставили, когда заменяли содержимое header.php, так-что поиск уже должен работать.

ШАГ 6: Последний штрих

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

Вот и все! Я надеюсь вам понравилось и вы без проблем разберетесь в этом уроке.

А здесь вы можете скачать готовую тему WordPress для мобильного телефона, с JQuery Mobile

1 бал2 бала3 бала4 бала5 балов (Рейтинга нету)
Загрузка...
     Вызвать мастера :)
Скопировать короткую ссылку

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: