Описание среды разработки CMS Wordpress

Для выполнения дипломного проекта была выбрана платформа конструктор Wordpress по следующим причинам:

- Конструктор Wordpress является общедоступным и бесплатным проектом, имеет поддержку русского языка;

- Огромное количество различных плагинов и шаблонов облегчающих разработку сайта;

- Наличие опыта разработки сайтов в Wordpress у разработчика.

Плагины

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

CodeColorer — этот плагин добавляет в движок подсветку синтаксиса для всех популярных языков программирования, начиная с Java или Python и заканчивая Haskell.

Disqus Comment System — интегрирует ваш блог с популярной системой комментариев Disqus. С ее помощью ваши посетители смогут авторизоваться в блоге с помощью OpenID или учетной записи в Twitter, получать почтовые уведомления о новых сообщениях и многое другое. Кроме того, Disqus имеет собственную защиту от спама, причем весьма неплохую.

WP Super Cache — предназначен для кэширования часто посещаемых страниц. За счет кэширования повышается скорость загрузки страниц и снижается нагрузка на сервер.

Contact Form 7 — позволяет разместить на сайте весьма гибкую в настройке форму обратной связи.

Subscribe To Comments — встроенными средствами WordPress посетители могут следить за обсуждениями только с помощью RSS. Плагин Subscribe To Comments позволяет подписываться на обсуждения с помощью электронной почты. Разумеется, если вы используете Disqus, вам этот плагин не нужен.

TDO Mini Forms — довольно мощный плагин, позволяющий разместить на сайте форму для добавления посетителями новых сообщений в блоге. С помощью этого плагина можно построить сайт-сообщество или позволить посетителям присылать новости.

WP Polls — с помощью этого плагина можно проводить на сайте опросы. Опрос можно разместить как на конкретных страницах, так и в боковой панели на всех страницах сайта.

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

Установка WordPress

Перед установкой WordPress потребуется приобрести хостинг и домен. Хостинг дает возможность разместить Web-сайт в сети Интернет, а доменом называется имя или адрес Web-сайта, который непосредственно привязан к хостингу. Домен должен хорошо запоминаться и отражать суть Web-сайта. Услуги по регистрации домена и приобретению хостинга представляются специализированными хостинговыми компаниями, которые также могут оказывать услуги по размещению Web-сайтов на своих серверах.

Перед началом установки WordPress необходимо проверить выбранный сервер на соответствие минимальным требованиям, большинство современных хостингов по умолчанию удовлетворяют данным требованиям:

- PHP версия 4.3 или выше;

- MySQL версия 4.0 или выше;

- модуль Apache mod_rewrite (опционально).

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

WordPress лучше всего работает на платформе Linux или UNIX, но её также можно использовать и на Windows-серверах. Кроме того, можно установить WordPress на локальный компьютер используя XAMPP.

Создание базы данных WordPress

Процесс установки данной платформы на сервер включает в себя:

– загрузку файлов CMS на сервер хостинг-провайдера;

– создание базы данных MySQL для работы;

– запуск Web-интерфейса инсталлятора WordPress;

– установку прав доступа к каталогам.

При наличии SSH-доступа к Web-серверу и умении работать с консольными приложениями, можно загрузить файлы WordPress прямо на Web-сервер с помощью wget или lynx. После того как файлы WordPress были установлены, потребуется создать и подключить базу, которая будет использоваться для хранения информации CMS.

Многие хостинг-провайдеры предлагают инструменты, позволяющие создавать базы данных MySQL в автоматическом режиме с помощью инструментов cPanel или phpMyAdmin. Для примера мы рассмотрим создание базы данных с помощью панели управления cPanel.

Базу данных, необходимую для работы WordPress, можно создать и с помощью стандартного клиента MySQL потребуется:

- ввести имя базы данных;

- создать пользователя для подключения и управления базой данных;

- установить права (привилегии) доступа пользователей к базе данных.

Код создания базы данных

$ mysql -u adminusername -p

Enter password:

Welcome to the MySQL monitor. Commands end with ; or \g.

Your MySQL connection id is 5340 to server version: 3.23.54

Type 'help;' or '\h' for help. Type '\c' to clear the buffer.

mysql> CREATE DATABASE databasename;

Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL PRIVILEGES ON databasename.* TO "wordpressusername"@"hostname"

IDENTIFIED BY "password";

Query OK, 0 rows affected (0.00 sec)

mysql> FLUSH PRIVILEGES;

Query OK, 0 rows affected (0.01 sec)

mysql> EXIT

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

Код подключения базы данных

// ** MySQL settings ** //

define('DB_NAME', 'putyourdbnamehere'); // имя базы данных

define('DB_USER', 'usernamehere'); // имя пользователя для подключения к MySQL

define('DB_PASSWORD', 'yourpasswordhere'); // пароль пользователя

define('DB_HOST', 'localhost'); // адрес сервера БД

define('DB_CHARSET', 'utf8'); // кодировка по умолчанию utf8

Настройка WordPress

Настройка установленного экземпляра WordPress, начинается с установки прав доступа для каталогов и файлов CMS. Для большинства файлов рекомендуется использовать следующие битовые маски прав доступа: 644, 755 или 775.

Так как популярные блоги могут генерировать высокую нагрузку на используемый сервер, то производительность платформы WordPress можно повысить за счёт кеширования страниц. Несмотря на то, что в WordPress существует встроенное кеширование, можно использовать дополнительные плагины, которые позволяют упростить процесс настройки Web-сайта и предлагают дополнительные возможности, например, сжатие файлов CSS и сценариев PHP. На рынке присутствует большое число плагинов для кеширования, которые способны снизить нагрузку на сервер:

- WP-Cache – специальный плагин для Wordpress, который ускоряет обработку запросов, сохраняет страницы, сгенерированные Wordpress, в статические файлы и отдает их пользователю;

- Wordpress Super Cache – плагин, сохраняющий статические страницы полностью, а не по фрагментам, а, следовательно, не использующий PHP для их компоновки;

- Hyper Cache – полностью сохраняет HTML-страницы в статический файл и отдаёт его пользователю, если он находится в той же сессии, также может кешировать ошибки 404 (отсутствующие ресурсы) и запросы на перенаправление;

- Blog Cacher – сохраняет ответы на запросы в локальные файлы, помещая их в дерево каталогов, которые соответствует структуре ссылок;

- Throttle – плагин, который в моменты пиковой нагрузки на сервер просто отключает некритичные части блога.

В административном интерфейсе следует указать оптимальные настройки, соответствующие требованиям конкретного проекта. На рисунке 1 показана форма с основными конфигурационными параметрами WordPress. Конфигурационные параметры WordPress

На платформе WordPress определены пять типов ролей, доступных для пользователей:

- администратор (administrator) со всеми возможными полномочиями и полным доступом прав;

- редактор (editor), который обладает правами администратора, за исключением полномочий для внесения изменений в конфигурацию Web-сервера;

- автор (author), который создает и публикует собственные материалы (посты);

- участники (contributor) могут создавать собственные записи, но не имеют права публиковать их самостоятельно;

- подписчик (subscriber) может только читать записи в блоге и оставлять комментарии.

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

Плагины – это расширения для WordPress, которые позволяют добавить в Web-сайт изначально отсутствующую функциональность. Темы оформления обеспечивают больший контроль над представлением материала, публикуемого на Web-сайте.

Под темой в WordPress понимаются файлы (или шаблоны), позволяющие реализовать изменение графического интерфейса и стиля отображения содержимого сайта. Тема меняет стиль отображения, используемый Web-сайтом, без внесения каких-либо изменений в программный код. Тема состоит из файлов шаблонов, изображений (*.jpg, *.gif), каскадных таблиц стилей (*.css) и любых файлов с PHP-кодом (*.php).

Большое количество тем доступно для свободного скачивания на официальном сайте WordPress Theme Directory.

Каждая тема содержится в отдельной папке с соответствующим названием. Чтобы тему можно было использовать, она должна содержать определённый набор файлов:

- style.css - главный файл таблицы стилей;

- index.php - главный файл шаблонов;

- comments.php - шаблон комментариев;

- home.php - шаблон главной страницы.

Для установки темы достаточно просто скопировать её файлы в папку themes или воспользоваться административным интерфейсом WordPress.

ПРАКТИЧЕСКАЯ ЧАСТЬ

Постановка задачи

Целью дипломного проекта является обеспечение информационного присутствия базы отдыха «Турман» в сети Интернет и предоставление информации о действующих акциях и услугах базы.

Сайт должен обеспечивать выполнение следующих функций:

