Web-разработка, WordPress скин на jQTouch для мобильных устройств
Posted on June 6, 2011Задумал как то раз один мой знакомый программу под iPhone. Какие функции выполняет программа и что он собирается с ней делать после того как задумал – это тайна:) Может она супер-секретная, а может просто он деловой человек и не хотел тратить дополнительное время на рассказы. И поэтому видимо решил этот знакомый написать для неё хелп. Так как работы с iPhone и программирования под iPhone он остерегался, как и любой правильный разведчик, а доступный и открытый WordPress любил как русский человек, то придумал он такую вещь: Разработать веб-сайт для этого хелпа на WordPress, который подружить с Iphone посредством плагина jQuery – jQTouch, т.е. просто создать для этого тему для блога jQTouch.
За пару часов он создал кастом меню из страниц хелпа в админке вордпресс Appearance => Menus – Menu_help
Вот такое короткое тз получилось для меня:
Прикрутить скин JqTouch: http://www.jqtouch.com/preview/demos/main/#home
Входная страница – корневая страница Меню. См. «Внешний вид» – «Меню», там я создал для примера структуру меню с корневой страницей “Iphone help”
В заголовке шаблона – название страницы, как оно задано в меню.
Под заголовком – список дочерних рубрик. Справа цифра – число подрубрик в этой дочерней рубрике.
Под списком рубрик, внизу страницы – контент текущей страницы (без заголовка). Контент выводится в оформлении, как в шаблоне показан текст «Add this page to your home screen…».
Соответственно, при клике на дочернюю рубрику показывам аналогичную страницу: заголовок, список подрубрик, контент страницы. И плюс в верхнем правом углу кнопка возврата назад, на кнопке – заголовок родительской страницы.
Тема пока получилась всего из 4х файлов не считая файлов jQTouch
functions.php (зарегистрировано Menu_help)
<?php<br />
if ( function_exists( 'register_nav_menu' ) ) {<br />
register_nav_menu( 'Menu_help', 'Menu Help' );<br />
}<br />
?>
header.php
<!doctype html><br />
<html><br />
<head><br />
<meta charset="<?php bloginfo( 'charset' ); ?>" /><br />
<title><?php wp_title();?></title></p>
<style type="text/css" media="screen">@import "<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jqtouch.css";</style>
<style type="text/css" media="screen">@import "<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/theme.css";</style>
<p> <script src="<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="<?php bloginfo( 'charset' ); ?>"></script><br />
<script src="<?php bloginfo('stylesheet_directory'); ?>/jqtouch/jqtouch.js" type="application/x-javascript" charset="<?php bloginfo( 'charset' ); ?>"></script><br />
<script type="text/javascript" charset="<?php bloginfo( 'charset' ); ?>">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black',
preloadImages: [
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/back_button.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/back_button_clicked.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/button_clicked.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/grayButton.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/whiteButton.png',
'<?php bloginfo('stylesheet_directory'); ?>/themes/jqt/img/loading.gif'
]
});</p>
<p> </script></p>
<style type="text/css" media="screen">
body.fullscreen #home .info {
display: none;
}
.info p {
text-align: justify;
}
</style>
<p> </head><br />
<body>
index.php
<?php get_header();?><br />
<?php<br />
$menu_name = 'Menu_help';<br />
if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {<br />
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );<br />
$menu_items = wp_get_nav_menu_items($menu->term_id);<br />
$menu_items1 = array();</p>
<p> foreach ( (array) $menu_items as $key => $menu_item ) {<br />
foreach ( (array) $menu_items as $dkey => $dmenu_item ) {<br />
if ($dmenu_item->menu_item_parent==$menu_item->ID) $menu_item->children[] = $dmenu_item;<br />
}<br />
$menu_items1[$menu_item->ID] = $menu_item;<br />
}<br />
$menu_items = $menu_items1;</p>
<p> foreach ( (array) $menu_items as $key => $menu_item ) {<br />
?></p>
<div id="<?=$menu_item->ID?>" <?php echo (($menu_item->menu_item_parent==0) ? "class=\"current\"" : "")?>></p>
<div class="toolbar">
<h1><?=$menu_item->title?></h1>
<p> <?php if ($menu_item->menu_item_parent>0) 
><a href="#" class="back"><?=$menu_items[$menu_item->menu_item_parent]->title?></a><?php endif;?>
</div>
<ul class="rounded">
<?php<br />
foreach ( (array) $menu_item->children as $dkey => $dmenu_item ) { ?></p>
<li class="arrow"><a href="#<?=$dmenu_item->ID?>"><?=$dmenu_item->title?></a> <?php if (count($dmenu_item->children)>0) ><small class="counter"><?=count($dmenu_item->children)?></small><?php endif;?></li>
<p> <?php<br />
}<br />
?>
</ul>
<p> <?php<br />
if ($menu_item->object=="page" || $menu_item->object=="post") {<br />
if ($menu_item->object=="page") $post = get_page( $menu_item->object_id );<br />
elseif ($menu_item->object=="post") $post = get_post( $menu_item->object_id );</p>
<p> $post->post_content = apply_filters('the_content', $post->post_content);<br />
$post->post_content = str_replace(']]>', ']]>', $post->post_content);</p>
<p> if (!empty($post->post_content)) {<br />
?></p>
<div class="info">
<?=$post->post_content?>
</div>
<p> <?php<br />
}}<br />
?>
</div>
<p> <?php<br />
}</p>
<p>}</p>
<p>?></p>
<p><?php get_footer(); ?>
footer.php
<?php wp_footer();?><br /> </body><br /> </html>
Tags: iPhone, jQTouch, jQuery, Wordpress
Categories: Wordpress