Вот что мы будем сегодня разрабатывать.
Этап 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;
}На сегодня всё! Надеемся, что вам понравилась сегодняшняя статья. Если вы хотите скачать законченную версию шаблона, то просто кликните здесь.
Внимание! У вас нет прав для просмотра скрытого текста.
