Блок контента содержит записи и страницы сайта.

Боковая панель содержит меню навигации и дополнительную информацию сайте.

Подвал содержит информацию, которая находится в самом низу страницы, например, ссылки на остальные страницы или категории сайта, авторские права, контактную информацию и тому подобное. Обычно, эту часть сайта заключают в тег <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 в том, что он работает только на главной и не заменяет другие типы страниц.;

· single.php - файл, отвечающий за вывод каждой отдельной записи темы;

· category-{id}.php - файл отвечает за отображение рубрик;

· author.php - файл отвечает за отображение анонсов статей определенного автора (если файла нет, то формирование осуществляется за счет файла index.php);

· date.php - файл отвечает за вывод страницы архива по дате;

· search.php - файл, отвечающий за отображение страницы поиска;

· 404.php - отвечает за отображение страницы с 404 ошибкой.

Также в шаблон могут быть добавлены необязательные файлы для упрощения внесения изменений:

· comments.php - файл отвечает за отображение комментариев у шаблона;

· searchform.php - файл отвечает за формирование формы поиска;

· attachment.php - файл отвечает за вывод прикрепленного файла;

· taxonomy.php - файл отвечает за отображение анонсов на страницах таксономии (если файла нет, то формирование осуществляется за счет файла index.php);

· tag.php - файл отвечает за отображение анонсов на странице тегов (если файла нет, то формирование осуществляется за счет файла index.php);

Также в index.php подключается файл style.css в котором содержатся таблицы стилей всего шаблона.

3.4 Наполнение сайта

Без текста и фотографий сайт имеет достаточно условную ценность. Сайт наполняется предоставленной заказчиком информацией, а именно: описанием программных продуктов "1C: Предприятие», программного комплекса "Стек+ЖКХ",изображениями и описанием услуг, предоставляемых компанией.

Чтобы добавить товар на сайт, нужно в панели управлениякликнуть на раздел «Товары» и выбрать пункт «Добавить новый». После этого откроется страница с формой для создания нового товара как на рисунке 4.6.

Рисунок 4.6 - Форма добавления нового товара

На форме можно заполнить следующие сведения о товаре:

· Название товара;

· Описание товара;

· Категория товара;

· Нужно отметить, что товар скачиваемый, что позволяет размещать на сайте программные продукты;

· Цену товара;

· Изображение товара;

· Метки товара;

· И несколько другие полей не актуальных для данного случая.

После ввода всей необходимой информации нужно начать на кнопку «Опубликовать» и данный товар станет доступным для просмотра посетителям на сайте. Пример отображения товара на сайте можно увидеть на рисунке 4.7.

Рисунок 4.7 - Пример отображения товара на сайте

В дальнейшем, чтобы заказчик смог сам добавлять статьи и товары, можно предоставить ему инструкцию по работе с CMS. Также все материалы лучше всего отдать на написание профессиональному копирайтеру, т.к. этот текст будут читать клиенты и он ляжет основой на репутацию заказчика в интернете.

В результате выполнения всех предыдущих этапов получим полностью рабочий сайт, наполненный информацией и товарами, но не протестированный на наличие дефектов. Внешний вид полной версии главной страницы можно увидеть на рисунке 4.8, а мобильной версии - на рисунке 4.9.

Рисунок 4.6 - Внешний вид полной версии главной страницы сайта

Рисунок 4.9 - Внешний вид мобильной версии главной страницы сайта

4. ТЕСТИРОВАНИЕ

Тестирование сайта - один из важных этапов, после которого, заказчику предоставляется готовый проект без ошибок, с хорошей читабельностью, воспринимаемой легкостью, удобством и надежностью.

Работу движка WordPress уже протестировали его разработчики. Поэтому тестирование сводится к сверке функционала и внешнего вида разработанного сайта с требованиями в техническом задании. Проверяются на работоспособность все интерактивные элементы. К ним относятся ссылки, формы и так далее. Если в процессе тестирования выявляются ошибки, они подлежат исправлению, и повторной проверке. Это продолжается до тех пор, пока проект не будет соответствовать техническому заданию.

4.1 Описание видов тестирования сайта

