< Awilum />: Мобильная тема для Template CMS c jQuery Mobile

В этой статье расскажу, как сделать мобильную тему для Template CMS
c jQuery Mobile :)

Есть вот такой сайт:

Необходимо сделать тему с jQuery Mobile и если вход был совершен с мобильного устройства, то загружать эту тему.

Первое - это надо научить Template CMS определять мобильное устройство.
Подключаем к движку класс Mobile_Detect.zip

для этого в index.php пишем:

include("Mobile_Detect.php");
$detect = new Mobile_Detect();

* Mobile_Detect.php - находится в корне.

Чтобы загружать мобильную тему, в index.php заменяем

loadTemplate('themes/'.getSiteTheme(false).'/'.getTemplate().'Template.php');

на вот такую проверку:


if($detect->isMobile()) {                        
$current_theme = 'mobile';
loadTemplate('themes/mobile/'.getTemplate().'Template.php');
} else {
loadTemplate('themes/'.getSiteTheme(false).'/'.getTemplate().'Template.php');            
}

Теперь осталось сделать мобильную тему :)

Создаем папку mobile в папке themes

Для этого сайта я сделаю два индивидуальных шаблона:
1.homeTemplate.php - Главная страница мобильного сайта. На ней будут отображаться разделы - менюшка.
2.indexTemplate.php - Шаблон по умолчанию для всех страниц сайта.

Макет homeTemplate.php

Макет indexTemplate.php

И так начинаем с homeTemplate.php

Начинаем:

<!DOCTYPE html>
<html lang="en">
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<?php getSiteName();echo ' - ';getTitle();?>
</title>
<meta name="description" content="<?php getDescription(); ?>" />
<meta name="keywords" content="<?php getKeywords(); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="icon" href="<?php getSiteUrl(); ?>favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php getSiteUrl(); ?>favicon.ico" type="image/x-icon" />     
<?php runHook('theme_header'); ?>

Затем подключаем jQuery и jQuery Mobile


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Далее необходимо каждой ссылке, которая рисуется менеджером менюшек Template CMS добавить класс: ui-link-inherit

Сделать это можно так:

<script>
  $('#menu > li > a').addClass('ui-link-inherit');
</script>

Теперь сама страница:


<div data-role="page">
<div data-role="header">
    <h1><?php getSiteName(); ?></h1>
</div>

<ul data-role="listview" data-filter="false" id="menu">
    <?php getSiteMenu('mainmenu'); ?>            
</ul>         

<div data-role="footer">            
    <h1><?php runHook('theme_footer'); getCopyright(); ?></h1>
</div>   
</div>

В шапке выводим название сайта. В футере копирайты и хук для плагинов. А так же выводим список разделов-менюшку.

Все :) Главная страница готова.
Полный исходный код шаблона homeTemplate.php:


<!DOCTYPE html>
<html lang="en">
<head>        
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php getSiteName();echo ' - ';getTitle();?></title>
<meta name="description" content="<?php getDescription(); ?>" />
<meta name="keywords" content="<?php getKeywords(); ?>" />
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="icon" href="<?php getSiteUrl(); ?>favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php getSiteUrl(); ?>favicon.ico" type="image/x-icon" />                        
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<?php runHook('theme_header'); ?>
<script>
$('#menu > li > a').addClass('ui-link-inherit');
</script>
</head>
<body>        
<div data-role="page">
<div data-role="header">
    <h1><?php getSiteName(); ?></h1>
</div>

<ul data-role="listview" data-filter="false" id="menu">
    <?php getSiteMenu('mainmenu'); ?>            
</ul>         

<div data-role="footer">            
    <h1><?php runHook('theme_footer'); getCopyright(); ?></h1>
</div>   
</div>    
</body>
</html>

Шаблон indexTemplate.php будет отличаться только телом. Вот так он будет выглядеть между тегами body:


<div data-role="page">
<div data-role="header">
    <h1><?php getSiteName();echo ' - ';getTitle();?></h1>            
    <a class="ui-btn-right jqm-home" data-iconpos="notext" data-icon="home" href="<?php getSiteUrl(); ?>" data-direction="reverse" title="Home" data-theme="f">Home</a>            
</div>

<div data-role="content">
    <div>
        <?php runHook('theme_pre_content'); ?>
    </div>

    <div>
        <?php getContent(); ?>
    </div>

    <div>
        <?php runHook('theme_post_content'); ?>
    </div> 
</div>

<div data-role="footer">
    <h1><?php runHook('theme_footer'); getCopyright(); ?></h1>
</div>   
</div>

Простая, стильная, мобильная тема для Template CMS готова :)

Далее можете ее украшать как пожелаете. Сайт по jQuery Mobile вам в помощь: http://jquerymobile.com/

Скачать класс: Mobile_Detect.zip
Скачать мобильную тему: mobile.zip

Мобильная тема для Template CMS c jQuery Mobile

Комментариев нет: