Для начала вспомним всё то, о чём говорилось в предыдущих главах. Вы ознакомились с различными вариантами адаптации сайта к мобильным устройствам и выбрали один из двух более правильных вариантов. Так же в случае выбора варианта с поддоменом вы создали этот поддомен, заказали для него сертификат и установили код для переадресации мобильных устройств (см. главу 3).
Важный момент! Для варианта с поддоменом на период "реконструкции" сайта крайне желательно сделать одностраничный сайт-заглушку, на который будет временно переключаться данный поддомен. Это нужно для того, что бы поисковые системы не индексировали ещё не полностью готовые мобильные страницы. Представьте себе, что вы подключили поддомен к сайту; что произойдёт? Его тут же начнут индексировать поисковики, в результате чего они получат страницы, которые не соответствуют требованиям, а соответственно, они не будут признаны мобилопригодными. Что бы этого не произошло, поддомен должен быть подключен к сайту-заглушке.
Как сделать сайт-заглушку
Ничего сложного в таком сайте нет. Это простейшая html-страница, выводящая рисунок с текстом типа "скоро по этому адресу будет открываться ..." или "ведутся технические работы, мобильная версия сайта будет доступна ...". В результате в папке сайта-заглушки у вас окажется всего два файла: image.jpg и index.php, содержащий примерно такой код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow" />
<title>Технические работы</title>
</head>
<body style='margin: 0;'>
<img src='/image.png' style='width: 100%; margin: 0;'>
</body>
</html>
Метатег <meta name="viewport" ...> сообщает браузеру о том, что необходимо адаптировать страницу к дисплею мобильного устройства и обеспечивает правильное соотношение между пикселями. Метатег <meta name="robots"...> запрещает индексацию страницы роботами поисковых систем. Тег <title> выводит название страницы в строку браузера. Для тега <body> установлен атрибут style='margin: 0;', удаляющий отступы по краям. Для тега <img>, выводящего изображение, так же необходим стилевой атрибут.
Установите эту "заглушку" а прилинкуйте к ней мобильный поддомен. После выполнения основных работ поддомен можно будет прилинковать к основному сайту и провести окончательную настройку и "работу над ошибками". А пока можно заняться шаблоном сайта.
Изменение шаблона
Посмотрите на общую схему того, что должно получиться после изменения обычного "стандартного" шаблона:
Схема достаточно наглядно объясняет, что необходимо сделать, поэтому сразу переходим к коду.
За основу возьмём шаблон, применяемый для стандартного сайта с одной модульной колонкой, расположенной справа, т.е. именно как на сайте, который вы сейчас просматриваете, и сделаем этот шаблон "два в одном", т.е. универсальным для всех устройств. Этот код применяется для CMS Joomla, а пользователи других систем могут применить тот же принцип в соответствии со своими системами.
Внимание! Весь приведённый в этой главе код является примером и не предназначен для копирования на сайт! Подробно о разработке шаблона читайте в Части 2 Учебных материалов.
Настоятельно рекомендуется перед реконструкцией сделать либо копию файла index.php шаблона, либо полную копию сайта.
В самом начале шаблона код одиноков для обоих версий; его задача - создать необходимые переменные, получить нужные данные, подключить файлы и библиотеки:
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
JHtml::_('bootstrap.framework');
JHtml::_('bootstrap.loadCss', true, $this->direction);
Пока всё довольно стандартно. А вот далее следует код "переключателя", подставляющего нужный шаблон; этот код зависит от используемого варианта.
Динамическая вёрстка:
if (preg_match('регулярное_выражение1', $_SERVER['HTTP_USER_AGENT']) || preg_match('регулярное_выражение2', substr($_SERVER['HTTP_USER_AGENT'], 0, 4))) {
мобильный шаблон
} else {
десктопный шаблон
}
Код регулярных выражений вы можете скачать в главе 3.
Мобильная версия:
if ($_SERVER['SERVER_NAME'] == 'ваш_домен') {
десктопный шаблон
} elseif ($_SERVER['SERVER_NAME'] == 'm.ваш_домен') {
мобильный шаблон
}
Обратите внимание на то, что здесь шаблоны расположены в другом порядке!
Не забывайте, что все части кода на PHP должны быть правильно оформлены в начале и конце, например:
<?php } else { ?>
Итак, основной "каркас" файла создан, теперь нужно вставить вставить сами шаблоны.
Десктопный шаблон
Здесь ничего менять не нужно: просто вставляйте уже имеющийся код своего шаблона, например:
// код для компьютеров и ноутбуков
$doc->addStyleSheet(JUri::base().'/templates/имя_шаблона/css/style.css');
$doc->addStyleSheet(JUri::base().'/templates/system/css/system.css');
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="..." lang="..." dir="..." ><head> <!-- head -->
<jdoc:include type="head" />
</head><body> <!-- body -->
<header id="header">
<div class="logo"> <!-- логотип -->
<img src="/images/Site.png" alt="текст" title="имя сайта" />
</div>
<jdoc:include type="modules" name="header" style="xhtml" />
</header><nav id="main_menu"> <!-- главное меню -->
<jdoc:include type="modules" name="main_menu" />
</nav><section role="main" id="main_section"> <!-- head -->
<section class="content"> <!-- section content -->
<?php if($this->countModules('top-content')) { ?> <!-- Модульная позиция - TOP CONTENT -->
<div class="top-content"><jdoc:include type="modules" name="top-content" style="myxhtml" /></div>
<?php } ?><article> <!-- ОСНОВНОЙ КОНТЕНТ -->
<jdoc:include type="component" style="xhtml" />
</article><?php if($this->countModules('bottom-content')) { ?> <!-- Модульная позиция - BOTTOM CONTENT -->
<div class="btm-content"><jdoc:include type="modules" name="bottom-content" style="myxhtml" /></div>
<?php } ?></section>
<?php if($this->countModules('right')) { ?> <!-- Правая модульная колонка -->
<aside class="rigth"><jdoc:include type="modules" name="right" style="myxhtml" /></aside>
<?php } ?></section>
<footer id="footer"> <!-- FOOTER -->
<div class="copyright"><jdoc:include type="modules" name="footer" /></div>
</footer>
</body>
</html>
Обратите внимание: в самом начале подключаются файлы CSS, соответствующие типу шаблона. Тоже самое будет сделано и в мобильном варианте, но файлы для него будут применены другие (см. схему), поэтому пока просто пропишите их в шаблоне, а в следующей главе эти файлы будут созданы:
// код для мобильных устройств
$doc->addStyleSheet(JUri::base().'/templates/ваш_шаблон/css/style-m.css');
?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="..." lang="..." dir="..." ><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<jdoc:include type="head" />
</head><body>
<header id="header">
<div class="logo"> <!-- Логотип сайта -->
<img src="/images/Site-m.png" alt="текст" title="текст" />
</div>
<jdoc:include type="modules" name="header" style="xhtml" />
</header><div class='m-menu' style='overflow-x: scroll; width: 100%; margin-top: -3px;'> <!-- MOBIL MENU -->
<nav id="mobil_menu"><jdoc:include type="modules" name="mobil_menu" /></nav>
</div><section class="content-m"> <!-- section content -->
<?php if($this->countModules('top-content')) { ?> <!-- TOP CONTENT -->
<div class="top-content"><jdoc:include type="modules" name="top-content" style="myxhtml" /></div>
<?php } ?><article> <!-- Основной контент -->
<jdoc:include type="component" style="xhtml" />
</article><?php if($this->countModules('bottom-content')) { ?> <!-- BOTTOM CONTENT -->
<div class="bottom-content"><jdoc:include type="modules" name="bottom-content" style="myxhtml" /></div>
<?php } ?></section>
<footer class='mob-footer'> <!-- FOOTER -->
<div class="copyright"><jdoc:include type="modules" name="footer-m" /></div>
</footer>
</body>
</html>
Не забудьте в конце поставить закрывающую скобку "переключателя"!
<?php } ?> <!-- переключатель desktop/mobile (закрывающая скобка) -->
Теперь подробно разберём отличия мобильного шаблона.
В начале, как и положено, подключается файл (или файлы) CSS, соответствующий данной версии: style-m.css ; об этом подробно читайте в следующей главе.
Далее идут стандартные DOCTYPE и HEAD. Обратите внимание на наличие в мобильной версии метатега
<meta name="viewport" content="width=device-width, initial-scale=1">
Без этого метатега мобильное устройство не сможет нормально отображать контент! Если страница не отражается правильно, то скорее всего вы просто забыли его вписать!
Далее шаблоны во многом схожи - выводят body, header, главное меню, основной контент с модульными позициями над и под контентом и т.д.; основная разница состоит в отсутствии в мобильной версии модульных колонок (в данном примере - правой) и установке в качестве главного меню другого модуля - mobil_menu вместо main_menu (об этом так же читайте в следующей главе). Кроме того, обратите внимание на применение разных изображений для логотипа: Site.png и Site-m.png ; как и применение различных таблиц CSS, это позволяет создавать красивое оформление страниц.
Так же важным отличительным моментом является наличие в блоке <div>...</div> для главного меню наличие строки
style='overflow-x: scroll; width: 100%;'
Это позволяет сделать прокручиваемое меню с любым количеством пунктов.
При желании можно создать ещё одно меню (mobil_menu_2), которое визуально будет идти второй строкой в общем блоке, что очень удобно во всех отношениях.
Для мобильной версии на поддомене понадобиться вставить в оба шаблона дополнительные элементы <link>, влияющие на правильную индексацию и выдачу страниц; об этом подробно читайте в главе 5.
Вот, в принципе, и всё!
Теперь осталось создать и настроить новые таблицы CSS, модуль нового меню и возможно сделать что-то ещё для удобства использования сайта. Этому будет посвящена следующая глава.
