Файл: Методическое пособие по выполнению модуля WordPress.pdf

Методическое пособие по выполнению
модуля «WordPress»
Автор: Фунтиков Михаил Николаевич
2020 год.

Содержание
Общие требования
3
Конкурсное задание
4
Раздел 1. Настройка своего рабочего места
8
Раздел 2. Обзор административной панели
17
Раздел 3. Создание «Собственной темы»
20
Раздел 4. Создание рубрик, статичных страниц и меню.
23
Раздел 5. Оформление главной страницы. Установка и настройка плагинов. 28
Раздел 6. Новости.
36
Раздел 7. Доступ для проверки на сайте hostland.ru
39
Раздел 8. Задания для самостоятельной работы
40

Общие требования
Тема: «Выполнение конкурсного задания по модулю «WordPress»
Цель: получение навыков создания сайта с использованием системы управления контентом WordPress.
Инструкция:
1)
Изучите предложенное конкурсное задание;
2)
Следуя инструкциям, настройте свое рабочее место;
3)
Смените тему на свою собственную тему;
4)
Создайте и оформите страницы;
5)
Создайте меню согласно заданию;
6)
Оформите подвал сайта;
7)
Установите и настройте плагины;
8)
Выполните задание для самостоятельной работы.

Конкурсное задание
Введение
Дошкольное образование – одно из наиболее перспективных направлений развития современного образования.
Компания, предоставляющая услуги по дошкольному образованию, как и любая организация или компания, имеет реальный имидж. Имидж, формирующийся в нашем сознании, влияет на восприятие, которое, в свою очередь, влияет на выбор. В условиях широкого ассортимента аналогичных образовательных услуг перед конкретной школой встает задача по разработке стратегии, привлекающей большее число клиентов. Одной из таких стратегий является разработка собственного сайта, позволяющего наглядно и качественно донести информацию максимально быстро до огромного количества людей.
Школа дошкольного образования «Big Ben» решила выйти на новые горизонты рынка образовательных услуг и заказала сайт. Обратившись в несколько веб-студий города, руководители школы пришли к выводу что разработку полноценного сайта они себе позволить не могут из-за ограниченного бюджета и решили заказать сайт-визитку на WordPress.
Описание проекта и задач
Предметом разработки является разработка сайта для компании
«BigBen» на WordPress.
Цель проекта: разработка сайта для привлечения клиентов.
Структура Интернет-ресурса и навигация.
1. Карта сайта:
1. Главная
2. Наши школы (фото, контактная информация)
2.1 Томск

2.2 Кемерово
2.3 Новосибирск
2.4 Барнаул
2.5 Красноярск
3.Новости
4. Наши услуги
4.1. Английский язык для взрослых
4.2. Английский язык для школьников
4.3. Индивидуальные английский язык
4.4. Корпоративное обучение
5. Преподаватели
6. Контакты
2. Главная страница должна включать в себя следующие блоки:
- Шапка с элементами фирменного стиля компании, иллюстрациями услуг компании (баннер), контактной информацией.
- Блок меню. О нас, Наши школы, Новости, Наши услуги.
- Описание преимуществ компании. С возможностью записи на пробное занятие.
- Заказать услугу. Форма с элементами: услуга, ФИО, телефон, электронная почта, предполагаемая дата, кнопка Отправить.
- Информация о преподавателях (фотография, ФИО, краткая информация).
- Новости. Должно выводится не более 3 последних новостей.
- Футер (реквизиты организации, ссылки на социальные сети).
3. Внутренние страницы:
- Новости. Каждая новость содержит: текст, изображение, дату публикации.
- Наши школы. Фото, название, описание.

- Наши услуги. При выборе услуги дается пояснение услуги и возможные направления.
- Контакты. Содержит информацию о компании и контакты (адрес, телефоны, email).
4. Общие требования:
Необходимо разработать собственную тему:
- наименование BigBen;
- использовать изображение предпросмотра, отличающееся от встроенных тем;
- описание, отличающееся от стандартных тем.
Ваша тема должна быть адаптирована под мобильные устройства (от
375px), планшетов (от 768px), десктопов (от 1366px) и корректно отображать все функции и модули сайта. Выбранные цветовые и стилистические решения темы сайта должны быть ориентированы на привлечение как можно большего числа клиентов.
Для проверки статистики доступа, установите и настройте плагин для подключения к Google Analytics.
Чтобы улучшить результаты в поисковых системах, установите и настройте один плагин для SEO на своем веб-сайте.
HTML и CSS-код должны быть удовлетворять стандартам W3C (HTML
5 и CSS 3).
Весь необходимый контент (изображения и тексты) предоставляется в папке «Медиа». Соблюдайте следующие требования в процессе разработки:
1. Доступ к сайту происходит по адресу http://xxxxxx-m1.wsr.ru/ где xxxxxxxxx = код участника
2. Чтобы обеспечить последующее администрирование и управление данными веб-сайта, используйте эту информацию для доступа к области администрирования WordPress:
2.1. Логин: Admin