Начнем с проверки всех текстов на правописание. Каждый текст, выложенный на сайте, должен соответствоватьорфографическим и пунктуационным правилам, должны быть строго соблюдены грамматические и лексические нормы. Это касается всего текстового контента: заголовки страниц, текст новостей, описание товаров, надписи на кнопках и пр.

Следующим шагом протестируем производительность. Она позволяет определить, насколько сайт устойчив к нагрузкам, как быстро загружаются его страницы и как варьируются показатели в зависимости от браузеров и типов устройств. Размер страниц сайта не должен быть слишком большим, а скорость загрузки обязана быть максимальной. От того, насколько быстро загружается сайт, во многом зависит его посещаемость.

Необходимо проверить как выглядит сайт на мобильных устройствах. Количество мобильного интернет-трафика постоянно увеличивается, а это значит, что современный сайт должен легко открываться на планшетах и смартфонах разных моделей. Кроме того, верстка сайта должна подходить под разные форматы - важно, чтобы пользователи могли прочитать всю информацию со своих мобильных устройств.

Функциональное тестирование сайта. Этот этап подразумевает тестирование функций сайта, которые должны присутствовать в обязательном порядке, а именно:

· работа форм, нацеленных на захват данных посетителей (пример: обратный звонок, отзыв и так далее);

· поиск (соответствие результатов и адекватность работы);

· проверка ведущих на другие страницы гиперссылок, аудит на наличие неправильных ссылок;

· контроль соответствия размещенной текстовой и графической информации, предоставленной заказчиком.

Проверка интеграции с социальными сетями. Перед запуском сайта необходимо проверить все социальные кнопки и убедиться, что они ведут на нужные страницы.

Тестированиекроссбраузерности позволяет проверить корректность отображения сайта в разных браузерах и их версиях.

Выполнив проверку сайта со всех сторон, необходимо сделать правки кода, если таковые имеются.

4.2 Результаты тестирования

После проведения разносторонних проверок сайта, не было выявлено никаких дефектов.

Орфографических и пунктуационных ошибок в текстах обнаружено не было.

Сайт корректно отображается в различных браузерах, а именно: Яндекс Браузер, MozillaFirefox, Opera, GoogleChrome и InternetExplorer. Страница формируется за 0,718 секунды.

На мобильных устройствах сайт отображается корректно, текст статей и заголовков отображается читабельно. Проверка была произведена с помощью встроенных в Яндекс Браузер инструментов разработчика.

Относительно функционального тестирования, была проверена работа форм авторизации и регистрации, форма поиска по сайту. Также были проверены все внутренние и внешние ссылки.

Были проверены всесоциальные кнопки, они ведут на нужные страницы.

5. РАЗРАБОТКА РУКОВОДСТВА ПОЛЬЗОВАТЕЛЯИ ВНЕДРЕНИЕ САЙТА

В данном разделе будет представлено краткое руководство пользователя, дающее представление о принципах управления данным сайтом. Благодаря, дружественному интерфейсу панели управления, данного объема достаточно, чтобы управлять представленным сайтом.

5.1.1 Добавление товаров

Чтобы начать добавление товара, нужно перейти в раздел «Товары» и нажать кнопку «Добавить товар». Далее нужно написать название нового товара и добавить его описание. В описании должна быть самая важная и актуальная информация о товаре.

Следующим для заполнения идет раздел «Данные товара». В нем сосредоточена вся работа по добавлению товара. Здесь можно изменить его тип. Для программного продукта нужно выбрать тип«Простой товар». Он имеет несколько опций:

Во вкладке «Основные», нужно выставитьбазовую цену продукта с которой он будет продаваться. Также можно выставить цену распродажи и даже запланировать ее дату.

На вкладке«Запасы»можно отметить, есть ли товар в наличии или нет.

На вкладке«Дополнительно»можно включить или отключить отзывы. Также можно определить порядок и выбрать определенную позицию для продукта.

Для программного продукта характерен тип виртуальный или скачиваемый. Чтобы добавить виртуальный товар, нужно поставить галочку напротив «Виртуальный» в разделе «Тип товара», а скачиваемый товар - поставить флажок напротив «Скачиваемый». Также нужно указать путь до скачиваемого файла и максимальное количество раз, которое пользователь может его скачать. Если оставить поле пустым, то будет разрешено неограниченное количество загрузок.

