Html разметка
На рисунке 2.6 показано, как прототип разделен на блоки, которые являются каркасом страницы.
Рисунок 2.6 Прототип дизайна в виде блоков
Блок body – тело страницы html. Он охватывает весь остальной контент.
Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств.(htmlbook.ru).
Блок <div class="all"> - выполняет функцию «внутренней обертки» для придания дополнительных свойств.
Блок <div class=”header”> - шапка сайта.
Блок <div class="menu"> - навигационное меню сайта.
Блок <div class="content"> - контент страницы.
Блок <div class="slider"> - часть блока контента – ротатор изображений(слайдер).
Блок <div class="call"> - блок «он-лайн» заказа.
Блок <div class="block_left"> - блок частичного вывода информации о компании со ссылкой на страницу «О компании».
Блок <div class="block_right"> - Блок частичного вывода отзывов со ссылкой на страницу «Отзывы».
Блок <div class=”footer”> - «подвал» сайта.
Интеграция в систему управления
После того, как закончена HTML- верстка шаблонов, приступают к интеграции сайта с системой управления контентом. CMS устанавливается на хостинг (процесс установки CMS Wordpress описан в приложении). Затем создаются страницы и рубрики. После чего создаются шаблоны страниц и перемещается верстка html. Так же вставляются нужные плагины. Далее будет описан пошаговый процесс интеграции сайта в систему управления контентом.
Создание страниц и рубрик
Существуют рубрики, записи и страницы. Рубрики формируют списки записей. Все это необходимо добавить в меню. Главная страница – текстовая, отзывы – текстовая, новости – рубрика.
Настраиваем меню в соответствии с нашей структурой:
Рисунок 2.7. Структура меню сайта
Добавляем нужные страницы, определяя их тип: страница, произвольный тип или рубрика.
Установка необходимых плагинов
Плагины являются инструментом расширения функциональности WordPress. Ядро WordPress спроектировано небольшим, для максимальной гибкости и минимум раздутия кода. Плагины предлагают пользовательские функции и особенности так, что каждый пользователь может адаптировать их к своему сайту и к своим конкретным нуждам.
Необходимые плагины:
для отображения последних комментариев на главной странице
плагин ротатора баннеров(с подписями)
Создание папки с темой
Создадим папку с темой и переместим туда необходимые файлы.
Создаём тему Б.А.М. и создаем 3 файла:
Style.css - идентифицирует тему
Примечание:
Сверху в style.css указываем
/*
theme name : bam – задает имя темы.
/*
Index.php – может быть пустым, главное, чтобы он был, так как wordpress без него не будет отображать содержимое сайта.
Functions.php – используется для хранения функций.
Примечание:
functions.php располагается в папке темы и загружается каждый раз, во время просмотра внешней части сайта, в админ-панели и даже во время AJAX запросов. Практически нет случая, когда functions.php, будет не подключен.
functions.php необходим для того, чтобы расширить функциональность темы и только для этого. В этот файл нужно добавлять всякий код, который нужен для шаблона непосредственно, но не для сайта в целом.
functions.php не должен выводить на экран никакой текст (HTML код или другой контент). Вывод текста допускается только внутри функции, которые в дальнейшем будут использоваться в шаблоне.
После создания папки с темой выбираем тему в панели администрирования:
Рисунок 2.8. Тема сайта
Теперь весь сайт будет подчиняться оформлению нашей темы.
Шаблоны для каждой отдельной страницы
WordPress использует шаблоны для генерации динамических страниц. Можно управлять отображением содержания путем редактирования шаблонов с помощью инструмента Редактор шаблонов и Теги шаблонов.
Следующие базовые файлы также будут присутствовать в теме:
Page.php – страница услуги(просто текст по центру)
Category.php – страница рубрики(для блога)
Single.php – страница записи(выводит краткую запись)
Кастомные(пользовательские) шаблоны – для страниц, которые отличаются от стандартных:
Mainpage.php
Review.php
Contacts.php
В каждом из них сверху прописываем:
<?php
/*
template name: Главная
/*
?>
Файл с данной записью будет восприниматься как шаблон, и при редактировании страницы, этот шаблон можно будет выбрать через панель администрирования. Так мы поступаем со всеми страницами, а потом переносим в них верстку соответствующих страниц.
Блок он-лайн заказа
Рассмотрим подробнее создание блока, который поможет владельцам сайта автоматизировать процесс бронирования заказов.
Создание форм несколько отличается от верстки страницы. Дело в том, что у полей ввода есть особенность: введенные данные должны будут обрабатываться посредством языка PHP, который в нашем случае будет нести функцию формирования сообщения и его отправки администратору автомойки.
Для того, чтобы создать форму необходимо прописать тег:<form> необходимые поля</form>.
У полей <input> ввода данных есть атрибут name – имя. Обработчик формы написан на языке php и вызывается с проименением ajax - обращение к серверу без перезагрузки страницы. После подтверждения формы, данные из формы формирует собой супер-глобальный массив $_POST, в котором у нас есть объекты. Из полей ‘name’ и других изымаются данные, задаются переменные, чтобы сформировать сообщение. Отправка происходит с помощью функции mail. Указываем в поле $to = ‘send@send.smsc.ru’ – служба отправки сообщений. $headers – заголовок письма, тип документа, от кого, кодировка utf- 8. $msg= ‘забронировал’.’name’. ‘тема’.
If (mail(…))
Return true
Else
False
Теперь начинается яваскрипт.
$(".booking button").click(function(e) {
e.preventDefault();//отменяется действие по умолчанию
$item = $(this);
$form = $item.closest('form');
$(this).replaceWith("<span class='msg'>Бронируем...</span>");
$.ajax({
type: 'POST',// тип запроса
url: '/wp-content/themes/palace/booking.php',//ссылка на обработчик
data: $form.serializeArray(),//все данные формируются в массив
success: function(data) {
if (data === "true") {
$(".msg").fadeOut("fast", function() {
$(this).before("<span class='msg'>Спасибо! Мы с Вами свяжемся для уточнения заказа</span>");
});
}
}
});
});
Так настраивается модуль он-лайн заказа через админ-панель:
Рисунок 2.9. Редактор формы: шаблон формы.
Так задаем адресата:
Рисунок 2.10. Редактор формы: адресат.
А так задаются сообщения о доставке:
Рисунок 2.11. Редактор формы: сообщение об отправке.
Рисунок 2.12. Внешний вид форму заказа записи и звонка
Подобным образом формируются формы заказа звонка, заполнения бланка вакансии и анкета для получения карты клиента. Меняется лишь получатель.