На прошлой неделе мы исследовали jQTouch , фреймворк, который мы будем использовать для создания нашей мобильной темы WordPress. На этой неделе мы выберем, где остановились, и применим полученные знания для создания файлов тем, которые мы будем использовать для интеграции с темой WordPress. Давайте доберемся до этого!
Начиная с
Для начала мы будем использовать стандартную установку jQTouch, которую мы загрузили на прошлой неделе . Для простоты мы будем использовать как можно больше стандартных функций jQTouch.
Сначала скопируйте содержимое основного демонстрационного каталога (demos / main) и вставьте его в основную папку jQTouch :
Поскольку макет нашего блога будет работать очень похоже на эту демонстрацию, имеет смысл начать с этого момента. После того, как вы это сделаете, вам нужно будет обновить некоторые ссылки на файлы JS и CSS. Первые 60 строк вам больше не нужно беспокоиться. В основном это то, что заставляет jQTouch работать так, как оно работает. Замените начало файла этим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!doctype html>
<html>
<head>
<meta charset=»UTF-8″ />
<title>jQTouch β</title>
<style type=»text/css» media=»screen»>@import «../jqtouch/jqtouch.min.css»;</style>
<style type=»text/css» media=»screen»>@import «../themes/jqt/theme.min.css»;</style>
<script src=»../jqtouch/jquery.1.3.2.min.js» type=»text/javascript» charset=»utf-8″></script>
<script src=»../jqtouch/jqtouch.min.js» type=»application/x-javascript» charset=»utf-8″></script>
<script type=»text/javascript» charset=»utf-8″>
var jQT = new $.jQTouch({
icon: ‘jqtouch.png’,
addGlossToIcon: false,
startupScreen: ‘jqt_startup.png’,
statusBar: ‘black’,
preloadImages: [
‘../themes/jqt/img/back_button.png’,
‘../themes/jqt/img/back_button_clicked.png’,
‘../themes/jqt/img/button_clicked.png’,
‘../themes/jqt/img/grayButton.png’,
‘../themes/jqt/img/whiteButton.png’,
‘../themes/jqt/img/loading.gif’
]
});
// Some sample Javascript functions:
$(function(){
// Show a swipe event on swipe test
$(‘#swipeme’).swipe(function(evt, data) {
$(this).html(‘You swiped <strong>’ + data.direction + ‘</strong>!’);
});
$(‘a[target=»_blank»]’).click(function() {
if (confirm(‘This link opens in a new window.’)) {
return true;
} else {
$(this).removeClass(‘active’);
return false;
}
});
// Page animation callback events
$(‘#pageevents’).
bind(‘pageAnimationStart’, function(e, info){
$(this).find(‘.info’).append(‘Started animating ‘ + info.direction + ‘… ‘);
}).
bind(‘pageAnimationEnd’, function(e, info){
$(this).find(‘.info’).append(‘ finished animating ‘ + info.direction + ‘.<br /><br />’);
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$(‘#callback’).bind(‘pageAnimationEnd’, function(e, info){
if (!$(this).data(‘loaded’)) { // Make sure the data hasn’t already been loaded (we’ll set ‘loaded’ to true a couple lines further down)
$(this).append($(‘<div>Loading</div>’). // Append a placeholder in case the remote HTML takes its sweet time making it back
load(‘ajax.html .info’, function() { // Overwrite the «Loading» placeholder text with the remote HTML
$(this).parent().data(‘loaded’, true);
}));
}
});
// Orientation callback event
$(‘body’).bind(‘turn’, function(e, data){
$(‘#orient’).html(‘Orientation: ‘ + data.orientation);
});
});
</script>
|
После тега end script вы должны увидеть тег style. Здесь вы знаете, что можете остановиться.
Индексная страница
В этой части руководства мы не интегрируемся с WordPress. Скорее, мы создаем тему в обычном HTML, а затем привязываем ее к теме в следующем уроке. При этом нам нужно заменить содержимое индекса по умолчанию на реалистичное содержимое блога. Выделите все содержимое между тегами тела и удалите его. Теперь мы наполним его обратно контентом. На прошлой неделе мы рассмотрели все основные принципы jQTouch, поэтому все, что ниже, должно стать обзором:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<div id=»home» class=»current»>
<div class=»toolbar»>
<h1>Wordpress Site</h1>
<a class=»button slideup» id=»infoButton» href=»#about»>About</a>
</div>
<ul class=»rounded»>
<form>
<li><input type=»text» name=»search» placeholder=»Search» id=»some_name» /></li>
</form>
</ul>
<ul class=»rounded»>
<li class=»arrow»><a href=»blog.html»>Blog Articles</a> <small class=»counter»>12</small></li>
<li class=»arrow»><a href=»#pages»>Pages</a> <small class=»counter»>2</small></li>
</ul>
<h2>External Links</h2>
<ul class=»rounded»>
<li class=»forward»><a href=»http://feedproxy.com» target=»_blank»>Subscribe</a></li>
<li class=»forward»><a href=»http://twitter.com/connorzwick» target=»_blank»>Twitter</a></li>
<li class=»forward»><a href=»http://wordpress.com» target=»_blank»>Desktop Page</a></li>
</ul>
<ul class=»individual»>
<li><a href=»mailto:[email protected]» target=»_blank»>Email</a></li>
<li><a href=»http://tinyurl.com/supportcz» target=»_blank»>Donate</a></li>
</ul>
<div class=»info»>
<p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
</div>
</div>
<!— End home —>
<div id=»about» class=»selectable»>
<p><img src=»jqtouch.png» /></p>
<p><strong>Mobile Theme</strong><br />Version 0.1 beta<br />
<a href=»http://www.connorzwick.com»>By Connor Zwick</a></p>
<p><em>Push your content across more boundaries to all internet connected mobile devices<br /> using the world famous WordPress CMS and JQTouch.</em></p>
<p>
<a href=»http://twitter.com/connorzwick» target=»_blank»>@connorzwick on Twitter</a>
</p>
<p><br /><br /><a href=»#» class=»grayButton goback»>Close</a></p>
</div>
<!— end about —>
<div id=»pages»>
<div class=»toolbar»>
<h1>Site Pages</h1>
<a class=»back» href=»#»>Home</a>
</div>
<h2>Pages</h2>
<ul class=»rounded»>
<li class=»arrow»><a href=»#about»>About</a></li>
<li class=»arrow»><a href=»#history»>History</a></li>
</ul>
</div><!— End #pages —>
<div id=»about»>
<div class=»toolbar»>
<h1>Site Pages</h1>
<a class=»back» href=»#»>Home</a>
</div>
<h2>Pages</h2>
<ul class=»rounded»>
<li class=»arrow»><a href=»#edge»>About</a></li>
<li class=»arrow»><a href=»#plastic»>History</a></li>
</ul>
</div><!— End #about —>
<div id=»history»>
<div class=»toolbar»>
<h1>Site Pages</h1>
<a class=»back» href=»#»>Home</a>
</div>
<ul class=»rounded»>
<li><span class=»blog-title»>Post Title
<p class=»page-author»>By: <i>Connor Zwick</i></p>
<p class=»post»>This is a short description.
</ul>
</div><!— End #history —>
|
Как видите, мы добавили несколько меню, строки заголовка и даже загруженную AJAX страницу blog.html. Но все вышеперечисленное следует пересмотреть. Если вас это смущает, перечитайте пост прошлой недели.
Страница блога
С помощью jQTouch мы постарались сохранить как можно больше на начальной странице. Как видите, мы сделали это по большей части выше. Но для блога это не очень реалистично, потому что блог будет постоянно обновляться, и почти во всех случаях было бы очень неэффективно загружать все посты блога на одну страницу. Вот почему для пункта меню блога мы ссылались не на элемент привязки на той же странице, а на новый HTML-файл. Тем не менее, jQTouch будет легко загрузить это на сайт.
Эта страница блога будет списком всех последних статей блога. Итак, что мы хотим на этой странице?
- Описание блога
- Заголовки сообщений
- Автор сообщения
- Опубликовать отрывок
- Дата публикации
Так что в значительной степени основы. Мы собираемся обернуть каждый пост в неупорядоченный список, а затем элемент списка. Чтобы сделать сайт немного более красочным и графически привлекательным, мы также отформатируем дату так, чтобы она напоминала тренд календарной даты. Если вы не знаете, о чем я говорю, посмотрите ниже или превью с поста на прошлой неделе. Нам также нужно будет добавить немного пользовательских стилей, поэтому мы добавим несколько классов. Как это:
|
1
2
3
4
5
6
7
|
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
|
Это не самое семантическое использование списков, но оно станет более понятным через секунду. При разработке этой темы у нас возникает дилемма. У нас ограниченное пространство на экране, поэтому мы можем либо сжимать записи в блоге, чтобы пользователи могли видеть больше, либо мы можем расширить их, как указано выше, и дать читателям лучшее представление о том, о чем этот пост. Или мы могли бы сделать это просто, и сделать оба. В этой теме мы покажем 5 расширенных сообщений, как указано выше, а затем мы покажем 5 заголовков сообщений только ниже. Мы можем добиться этого с помощью простого меню:
|
1
2
3
4
5
6
7
8
|
<h1>More Posts:</h1>
<ul class=»rounded»>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
</ul>
|
Собираем страницу блога вместе
Теперь нам просто нужно соединить две части выше и поместить их на страницу jQTouch. Нам не нужно ссылаться на файлы JS или CSS на странице блога. Думайте о странице блога как о PHP, если вы знакомы с PHP. В противном случае, думайте о jQTouch как о получении контента, а затем о его вставке прямо в главную страницу указателя. Это весь файл blog.html:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<div id=»blog»>
<div class=»toolbar»>
<h1>Blog</h1>
<a class=»back» href=»#»>Home</a>
</div>
<div class=»info»>
This is a short description of blog.
</div>
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
<ul class=»rounded»>
<li><a class=»blog-title» href=»#livetest»>Post Title</a><br />
<div class=»month»>Jun</div>
<div class=»date»>30</div>
<p class=»post-author»>By: <i>Connor Zwick</i></p>
<p class=»post-description»>This is a short description.
</ul>
<h1>More Posts:</h1>
<ul class=»rounded»>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
<li><a href=»#livetest»>Post Title</a></li>
</ul>
</div>
<div id=»livetest»>
<div class=»toolbar»>
<h1>Events test</h1>
<a class=»back» href=»#»>AJAX</a>
<a class=»button goback» href=»#home»>Home</a>
</div>
<div class=»info»>
This would be where the post would go.
</div>
</div>
|
Пользовательский стиль
Теперь я уже упоминал ранее, что нам нужно будет добавить несколько пользовательских CSS для форматирования страницы блога. Этот урок не сфокусирован на основах CSS, поэтому я предполагаю, что вы знаете основы. При этом я расскажу о любом CSS3, который мы используем, что, к сожалению, очень мало. Только радиус границы, что довольно очевидно. Мы используем border- [top / bottom] — [left / right] -radius, чтобы придать календарю круглые углы:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
.blog-title{
border-bottom: 1px solid #333333;
}
span.blog-title{
color: #fff;
width: 100%;
display: block;
padding-bottom: 10px;
}
.post-description, .post-author{
font-size: 12px;
margin-left: 75px;
}
.post-author{
margin-bottom: 3px;
}
.post, .page-author{
font-size: 13px;
color: #fff;
margin-bottom: 5px;
}
#blog .rounded li{
position: relative;
}
.month{
position: absolute;
width: 70px;
text-align: center;
background: #aa3939;
color: #f5f2f2;
line-height: 28px;
padding-bottom: 5px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.date{
position: absolute;
width: 70px;
margin-top: 25px;
font-size: 40px;
text-align: center;
background: #f5f2f2;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
|
Проверьте это
Если все прошло гладко, у вас должен быть рабочий сайт! Мы также рассмотрели тестирование в предыдущем уроке, но в качестве обзора я буду использовать официальный симулятор Apple iPhone. Чтобы запустить симулятор, вам нужно скачать iOS SDK в центре разработчиков Apple. Для загрузки SDK необходимо сначала зарегистрироваться в качестве разработчика для iPhone (регистрация бесплатна), и вам потребуется Mac с ОС OS X Snow Leopard. У вас нет Mac или вы не хотите регистрироваться в качестве разработчика iPhone? Не беспокойтесь, вы можете следить почти за любым другим браузером, но ваши результаты могут быть менее точными, чем у меня (будем надеяться, что никто не читает это, все еще работает IE6).
Идите вперед и откройте iPhone Simulator или ваш браузер по вашему выбору. Если у вас установлен Xcode и iOS SDK, вы можете просто найти «Симулятор» в центре внимания, чтобы найти приложение.
Мы сделали на сегодня!
Теперь, когда мы создали HTML-код для этой темы, все, что нам нужно сделать, это превратить его в тему WordPress, и у нас есть готовая мобильная тема! Не стесняйтесь поиграть с демонстрационными файлами и настроить то, что мы сделали сегодня для вашего собственного сайта.