- Создание имиджа — сайт является "лицом" базы отдыха в сети Интернет. За счет грамотного Web дизайна, продуманной структуры сайта существенно улучшится имидж база отдыха, что повлияет на привлечение клиентов.

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

- Обеспечение коммуникативности — сайт должен обеспечивать двустороннюю связь с посетителями сайта.

По требованию заказчика включены следующие разделы:

- главная – основная информация о турбазе и предоставляемых услугах;

- проживание – информация об условиях проживания;

- развлечения – информация о досуге отдыхающих, о местах которые расположены недалеко от базы и которые стоит посетить;

- контакты – информация о способах связи с администрацией турбазы.

Сайт должен удовлетворять всем современным требованиям, предъявляемым к сайтам:

– адаптация к различным видам устройств: компьютер, планшет, смартфон;

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

– иметь дизайн, соответствующий цветовой гамме печатной продукции базы;

– навигация по страницам должна быть удобной и понятной;

– сайт должен содержать «обратную» связь с клиентом;

– весь материал на страницах должен быть структурирован и быть достоверным;

–заголовок страницы должен соответствовать правилам: обязательно должен нести полную информативность, чёткость, быть уникальным;

- сайт должен отображаться в браузерах yandex, google, explorer, firefox.

- Максимальная нагрузка на сайт в сутки должна быть рассчитана на 300 пользователей.

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

Необходимо создать клиентскую и администраторскую части сайта. Клиентская часть сайта должна быть доступна широкому кругу пользователей. Администраторская часть – только администратору сайта, имеющего соответствующие права (логин и пароль) на доступ. Необходимо обеспечить возможность Заказчику самостоятельно вносить изменения (редактировать) содержимое страниц сайта в администраторской части сайта.

Ожидаемый результат:

- сокращение расходов на другие виды реклам носителей;

- неограниченные возможности демонстрации работы базы отдыха;

- бесплатная и высокоинформативная обратная связь;

– возможность уточнения интересов потенциальных и постоянных клиентов;

– постоянный менеджмент спроса на услуги и корректировка прайса на услуги;

- увеличение дохода базы за счет рекламного представления предоставляемых услуг.

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

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

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

Дизайн сайта должен подчеркивать направленность сайта.

Основные требования заказчика к сайту базы отдыха «Турман»

- Наличие адаптации версии сайта с рассчитанной и проверенной областью экрана, т.е. предусмотреть наличие Тега viewport.

- Наличие блока новостей базы.

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

Для выполнения поставленной цели должны быть реализованы следующие этапы:

- изучение деятельности базы отдыха;

- подбор текстовой и графической информации (из материалов, предоставленных заказчиком и ресурсов сети Интернет);

- разработка структуры сайта;

- структурирование и обработка информации для сайта;

- создание макетов и дизайна сайта и Web-страниц;

- выбор среды разработки;

- заполнение Web-страниц в CMS WordPress;

- вставка графических файлов в Web-сайт;

- разработка удобной и оптимальной системы навигации по страницам сайта.

Разработка структуры сайта

Для сайта базы отдыха «Турман» была выбрана структура «Паутина». Согласно этой структуре переход осуществляется с главной страницы на любую страницу раздела сайта, с любой страницы возможен переход на главную страницу или страницу другого раздела.

Структура сайта приведена на рисунке 4.

Рисунок 4 - Структура сайта

По требованию заказчика включены следующие разделы: Главная, Проживание, Развлечения, Бронирование, Контакты. После кого как клиент попал на сайт базы отдыха «Турман», он оказывается на главной странице сайта, где представлена самая основная информация о базе отдыха.

С помощью страницы «Главная» пользователь может узнать о базе отдыха и предоставляемых ей услугах, а также краткое содержание каждого раздела сайта и в любой момент перейти в нужный ему раздел с помощью меню. Пользователь может передвигаться по разделам сайта при помощи главного меню размещенного в «шапке» сайта (Рис. 5).

Рисунок 5 – Меню навигации сайта

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

Рисунок 6 – Раздел сайта «Проживание»

В разделе «Развлечения» расположена информация о развлекательных услугах предоставляемых базой отдыха (рис.7).

Рисунок 7 – раздел сайта «Развлечения»

В разделе «Бронирования» размещена форма обратной связи для возможности бронирования домиков прямо на сайте (рис.8).

Рисунок 8 – раздел сайта «Бронирование»

В разделе «Контакты» размещена карта, указывающая точное месторасположение базы отдыха, и контактные данные базы (рис.9).