2.2. Пароль: QAdmin
Инструкции для участника испытания
Участнику предоставляются медиафайлы в каталоге «media». Вы можете изменить предоставленные файлы, чтобы быть уверенным в том, что сайт выполняет свою задачу.

Раздел 1. Настройка своего рабочего места
Чтобы установить CMS нам понадобиться зарегистрироваться на сайте hostland (есть тридцатидневный пробный период). Идём по адресу https://www.hostland.ru/hosting и выбираем любой тариф (для работы достаточно выбрать тариф «Бриз»).
Заполняем все необходимые поля, указав ваш email, код с картинки и ставим галочку согласия (пример на рисунке 1.1).
Рисунок 1.1 – Пример заполнения полей регистрации.
На почту получаем все необходимые данные, которые нам понадобятся для управления сайтом. Для того, чтобы управлять сайтом будем пользоваться FTP-клиентом. Проходим по ссылке https://filezilla-project.org и качаем клиент (client). Устанавливаем программу.
Перед тем, как закачать наш дистрибутив сайта на хостинг распакуйте его в удобном для вас месте и откройте в левой панели filezilla (рисунок 1.2).

Рисунок 1.2 – Распакованный архив.
Нажимаем на меню «Менеджер сайтов» (рисунок 1.3).
Рисунок 1.3 – Менеджер сайтов.
Заполняем все данные для соединения (данные берём с электронной почты «Вход по FTP»). Название соединения можете поставить на ваш вкус.
Обязательно заполните все указанные поля, как показано на рисунке 1.4.

Рисунок 1.4 – Панель настройки соединения.
Если вы всё сделали правильно, то в правой панели появиться соединение с хостом. Переходим в каталог htdocs и создаём там каталог wp, остальные каталоги можно удалить (смотрите рисунок 1.5). Таким образом мы создадим поддомен (в почте есть данная инструкция).

Рисунок 1.5 – Создание поддомена для сайта.
Открываем наш пустой каталог wp на правой панели. В левой панели выделяем все файлы (Ctrl + a) и нажимаем правую кнопку мыши. Выбираем пункт «Закачать на сервер» (смотрите рисунок 1.6).
Рисунок 1.6 – Закачка файлов на сервер.

Во время загрузки вам будут показывать сообщать о замене файлов, в этом случае поставьте выбор на замену и галочки, чтобы вас такие сообщения больше не беспокоили (смотрите рисунок 1.7). Сразу хочется сказать, что закачка проходит примерно минут 5.
Рисунок 1.7 – Пример замены файлов.
Осталось настроить WordPress, для этого переходим по тестовому доменному имени из почты и добавляем в начало «wp.». Нас автоматически переадресует в поддомен нашей CMS (пример адреса смотрите на рисунке
1.8).
Рисунок 1.8 – Пример переадресации.
Нажимаем кнопку «Вперёд». Заполняем все данные, которые берём с электронной почты из раздела «Вход MySQL» (смотрите рисунок 1.9).

Рисунок 1.9 – Пример заполнения полей для соединения с БД.
Если вы нажмёте кнопку «Отправить» и на следующем экране увидите окно готовности к установке, то значит, вы заполнили всё правильно
(смотрите рисунок 1.10). Если вы видите ошибку, то вернитесь на предыдущий экран и проверьте данные.
Рисунок 1.10 – Пример успешной настройки соединения с БД.
На следующем экране производим начальные настройки сайта.
Название, логин и пароль берём из задания. Обязательно ставим галочку

«Разрешить слабый пароль». Email вы можете указать свой. Можно отключить видимость сайта для поисковых систем.
Рисунок 1.11 – Заполнение настроек сайта.
Производим первый вход в админ панель нашего сайта (смотрите рисунок 1.12).

Рисунок 1.12 – Вход в админ панель сайта.
Если вы не можете войти, значит, вы указали не тот логин или пароль в настройках сайта. Если вы смогли войти, то далее для вас информация просто к ознакомлению.
Внимание!!! Для того чтобы не исправлять критические ошибки, которые вы можете допустить при разработке, рекомендуется полностью производить установку сайта сначала. Для этого нам необходимо очистить
БД (так как WordPress хранит всё в базе данных), в редких случаях ещё удалить дистрибутив CMS с сервера и закачать чистый проект снова.
Чтобы очистить базу данных пройдите по адресу из электронной почты https://mysql76.hostland.ru
. Затем выделите все таблички и в панели рядом выберите удалить (смотрите рисунок 1.13). На следующем экране нажмите
«Да».