Внизу страницы можно добавить короткое описание товара. Оно будет показано прямо под названием продукта.

В правой части страницы можно добавить дополнительные категории товара, тэги, выставить изображение товара или даже создать галерею.

Чтобы сохранить товар, нужно нажать на кнопку «Опубликовать» и проверить страницу продукта. На этом добавление нового товара завершено.

5.1.2 Управление товарами

Управление товарами происходит в панели управления на вкладке «Товары». На ней можно дублировать, редактировать и удалять товары.

Чтобы продублировать товар, нужно навести курсор на него и кликнуть по кнопе «Дублировать». При этом откроется окно редактирования нового товара. Данная функция пригодится, если нужно большое количество схожих товаров.

Чтобы отметить товар, как рекомендованный, нужно нажать на иконку звёздочки в опциях товара. Тем самым данный товар может быть отображен на главной странице.

Для удаления товара нужно нажать на кнопку «Удалить».

5.1.3 Управление заказами

Каждый раз, когда клиент сайта заканчивает оформление покупки, создаётся новый заказ. Просмотреть все заказы можно в панели управления на вкладке «Заказы». Каждый заказ имеет свой уникальный идентификатор и список данных о клиенте - электронный адрес, контактный телефон, адрес, тип платежа и так далее. Для просмотра или редактирования заказа нужно нажать на кнопку «Редактировать» под соответствующим заказом. Далее можно выполнить любое действие с ним, например, изменить статус.

5.1.4 Управление отчетами

Проверить насколько хорошо работает интернет-магазин можно в разделе «Отчеты». В нем отображается информация о числе купленных товаров, среднее число продаж в день и так далее. Также можно просмотреть статистику для отдельных товаров или категорий, для этого нужно выбрать необходимый период времени (прошлый месяц, текущий месяц, последние семь дней и так далее) и нажать на кнопку «Применить» для вывода отчета.

5.1.5 Настройки

В разделе «Настройки» можно изменить основные настройки интернет-магазина. Рекомендуется перед внесением изменений прочитать соответствующую документацию, ссылку на которую можно найти в разделе «Плагины» в описании плагина WooCommerce.

В подразделе «Основные» можно изменить местоположение, валюту, отображение сообщений для всех ваших пользователей и некоторые другие основные настройки.

В подразделе «Товары» можно изменить различные настройки товаров, такие как меры измерения, включить или отключить отзывы и так далее. Чтобы изменить стандартный размер главного изображения для товара, стандартную категорию и стандартную страницуWooCommerce, нужно зайти на вкладку «Отображение». Чтобы включить управление запасами, нужно отметить эту функцию на вкладке «Запасы». На вкладке «Скачиваемые товары» можно настроить метод загрузки файла и ограничение доступа.

В разделе «Платежи» можно изменить настройки существующих методов оплаты и добавить новые. В описании способов оплаты можно написать инструкции для клиента. Среди существующих планируется использовать «Чековые платежи». При этом методе администратор сайта вручную управляет заказом.

В разделе «Учетные записи и конфиденциальность» можно разрешить пользователям размещение заказов без создания учётной записи и произвести некоторые настройки создания аккаунта. Здесь же можно выбрать страницу с информацией о политике конфиденциальности.

В разделе электронной почты можно настраивать сообщения, которые получит покупатель и изменить данные отправителя.

5.2 Внедрение сайта

На данном этапе происходит перенос проекта на хостинг заказчика. Процесс переноса представляет собой несколько действий: создание резервных копий базы данных и настроек CMS, с последующим импортом на хостинге заказчика этих настроек.

Создать резервную копию базы данных можно несколькими способами: через панель управления MySQLили через панель управления хостинговым пространством, если данное действие позволяет сделать хостинг. В данных условиях возможен второй способ. Чтобы произвести резервное копирование базы данных средствами хостинга, нужно зайти в панель управления, перейти в раздел «Резервные копии» и напротив нужной копии нажать на кнопку «Выгрузить». Далее можно скачать файл резервной копии базы данных в формате архива «.zip».

Чтобы сделать резервную копию CMS, достаточно заархивировать всю директорию сайта на хостинге средствами файлового менеджера и выгрузить с него.