Рисунок 9 – раздел сайта «Контакты»

Разработка макета страниц

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

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

Структуры страниц

Все страницы обладают схожей структурой и одинаковыми элементами:

– верхний колонтитул (хедер);

– нижний колонтитул (футер);

– блок контактных данных;

Каждый элемент имеет один и тот же стиль на разных страницах.

Так как сайт является адаптивным (изменяет масштаб шрифтов, положения элементов и т.д.), то для каждой из страниц создано по три структуры, которые зависят от типа устройства и ширины экрана посетителя.

1) Структура для экранов с шириной свыше 1024 пикселей (широкоформатная).

2) Структура для экранов с шириной до 1024 пикселей далее (средняя).

3) Структура различных мобильных устройств, планшетов с шириной до 768 пикселей (мобильная).

2.3.1.1 «Главная» страница

Данная страница включает в себя элементы, относящиеся к контенту страницы:

а) Блок, содержащий слайдер с фотографиями ЧЕГО.

б) Блок, содержащий изображения ЧЕГО и текст описания базы отдыха.

в) 2 блока НАЗВАНИЯ, содержащих ссылки на соответствующие разделы.

г) Блок, отображающий новости ЧЕГО.

Макет главной страницы представлен на рисунке 10.

Рисунок 10 – макет главной страницы

Страница «Проживание»

Данная страница включает в себя элементы основного контента:

а) Блок, содержащий текст с основными направлениями услуг, предлагаемых турбазой клиентам.

б) Блок со слайдером ЧЕГО

Макет страницы «Проживание» представлен на рисунке 11.

Рисунок 11 – макет страницы «Проживание»

2.3.1.3 Страница «Развлечения»

Данная страница включает в себя элементы, относящиеся к контенту страницы:

в) Блок, содержащий текст с основными направлениями услуг на турбазе.

г) Блок с дизайнерским изображением ЧЕГО.

Макет страницы «Развлечения» представлен на рисунке 12.

Рисунок 12 – макет страницы «Развлечения»

2.3.1.4 «Бронирование»

Данная страница включает в себя элементы основного контента:

а) Блок, содержащий форму обратной связи.

Форма обратной связи включает в себя поля:

1. Имя.

2. Телефон.

3. @mail.

4. Заголовок сообщения.

5. Сообщение.

Макет страницы «Развлечения» представлен на рисунке 13.

Рисунок 13 – макет страницы «Бронирование»

Контакты»

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

Карта, размещенная в разделе является разработкой компании 2ГИС.

Макет страницы «Развлечения» представлен на рисунке 14.

Рисунок 14 – Макет страницы «Контакты»

Подготовка хостинга

Основываясь на личном опыте работы, для дипломного проекта был выбран один из подходящих хостингов – timeweb. Данный хостинг-провайдер позволяет бесплатно реализовать поставленные задачи о разграничении доступа на сайт:

- Возможности создать базу данных MySQL;

- Поддержки языка программирования PHP;

Создание базы данных

База данных будет создана автоматически, при регистрации домена.

База данных будет хранить следующие сущности: «Messages», «Admins».

Сущность «Messages» будет отвечать за хранение всех написанных ранее, а так же фильтрацию еще не проверенных отзывов, структура сущности приведена в таблице 1.

Таблица 1 – Структура сущности «Messages»

Имя поля	Тип поля	Свойства
ID_сообщения	Int (цело число)	Поле первичного ключа, Размер поля – 10, обязательное поле – да, пустые строки – нет. Автоинкремент – да
Имя_посетителя	Text (текстовой)	Размер поля – 40
Отзыв/вопрос	Text (текстовой)	Размер поля – 150
Дата	Text (текстовой)	Размер поля – 6
Флаг	Boolean (логический)	По умолчанию – False

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

Таблица 2 – Структура сущности «Admins»

Имя поля	Тип поля	Свойства
ID_администротора	Int (цело число)	Размер поля – 10, обязательное поле – да, пустые строки – нет. Автоинкремент – да
Логин	Text (текстовой)	Размер поля – 15
Пароль	Text (текстовой)	Размер поля – 10

Подключение доменного имени

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

После создания бесплатного аккаунта, в разделе «Домен» требуется зарезервировать имя сайта, которое будет, является доменным именем четвертого уровня, что не относится к запоминающемуся адресу и не является красивым.

Для решения данной проблемы приняты следующие меры:

1) Приобретение на хостинге платного домена.

2) Для более комфортного запоминания клиентами имени сайта, заказчиком было принято решение купить его в зоне «RU».

После выбора имени, нажав кнопку «Зарегистрировать» (Рис.15), требуется указать паспортные данные того лица, на кого будет куплено имя, где следующим шагом являться оплата, любым удобным способом.

Рисунок 15 – Строка поиска свободных доменных имен

3) Если оплата прошла успешно, то в личном кабинете, перейдя в раздел «Мои домены», отобразится приобретенный домен.

2.5 Верстка сайта

Для подключения инструмента КАКОГО требуется выполнить следующие шаги:

1) В панели аккаунта хостинга перейти на вкладку «каталог CMS».

2) Найти в списке Wordpress.

3) Нажать кнопку «Установить приложение на домен»

Рисунок 16 – Подключение инструмента Wordpress

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

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

Описание разработки страниц

В верхней правой части страницы располагается логотип Базы отдыха «Турман»

Вставка логотипа происходила с помощью HTML-кода, размещенного в блоке «navbar-brand» (Рис.17).

Для которого прописан стиль CSS:

navbar-brand > img {

display: block;

width: 80%;}

Рисунок 17 – Логотип салона красоты «Колибри».

Справа от логотипа располагается меню, с помощью него пользователь может перемещаться в любой раздел сайта. Меню прикреплено к верхней панели сайта, что позволяет ему оставаться зафиксированным при приходах между страницами сайта (Рис.18).

HTML-код создания меню:

<li><a href="#home">Главная</a></li>

<li><a href="#features">Проживание</a></li>

<li><a href="#business">Развлечения</a></li>

<li><a href="#work">Бронирование</a></li>

<li><a href="#test">Контакты</a></li>

</ul>

Для меню прописан следующий стиль CSS:

.navbar-callus li a{

font-size:14px;

padding: 10px;

color:#444444;

display: inline-block;}

.navbar-callus li a i{

font-size:13px;

color:#1abc9c;

margin-right: 5px;}

Рисунок 18 – Меню сайта базы отдыха «Турман»

Ниже располагается информационный слайдер, в нем содержаться три слайда с изображением ЧЕГО, на двух из них расположены зафиксированные кнопки КАКИЕ. НЕТ ССЫЛКИ НА РИСУНОК 19 И 20

Слайдер, как и большинство следующих элементов, был добавлен при помощи готового инструмента создания контента – Elementor.

HTML – код был применен для редакции добавленных элементов.

Элемент HTML-кода информационного слайдера

<div class="jet-slider jet-slider__image-exact"

</div>Стиль CSS для слайдера

.slid_shap{height: 40px; border-radius: 4px 4px 0px 0px; width:100%;}

.main_home .home_text h2{font-size:36px; font-weight: 400;}

.main_home .home_text h1{font-size:48px;font-weight: 700;}

Создание текстового блока

Html код кнопки «подробнее»

<a href="" class="btn btn-primary m-top-20">подробнее</a>

CSS-код кнопки «подробнее»

.btn-primary{

color: #fff;

background-color: #00a885;

border:1px solid;

border-color: #00a885; }

.btn-primary:hover{

background-color: #eee;

border-color: #eee;

color:#00a885;}

Рисунок 19 – Информационный слайдер

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

Html-код создания элемента круглой формы:

CSS-код

img-circle{border-radius:50%}

Html-код создания текстового блока:

<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix"

Рисунок 20 – Круглая форма изображения текстовый блок

Ниже в разделе используется текстовый блок с графической «обложкой», реализованные с помощью HTML-кода (Рис.2.14) УТЕБЯ СКВОЗНАЯ НУМЕРАЦИЯ РИСУНКОВ.

</div>

CSS

.main_product .port_img{

osition: relative;

overflow: hidden;}

.main_product .port_img img{idth:100%;}

Такая форма текстового блока подходит для более приятного восприятия текста.

Рисунок 21 – тестовый блок с графической «обложкой»

В самой нижней части главной страницы размещен блок отображения новостей базы отдыха, он реализован при помощи HTML – кода: НЕТ ССЫЛКИ НА РИСУНОК

Рисунок 22 – новостной блок

В разделе бронирования была размещена форма обратной связи, она реализована при помощи HTML – кода: ССЫЛКА

Рисунок 23 – форма обратной связи

Карта проезда вставлена с помощью скрипта в HTML-код: ССЫЛКА

Рисунок 24 – Карта проезда

Индексация

Чтобы сайт отображался в поисковой выдачи системы «Яндекс», требуется выполнить ряд следующих действий:

1) Зарегистрировать аккаунт на официальном сайте webmaster.yandex.ru.

2) Подтвердить владение сайтом путем мета-тега верификации (размещения уникального кода предложенного сайтом на странице в разделе «head»).

