CMS

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

Аватар
Автор IxMaster

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

Об авторе

Аватар

IxMaster

Добро пожаловать на мой ресурс. Рекомендую к прочтению категорию "отсебятина". Авторские статьи, которые помогут Вам 'управлять интернетом'. Пишу на самые разные темы для начинающих, а так же профессионалов в области вебмастеринга. Остальное ознакомительно качественный контент. Открыт для обсуждений.

Leave a Comment