—»     —»   Создаем мобильную тему для Wordpress с помощью jQuery Mobile
  Раздел: Wordpress   Комментариев: 1  

Создаем мобильную тему для Wordpress с помощью jQuery Mobile



Совсем недавно была выпущена платформа jQuery Mobile. Данный инструмент позволяет с легкостью разрабатывать мобильные версии веб-сайтов и веб-приложений. В нашей сегодняшней статье мы расскажем вам о создании мобильной версии шаблона для Wordpress.

Вот что мы будем сегодня разрабатывать.

Создаем мобильную тему для Wordpress с помощью jQuery Mobile

Этап 1: подготовка файлов

Мы бы могли сделать шаблон с нуля, но зачем изобретать колесо, если существуют инструменты, позволяющие сэкономить уйму времени. Инструмент, которым мы сегодня воспользуемся, называется Blank Theme. Это функциональный шаблон Wordpress, но полностью без оформления. Таким образом, мы можем воспользоваться им в качестве стартовой точки в процессе разработки собственного шаблона. Например, мы обычно используем Black Theme для создания различных шаблонов.

Инструмент Black Theme был разработан Крисом Койиром (Chris Coyier), а скачать его можно отсюда. Скачайте одну копию и распакуйте её на собственном сервере. Отсюда мы и начнем. По желанию, откройте файл style.css и отредактируйте название шаблона.

Этап 2: файлы шапки и подвала

Так как мы собираемся разрабатывать шаблон, который будет в основном основан на jQuery, первое, что нам нужно сделать, это связать файлы jQuery и jQuery Mobile. Вы можете скачать файлы и связать их с шаблоном самостоятельно, а можете воспользоваться CDN от jQuery и привязать к шаблону онлайн-версию. Мы же предпочитаем привязывать шаблон к онлайн-версии, но вы можете делать по желанию.

Откройте файл header.php из директории Blank Theme и внесите туда следующий код для привязки jQuery Mobile. Он должен быть расположен между тегами «head» и «/head»:

<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, нам нужно отредактировать doctype. Замените первые 6 строчек кода следующим:

<!DOCTYPE html>
<html>
<head>

Далее прокрутите к концу файла, и найдите тэг «body». Замените всё от тэга body до самого завершения файла следующим:

<body <?php body_class(); ?>>
    <div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header">
            <h1><?php bloginfo('name'); ?></h1>
    </div>

        <div data-role="content">

Посредством предыдущего отрывка кода мы привязали к шаблону jQuery Mobile. Удивлены? Ведь мы не вписали ни строчки кода javascript! Это верно. jQuery Mobile не требует никакого кода javascript. Всё, что нам нужно, это несколько тэгов «div» с правильными атрибутами.

Т.е., взгляните на 3-ю строчку кода сверху. Заметили ли вы data-role="header"? Он описывает шапку. Если вы сохраните файл и посмотрите на наш шаблон, вы увидите, что шапка находится в верхней части страницы, а в ней расположено название вашего блога.

Теперь сохраняйте файл header.php и откройте footer.php. Замените его содержимое следующим:

        </div><!-- data role content-->

        <div data-role="footer" class="ui-bar">
            <a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
        <?php wp_footer(); ?>
    </div><!-- data role content-->
</body>

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

Этап 3: разработка домашней страницы

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

<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.

Список создан посредством использования атрибута data-role="listview" на неупорядоченном списке. Другие атрибуты определяют внешний вид списка. Хотите немного поэкспериментировать? Просто замените data-theme="c" на data-theme="b", и посмотрите, что произойдет.

Теперь, подправьте циклы в файлах search.php и archive.php так же, как мы сделали в index.php.

Этап 4: файлы записей и страниц

Файлы single.php и page.php в шаблоне Blank Theme по умолчанию выглядят отлично для нашей мобильной версии, так что нам можно даже не редактировать их. Хотя, мы можем сделать кое-что ради удобства: скрыть комментарии, и отображать их только если пользователь сам этого захочет. Это можно без труда реализовать посредством jQuery Mobile.

Откройте файл comments.php и найдите 15-ю строку. Вставьте следующую строку кода:

<div data-role="collapsible" data-state="collapsed">

Далее, перейдите к строке 31 и внесите закрывающий тэг «/div» прямо перед объявлением else. Сохраните файл и посмотрите на записи в шаблоне: теперь комментарии скрыты по умолчанию, а клик пользователя может отобразить их. Если вам хочется, чтобы комментарии по умолчанию были отображены, то просто уберите атрибут data-state="collapsed". Это всё, что нужно для того, чтобы сделать скрытый блок.

Заметили ли вы, что на заголовках сообщений есть кнопка «назад»? Клик по этой кнопке перенесет вас на главную страницу блога.

Этап 5: встраиваем поиск

Теперь у нас есть полностью готовый шаблон для мобильных устройств. Но мы упустили нечто важное: быстрый доступ к строке поиска. Откройте файл searhform.php и замените содержимое следующим кодом:

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
    <div data-role="fieldcontain">
        <input type="search" name="s" id="search" value="" />
    </div>
</form>

После того, как вы сохраните файл, снова откройте index.php и внесите туда форму поиска между функцией get_header() и неупорядоченный список, содержащий записи:

<?php include('searchform.php'); ?>

На нашей домашней странице теперь есть форма поиска. Теперь, наш шаблон полностью готов и мы можем использовать его для веб-сайта.

Этап 6: финальные штрихи

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

.ui-input-search{
    width:96% !important;
}

На сегодня всё! Надеемся, что вам понравилась сегодняшняя статья. Если вы хотите скачать законченную версию шаблона, то просто кликните здесь.

Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 6865   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 февраля 2012 @ 00:33
Написал: Alex — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Тут еще хороший пример создания RSS читалки, тоже на jqMobile http://jqmobile.ru/articles/11-rss-reader.html
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930