3) Заполнить ключевые слова в мета-теге «keywords» на каждой из страниц сайта.

4) Соблюдать на каждой из страниц сайта контент, который будет соответствовать названию страницы.

5) Создать текстовый документ «robots.txt» и разместить на сервере. Данный файл будет содержать параметры индексирования для поисковых роботов. Так как, сайт не содержит страниц, которые не желательны для индексации, в файле указывается параметр для индексирования всех страниц.

6) Создать файл «Sitemap.xml» и разместить на сервере, содержание которого поможет поисковому роботу найти все страницы сайта. Данный файл был создан автоматически, используя генератор карты на сайте https://htmlweb.ru/analiz/sitemap.php.

7) Заполнить информацию о салоне на сервисе «Яндекс.Справочник», привязав сайт к созданной организации, что позволит задать страницам региональный настройки и выдавать в поисковой выдачи дополнительную карту салона с номерами телефонов мастеров.

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

Руководство администратора

Для входа на сайт от имени администратора необходимо в нижнем колонтитуле сайта нажать кнопку «Вход», после чего ввести пароль и нажать «Войти». Так же вход можно осуществить другим способом через сайт конструктора. Для этого нужно в адресной строке прописать http:// wordpress.com. После чего в поле «Имя пользователя или e-mail» ввести логин «admin», в строке «Пароль» ввести пароль сайта и нажать кнопку «Вход» (Рис.25).

Рисунок 25 – Авторизация на сайте WordPress

C помощью административной панели платформы WordPress администратор сайта может править всю необходимую информацию (изображения, описание, прайс-лист, названия заголовков, изменять стили дизайна, добавлять новые плагины). Административная панель представлена на рисунке 26.

Рисунок 26 – Административная панель WordPress

Редактирование основного шаблона происходит с помощью редактирования кода, который находится в разделе «внешний вид» во вкладке «Редактор» (Рис.27)

Рисунок 27 – Панель «Внешний вид»

В ней располагаются основные файлы шаблона для редактирования и настройки, представление на Рисунке 28.

Рисунок 28 – Основные файлы шаблона

Редактирование страниц производиться с помощью вкладки «Страницы» подраздел «Все страницы», в данном разделе располагается список страниц, расположенных на сайте. Страницу можно изменить, просмотреть ее свойства, удалить, и перейти в редактирование (Рис.29)

Рисунок 29 – Список страниц

Редактирование информаций на страницах могут производиться «Визуально» и с помощью «Текста».

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

Рисунок 30 – Визуальный редактор страниц

Текстовый редактор страниц представляет собой поле для написания кода, все изменения вносятся с помощью тегов, представлено на рисунке 31.

Рисунок 31 – Текстовый редактор страниц

Добавление новых страниц производиться с помощь вкладки «Добавить новую», при добавлении новой страницы необходимо указать «Заголовок» и добавить всю необходимую информацию на новую станицу.

Также есть возможность устанавливать новые плагины, это можно сделать с помощью раздела «Плагины» вкладка «Добавить плагин» (Рис.32)

Рисунок 32 – Плагины WordPress

ЗАКЛЮЧЕНИЕ

В результате работы над дипломным проектом были решены следующие задачи:

- проведен анализ предметной области,

- изучены программные средства для реализации практической части дипломного проекта,

- обоснован выбор среды разработки,

- изучена выбранная среда разработки, а именно приемы, которые были использованы для создания практической части диплома,

- собраны и систематизированы материалы к дипломному проекту и разработан проект практической части,

- спроектированы структура сайта, структуры страниц,

- разработан дизайн сайта,

- сайт размещен в сети интернет,

- реализован поиск по сайту по типу поиска в браузере Яндекс.

В дипломном проекте учтены все требования заказчика и руководителя диплома.

Все поставленные задачи реализованы.

Дата добавления: 2021-07-19; просмотров: 86; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 123 Следующая ⇒

Мы поможем в написании ваших работ!