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 вашей темы, и вставьте следующий код между тегами
и :|
1 2 3 |
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> |
Теперь файлы jQuery подключены. Но это еще не все. И так как jQuery Mobile использует HTML5, вам нужно изменить тип документа. Замените первые 6 строк файла header.php, на:
|
1 2 3 |
<! DOCTYPE HTML> <html> <head> |
Затем найдите тег
, и замените все от тега до самого конца, следующим:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body <?php body_class(); ?>> <div data-role="page" data-theme="b" id="jqm-home"> <div data-role="header"> <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Назад</a> <h1><?php bloginfo('name'); ?></h1> </div> <div data-role="content"> <!--форма поиска--> <?php include('searchform.php'); ?> <!--форма поиска--> Теперь сохраняем header.php и открываем footer.php. Заменяем его содержимое, на: </div><!-- data role content--> <div data-role="footer" class="ui-bar"> <a href="#" onclick="$.mobile.silentScroll(0)" data-role="button" data-icon="arrow-u">На верх</a></div> <?php wp_footer(); ?> </div><!-- data role content--> </body> </html> |
Этот простой код будет вставлять колонтитул бар к нашей теме и кнопку, которая будет прокручивать страницу до заголовка, когда пользователь нажмет на нее. А вы заметили атрибут data-icon? Он позволяет указать, вид значка. В данном случае, это стрелка вверх, но это не единственная иконка которую можно использовать, их много.
ШАГ 3: Домашняя страница
Теперь, немножко изменим главную страницу нашего сайта. Для того чтобы построить мобильную тему — много фантазии не требуется. По этому, давайте выведем на главной странице сайта, список последних сообщений. Чтобы сделать это, откройте index.php вашей темы, найдите цикл(loop), и замените его следующим:
|
1 2 3 4 5 6 |
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile;endif ?> </ul> <?php include (TEMPLATEPATH . '/inc/nav.php' ); ?> |
Сохраните файл и посмотрите что получилось: Здорово правда? Теперь у нас есть список последних записей… хорошо выглядящий список последних записей, с красивыми эффектами перехода, без использования для этого JavaScript. Это магия JQuery Mobile) .
Теперь изменяем циклы в single.php и page.php файлах вашей темы, как мы это делали для index.php.
ШАГ 4: single.php и page.php файлы
По умолчанию single.php и page.php файлы выглядят уже хорошо в нашей мобильной теме, так что, мы можем их не трогать. Хотя, мы можем кое-что сделать для улучшения вида: Спрятанные комментарии по умолчанию и показать комментарии при нажатии. Это легко делается с помощью JQuery Mobile.
Открываем comments.php, находим 15 строчку и вставляем перед
…, эту строчку:
1
<div data-role="collapsible" data-state="collapsed">
Потом найдите строчку 31 и прямо перед
|
1 |
<div data-role="collapsible" data-state="collapsed"> |
).
Теперь комментарии отображаются: по умолчанию — скрыты и при нажатии — открыты. Если вы не хотите чтобы они были скрыты, то удалите атрибут data-state=»collapsed».
ШАГ 5 : Реализация поиска
Прямо сейчас, наша тема полностью оптимизирована под мобильные устройства, но отсутствует кое-что важное: Легкий доступ к панели поиска. Открываем searchform.php и заменяем содержимое файла, кодом:
|
1 2 3 4 5 |
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get"> <div data-role="fieldcontain"> <input type="search" name="s" id="search" value="" /> </div> </form> |
Вот эта строчка выводит форму поиска:
|
1 |
<?php include('searchform.php'); ?> |
Мы ее уже вставили, когда заменяли содержимое header.php, так-что поиск уже должен работать.
ШАГ 6: Последний штрих
Даже если мы уже сделали тему и она прекрасно будет работать на мобильных устройствах, все же есть еще много всего, что можно было бы сделать для улучшения внешнего вила и функциональности. Например, поле поиска получилось слишком большим, по этому вставив следующий стиль в style.css, мы исправим эту проблему:
|
1 2 3 |
.ui-input-search{ width:80% !important; } |
Вот и все! Я надеюсь вам понравилось и вы без проблем разберетесь в этом уроке.
А здесь вы можете скачать готовую тему WordPress для мобильного телефона, с JQuery Mobile
Загрузка...