Далее нужно проделать обратные действия. На хостинге заказчика нужно зайти в панель управления MySQL, которая называется «PHPMyAdmin» выбрать или создать базу данных, в которую будет производиться импорт и нажать на кнопку «Импорт», выбрав файл резервной копии. Через некоторое время указанная база данных будет содержать все ранее созданные данные.

Следующим действием нужно распаковать архив с CMSна хостинге заказчика и отредактировать файл конфигурации wp-config.php. Данный файл находится в корневой папке сайта. В нем нужно изменить данные о базе данных: нужно указать новое имя базы данных, имя пользователя, пароль и имя сервера (хост).

После переноса необходимо проверить работу сайта, работоспособность всех ссылок, наличие картинок и так далее. Если всё отображается правильно, то можно считать, что перенос сайта завершён.

ЗАКЛЮЧЕНИЕ

В ходе выполнения выпускной квалификационной работы был разработан сайт для фирмы, которая занимается обслуживанием и настройкой программного обеспечения для ЖКХ и программного обеспечения «1С:Предприятие».

В ходе выполнения был изучен материал касательно разработки сайта, на основе которого были написаны следующие главы ВКР:

· Аналитический обзор. Первым делом былопроизведено обоснование необходимости создания web-сайта и определены требования к нему. Затем были изучены способы создания сайта (интернет-магазина) и проанализированы сайты компаний со схожей тематикой со стороны его дизайна и функционального оснащения. Был выбран метод разработки сайта с использованием CMS.;

· Проектирование сайта. Сначала произошло выделение структурных элементов, затем был создан макет сайта. Были выбраны средства разработки. Затем был выбран движок CMS путем сравнения трех наиболее распространенных бесплатных среди них, а также необходимые плагины для осуществления электронной коммерции. Последним этапом этой главы стал выбор инструментов разработки;

· Разработка сайта. В этой главе были описаны настройка среды разработки, установка и настройка CMS, был создан шаблон сайта и показаны примеры кода некоторых его модулей. Здесь же была описана структура шаблона, а именно, из каких файлов (модулей) он состоит. Последним шагом в этой главе было произведено наполнение сайта информацией, предоставленной заказчиком.

· Тестирование. В этой главе были описаны виды тестирования, которым подвергался сайт и его результаты, по которым можно сказать, что сайт полностью работоспособен и удовлетворяет потребностям заказчика.

· Разработка руководства пользователя и внедрение сайта. В этой последней главе были кратко расписаны основные операции по обращению с панелью управления сайтом. Также был описан процесс переноса сайта с хостинга, на котором он разрабатывался, на хостинг заказчика.

На сайте можно выделить следующие основные структурные элементы: главная страница, на ней отображаются новости, страница с контактами фирмы, страница «О нас» с кратким описанием деятельности фирмы, строка поиска по сайту, страница «Мой аккаунт», на которой зарегистрированный пользователь может просмотреть свои заказы. В каталоге товаров отображаются предоставляемые программные продукты и услуги с их подробным описанием. Клиенты оформляют заказы через корзину, а администратор сайта в своей панели управления просматривает детали всех поступивших заказов.

В качестве дальнейших действий, можно предложить заказчику произвести поисковую оптимизацию сайта.Также лучше всего поручить написание всего материала профессиональному копирайтеру, так как этот текст будут читать клиенты и он ляжет основой на репутацию заказчика в Интернете.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. «Рейтинг Рунета» [Электронный ресурс] - Рейтинг CMS 2017. Режим доступа: http://www.ratingruneta.ru/cms/

2. «Сайтостроение от А до Я» [Электронный ресурс] - WordPressvsJoomlavsDrupal - Что лучше? Режим доступа: http://www.internet-technologies.ru/articles/wordpress-vs-joomla-vs-drupal-chto-luchshe.html

3. DevMag [Электронный ресурс] - Сравнение WordPress и Joomla. Режим доступа: http://devmag.ru/wordpress-vs-joomla/

4. Лайфхакер [Электронный ресурс] - Какую CMS выбрать для сайта. Режим доступа: https://lifehacker.ru/2014/06/16/kakuyu-cms-vybrat-dlya-sajta-sravnenie-wordpress-joomla-i-drupal/

5. WordPress[Электронный ресурс] - Codex. Режим доступа: https://codex.wordpress.org/Дочерние_темы

Размещено на Allbest.ru