Рисунок 1.13 – Удаление таблиц из БД.
После этого повторите полную установку CMS с момента входа на сайт.

Раздел 2. Обзор административной панели
Первое что нам понадобиться – это смотреть, как выглядит сайт для нашего пользователя. Чтобы переключиться в режим просмотра можно нажать на название нашего сайта «Big Ben» или подменю «Перейти на сайт».
Чтобы переключиться обратно можно так же нажать на название или подменю «Консоль» (смотрите рисунок 2.1).
Рисунок 2.1 – Название сайта с открытым подменю.
Первое меню – это консоль, в которой нам предлагают первые шаги по настройке сайта. Мы ей пользоваться не будем.
Второе меню – это записи, где мы будем создавать записи и рубрики в последующих разделах (смотрите рисунок 2.2).
Рисунок 2.2 – Меню «Записи».
Меню «Медиафайлы» мы можем воспользоваться прямо сейчас. Для этого выберите подменю «Библиотека». На своём компьютере откройте каталог «Media», затем каталог «Images» и выделите все файлы. Используя
Drug’n’Drop (перенос) загрузите все изображения на сервер. Можно добавить изображения нажав кнопку «Добавить новый» вверху слева. Потом нажать кнопку «Выберите файл». Так же зайти в каталог изображений и выделить все файлы, нажать открыть (смотрите рисунок 2.3).

Рисунок 2.3 – Добавление изображений в библиотеку.
Больше в этот раздел мы можем не возвращаться, так как все изображения в будущем будем загружать именно из библиотеки.
Следующее меню – это «Страницы» (смотрите рисунок 2.4). С помощью него мы будем заполнять статичные страницы.
Рисунок 2.4 – Меню «Страницы».
Меню «Комментарии» мы тоже не будем пользоваться.
Меню «Внешний вид» мы рассмотрим в следующем разделе, где создадим «собственную тему». Здесь же создадим меню в соответствующем подменю. Так с помощью подменю «Виджеты» мы добавим в футер ссылки на социальные сети.
Рисунок 2.5 – Меню «Внешний вид».
Меню «Плагины» поможет нам установить необходимые по заданию плагины и настроить их.
Меню «Пользователи» и «Инструменты» нам не интересны.

Последнее меню «Настройки» воспользуемся сейчас. Перейдите в подменю «Общие». Смените описание сайта (обязательно), часовой пояс (на ваш часовой пояс) и формат даты (по желанию). Остальное можно не менять
(смотрите рисунок 2.6). После нажмите кнопку «Сохранить изменения».
Рисунок 2.6 – Общие настройки сайта.

Раздел 3. Создание «Собственной темы»
На своём компьютере откройте путь wp-content/themes (смотрите рисунок 3.1).
Рисунок 3.1 – Путь в каталог тем.
Можем выбрать любую тему (предварительно можете посмотреть на сайте какая тема вам больше подходит). Копируем её и тут же вставляем, создав копию (смотрите рисунок 3.2).
Рисунок 3.2 – Пример копии темы.
Переименуйте копию каталога на «bigben». Сразу заменим картинку предварительного просмотра на свою собственную. Для этого открываем любую картинку из каталога изображений, которые нам выдали в любом редакторе изображений (подойдёт даже Paint). Выбираем меню «Сохранить как», формат файла ставим «png» и заходим в наш каталог «bigben». Внутри есть 1 файл «screenshot.png». Выбираем его и затем жмём сохранить, нам появиться сообщение о замене файла, подтверждаем (смотрите рисунок 3.3).

Рисунок 3.3 – Замена изображения предпросмотра.
Через filezilla в панели сервера (правая панель) открываем каталог тем.
В левой панели выбираем нашу тему «bigben» и по нажатию правой кнопки мыши закачиваем её на сервер. Заходим в консоли сайта в меню «Внешний вид» и выбираем «Темы». Вы должны увидеть собственную тему с изображением, которое вы выбрали (смотрите рисунок 3.4). Наведите на
«вашу тему» и нажмите «Активировать».
Рисунок 3.4 – Скриншот сайта с «Собственно темой».
Осталось изменить описание темы на ваше собственное, чтобы выполнить всё, что необходимо по заданию. Зайдите в подменю «Редактор тем». Вам появиться предупреждающее сообщение, нажмите «Я понимаю».
Затем поменяйте комментарии, как показано на рисунке 3.5 и нажмите
«Обновить файл».