8) Улучшенная система оценок
Существует система отзывов и оценок от реальных покупателей. Благодаря ей повышается уровень доверия со стороны пользователей к магазину.
9)Удобный и понятный пользовательский интерфейс
Он позволит пользователям легко разобраться со структурой магазина. Интерфейс админ-панели рассчитан на рядового пользователя, поэтому не должно возникнуть проблем при настройке сайта или добавлении контента. Для этого не нужно быть программистом или айтишником.
2.4 Выбор инструментов разработки
Для удобства разработки буду применять инструметы, представленные ниже. Все они распространяются бесплатно.
FileZilla -- один из лучших бесплатных FTP-менеджеров, который поможет скачать и загрузить файлы с FTP-серверов. Программа обладает удобным и приятным интерфейсом, присутствует множество поддерживаемых языков, а также разнообразие настроек и возможностей. Доступна для разных операционных систем, существует portable версия, которую вы можете установить на флэш-диск, кроме того, удобна для обновления файлов на хостинге.
WinSCP- это графический клиент SFTP (SSH FileTransferProtocol) для Windows с открытым исходным кодом. Он также поддерживает [устаревший] протокол SCP (SecureCopyProtocol). Предназначен для защищённого копирования файлов между компьютером и серверами, поддерживающими эти протоколы.
VisualStudioCode -- редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.
XAMPP -- кроссплатформенная сборка веб-сервера (развитие LAMP), содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер.
Для удобной разработки на PHP буду использовать trial версию среды разработки PHPStorm, которая предоставляется бесплатно на 30 дней.Данная среда позволяет редактировать код, написанный на языках PHP, HTML, JavaScript и CSS. В ней присутствуют: автоматическое дополнение кода, поддержка стандартов оформления кода, автоматизированные средства рефакторинга. Имеется возможность анализа кода на лету, которая помогает предотвратить ошибки в коде, присутствует интеграция с системами управления версиями. Еще одна очень полезная функция этой среды - возможность удаленного развертывания приложений и автоматической синхронизация с использованием FTP, SFTP, FTPS и др. протоколов.
У PHPStorm имеются бесплатные лицензии для образовательных учреждений и для проектов с открытым исходным кодом.
Веб-страница сайта будет формироваться динамически с использованием языка разметки гипертекста HTML и скриптового языка PHP. Стилевое оформление содержимого будет выполнено с использованием каскадных таблиц стилей CSS.
3. РАЗРАБОТКА САЙТА
3.1 Подготовительные работы и настройка CMS
Сайт разрабатывается на арендованном пространстве на одном из хостингов. Он предоставляет одно бесплатное доменное имя. Используем его для нашего сайта. Благодаря инструментам хостинга, можно за несколько действий установить выбранную систему управлением содержимым с автоматическим созданием базы данных со всеми необходимыми таблицами, необходимыми для работы системы в штатном режиме.WordPress, как и многие другие движки, работает с бесплатно распространяемой системой управления базами данных MySQL, которая также предоставляется хостингом.
Для того, чтобы сайт заработал, нужно произвести установку Wordpress. Для этого в панели управления хостинга, в разделе установки приложений нужно выбрать его, указать каталог, в который необходимо установить и нажать на кнопку установки. Таким простым образом произойдет установка движка. Чтобы сайт был доступен в сети Интернет с адресом технического домена, нужно произвести установку именно в его каталог.
После завершения установки, будут выставлены настройки WordPress по умолчанию. Также сайт сразу станет доступным из сети Интернет по адресу технического домена, а оформление сайта будет в стандартном стиле - при заходе на сайт будет отображаться простой шаблон.
Как упоминалось ранее, на официальном сайте WordPress можно найти множество бесплатных шаблонов для сайта под различные нужды. Необходимо определить требования к внешнему виду и скачать понравившийся из предоставленных.
Для осуществления возможности ведения каталога с программными продуктами и оформления заказа в режиме онлайн, потребуется установить плагин WooCommerce, возможности которого были описаны ранее. Чтобы его установить нужно в панели управления сайтом WordPress перейти в раздел управления плагинами и нажать на кнопку установки нового плагина. Произойдет переход в каталог доступных для установки плагинов, среди которых можно найти нужный нам WooCommerce и нажать на кнопку установки. Через несколько минут должно показаться уведомление об успешной установке плагина, после чего его необходимо активировать, нажав на кнопку активации. В процессе установки WooCommerce произойдет начальная настройка, которая касается типа товаров (например, виртуальный или скачиваемый), способов доставки и оплаты и так далее. Таким же способом нужно произвести установку всех необходимых плагинов.
Также сразу нужно произвести настройку Wordpress в панели управления, которая касается названия и описания сайта, настроить вид, в котором будут формироваться единые указатели ресурса (URL) и множество других настроек.
Как упоминалось ранее, разработка сайта будет происходить в среде PHPStorm, а благодаря имеющейся возможности удаленного развертывания приложений исходные файлы будут храниться сразу на хостинговом пространстве. Автоматическая синхронизация позволяет обновить файлы на хостинге с учетом их изменений в среде разработки с использованием протокола FTP. Таким образом можно сразу увидеть все изменения. На мой взгляд, такой подход гораздо удобнее, так как позволяет тратить намного меньше времени на перенос файлов, чем при ручном копировании через файловые менеджеры.
Всё, что требуется, это настроить подключение к сайту по FTP , при создании проекта из существующего кода. После чего PHPStorm скачает с сайта содержимое, которое будет редактироваться.
Чтобы настроить проект с подключением по FTP нужно выполнить рад шагов:
1) Пристартесредывыбратьпункт «Сreate new project from existing files»;
2) Выберитепунктсозданияпроектапоследующемусценарию: Web server is on remote host, file are accessible via FTP/SFTP/FTPS;
3) Настроить имя проекта и путь к локальной папке, где будет находиться сайт на компьютере. Параметры Deployment можно оставить по умолчанию;
4) На данном шаге требуется заполнить следующие поля: Name - Имя проекта, Type - Тип подключения (combobox), FTP host - адреса сайта в интернете, либо по IP-адресу, Port - порт в стеке протоколов TCP/IP, через который будет происходить подключение, Username - имя пользователя, который подключается, Password - пароль подключающегося пользователя и Webserverroot URL - Корневой URL сайта;
5) Выбрать папку на хостинге, которая подлежит редактированию;
6) Нажать «Finish».
Это была подготовка перед вёрсткой и программированием. Перейдем их реализации.
3.2 Верстка, программирование и внедрение в CMS
На данном шаге происходят чисто техническая работа. Происходит верстка дизайна сайта и внедряется в CMS. В результате выполнения всех предыдущих этапов получим полностью рабочий сайт, но без какого-либо наполнения.
При разработке шаблона для сайта будет использоваться технология WordPress под названием «Дочерняя тема» [5]. Это тема расширяет функционал другой темы, называемой родительской темой, и позволяет изменять или дополнять функционал родительской темы. Чтобы создать дочернюю тему нужно: создать новую папку, положить в неё соответствующим образом написанный файл style.css. После этого можно изменить дочернюю тему меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.
Дочерняя тема размещается в своей собственной папке внутри папки wp-content/themes. Она может содержать как style.css, так и дополнительные файлы, относящиеся к теме: style.css (обязательно), functions.php (опционально), файлы шаблона (опционально) и другие файлы (опционально).
style.css - единственный необходимый файл в дочерней теме. Он обеспечивает информационный заголовок, по которому WordPress опознает дочернюю тему, и он заменяет style.css родительской темы. Информационный заголовок файла style.css созданной дочерней темы изображен на рисунке 4.1.
Рисунок 4.1 - Заголовок файла style.css дочерней темы
Часть после закрывающего */ используется как обычный файл стилей. Здесь пишутся правила стилей, которые будут применены WordPress, пи этом, файл стилей дочерней темы полностью заменяет файл стилей родительской темы.
Файл functions.php дочерней темы не заменяет собой соответствующий файл родительской темы, а загружается в дополнение к нему, позволяя изменять функционал родительской темы. Преимущество в том, что при следующем обновлении родительской темы, написанные функции в файле functions.php сохранятся.
Дочерняя тема может заменить любой родительский файл шаблона просто создав файл с таким же именем. Эта особенность WordPress позволяет изменять файлы шаблонов родительской темы без непосредственного их редактирования, так что все изменения сохранятся при обновлении родительской темы.
В дополнение к файлам style.css, functions.php и файлам шаблонов дочерняя тема может использовать любые типы файлов полноценных тем, если они правильно подключены. Например, дочерняя тема может использовать иконки и изображения, которые подключены в файле стилей, файлы JavaScript, дополнительные PHP файлы, вызываемые из шаблонов или functions.php.
В качестве примера изменения функционала шаблона через файл functions.php можно привести добавление блока социальных кнопок от Яндекса. Технология называется «Поделиться». Она предоставляет разработчикам возможность разместить блок различных социальных кнопок, которые помогут посетителям сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах. Пример кода показан на рисунке 4.2, а пример отображения на сайте показан на рисунке 4.3.
Рисунок 4.2 - Пример добавления социальных кнопок на сайт
Рисунок 4.3 - Отображение социальных кнопок на сайте
Данный код позволяет выводить кнопки социальных сетей на страницах после текста любой записи (новости или описании товара). Встроенная в WordPress функция add_filter() позволяет применить новую функцию к уже имеющейся. Новая на вход получает данные, которые могут быть отфильтрованы в ней и возвращены в нужном виде. Например, перед выводом текста на экран, при получении его из базы данных, можно «на лету» изменить (отфильтровать) этот текст и вывести на экран уже измененный вариант текста. И благодаря фильтру для этого нам не придется редактировать функцию вывода в файлах движка, а можно подключиться к функции вывода через файл шаблона, использовав заранее предусмотренный разработчиками фильтр.
3.3 Описание структуры модулей сайта
Простая web-страница WordPress состоит из трех основных блоков: заголовок (header), контент и подвал (footer). Очень часто требуется четвёртый блок - боковая панель. Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.
Заголовок содержит всю информацию, которая должна быть наверху сайта внутри тега <head>. Это могут быть теги <doctype>, <meta>, ссылки на таблицы стилей, открытый тег <body> и видимый заголовок сайта (название сайта, навигационное меню, логотип, описание сайта и так далее).
Блок контента содержит записи и страницы сайта.
Боковая панель содержит меню навигации и дополнительную информацию сайте.
Подвал содержит информацию, которая находится в самом низу страницы, например, ссылки на остальные страницы или категории сайта, авторские права, контактную информацию и тому подобное. Обычно, эту часть сайта заключают в тег <footer>.
Точкой соединения является файл index.php, который вызывает другие файлы. Чтобы включить заголовок, боковую панель и подвал, нужно вызвать функции get_header(), get_sidebar() и get_footer(), при этом сами файлы должны быть названы header.php, sidebar.php и footer.php соответственно.
Чтобы показать записи и страницы сайта (и настроить их внешний вид) нужно в файле index.php запустить цикл WordPress между вызовами файлов заголовка и подвала. Пример такого цикла изображен на рисунке 4.4.
Рисунок 4.4 - Пример цикла, который выводит записи на страницу
Этот пример отображает каждую запись с заголовком, который используется в качестве постоянной ссылки к записи, временем публикации и содержимым. Если записей не существует, то будет выведено сообщение «Извините, записей еще не существует.».
Схема основных файлов шаблона представлена на рисунке 4.5.
Рисунок 4.5 - Схема подключения файлов шаблона
На данной схеме можно увидеть следующие файлы:
· index.php - это базовый файл-шаблон. Он отвечает за отображение главной и отображение других типов страниц, если нет соответствующего шаблона для них;
· page.php - файл отвечает за формирование статичных страниц. Обычно это страницы: контакты, об авторе, о ресурсе и так далее;
· category.php - файл отвечает за отображение анонсов в категориях (если файла нет, то формирование осуществляется за счет файла index.php);
· archive.php - файл отвечает за вывод страниц: рубрики, метки, архивы по датам, архивы по авторам, пользовательские таксономии и архивы пользовательских типов записей;
· home.php - это шаблон для главной страницы. Его отличие от index.php в том, что он работает только на главной и не заменяет другие типы страниц.;