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

Рисунок 3.5 – Пример описания «собственной темы».
Если вы после этого вы вернётесь в темы и при наведении на свою тему выберете «Информация о теме», то увидите, что все надписи заменены на ваши.
На этом выполнено задание по «собственной теме».

Раздел 4. Создание рубрик, статичных страниц и меню.
Статичными будут являться страницы: «Томск», «Кемерово»,
«Новосибирск», «Барнаул» и «Красноярск» для подменю «Наши школы».
Для меню «Наши услуги» статичными будут страницы: «Английский язык для взрослых», «Английский язык для школьников», «Индивидуальные английский язык», «Корпоративное обучение». И ещё две страницы будут статичными «Главная», «Преподаватели» и «Контакты».
Остальные страницы создадим, как рубрики. Заходим в меню
«Записи», выбрав подменю «Рубрики». Вводим название рубрики и нажимаем «Добавить новую». По итогу мы должны добавить три рубрики, как показано на рисунке 4.1.
Рисунок 4.1 – Скриншот добавленных рубрик.
Мы определили статичные страницы, теперь создадим их. Перейдите в меню «Страницы». Можно удалить все стандартные страницы (наведите и нажмите «Удалить»). Нажимаем на кнопку «Создать новую». Вас поприветствует вводное окно, в котором объяснят все нюансы.

Для примера создадим страницу контакты. В заголовке напишем
«Контакты». Сами контакты берём из файла «Языковая школа.docx» в каталоге media. Вставляем текст и нажимаем «Опубликовать» (смотрите рисунок 4.2).
Рисунок 4.2 – Пример заполнения страницы «Контакты».
Создадим страницу «Преподаватели» по аналогии, только прикрепим изображение преподавателей (смотрите рисунок 4.3).
Рисунок 4.3 – Пример оформления страницы «Преподаватели».

Отдельно самостоятельно создайте все статичные страницы. Обратите внимание, что для каждого города отдельно необходимо по заданию прикрепить изображение. Описание так же берём из файла.
После создадим меню сайта. Заходим в подменю «Меню» раздела
«Внешний вид». Вводите название меню и нажмите «Добавить». Выделите рубрику «Наши услуги» и нажмите «Добавить в меню» (смотрите рисунок
4.4).
Рисунок 4.4 – Добавление меню рубрики в меню.
Можно добавить теперь все рубрики и расставить их в порядке, как необходимо для карты сайта из задания. Теперь добавим все созданные нами страницы. Их тоже расставим согласно карте сайта. Если страница должна быть вложенной, то уводим её чуть-чуть правее и она станет дочерней
(смотрите рисунок 4.5). Выберите «Горизонтальное меню для компьютера» и нажмите «Сохранить меню».

Рисунок 4.5 – Создание подменю для сайта.
Если вы перейдёте на сайт, то увидите наше меню. Осталось настроить переход на главную страницу по умолчанию. Перейдите в меню «Внешний вид», нажмите «Настроить». Выберите меню «Настройка главной страницы».
Укажите настройки, как показано на рисунке 4.6 и нажмите «Опубликовать».
Рисунок 4.6 – Настройка главной страницы.

После настройки главной страницы можно удалить все лишние элементы. Наведите на все элементы и через синий маркер нажмите удалить.
После этого на всех страницах исчезнут лишние виджеты, которые нам не нужны (смотрите рисунок 4.7).
Рисунок 4.7 – Пример оформления главной страницы после удаления виджетов.

Раздел 5. Оформление главной страницы. Установка и настройка
плагинов.
Настроим сразу футер нашего сайта, а для этого установим плагин социальных сетей «social-icons-widget-by-wpzoom». Заходим в меню плагин и нажимаем кнопку «Загрузить новый», после нажимаем обзор и выбираем нужный плагин и устанавливаем (смотрите рисунок 5.1). После этого активируем его.
Рисунок 5.1 – Добавление нового плагина.
Добавим ссылки на социальные сети в подвал. Переходим в меню
«Внешний вид» «Виджеты». Выбираем наш виджет, затем «Подвал #2» и нажимаем «Добавить виджет» (смотрите рисунок 5.2).
Рисунок 5.2 – Добавление виджета в подвал.

В «Title» мы можем написать «Мы в социальных сетях», выбрать нужные нам сети нажать «Сохранить» (смотрите рисунок 5.3).
Рисунок 5.3 – Пример выбора социальных сетей.
Выберем внизу ещё один виджет «Текст» и добавим его в «Подвал #1».
Рисунок 5.4 – Добавление виджета для реквизитов.

Рисунок 5.5 – Пример заполнения реквизитов организации.
В результате футер оформлен согласно заданию.
Установите ещё один плагин «ninja-forms.3.4.24.2».
После активации у нас появиться новое меню «Ninja Forms», нажимаем на него и давим кнопку «Добавить новое». Выберите «Blank Form». Чтобы добавить новый элемент необходимо нажать на знак «+» внизу справа.
Первый элемент будет «Текст одной строки» (смотрите рисунок 5.6).
Рисунок 5.6 – Поле для ввода имени.

Нажимаем на шестеренку в появившемся поле. Пишем метку: «Ваше
ФИО» и включаем, что поле обязательное (смотрите рисунок 5.7).
Рисунок 5.7 – Оформление поля ФИО.
Все поля будем делать обязательными для заполнения. Добавим поля типа «Телефон» и «E-mail».
Рисунок 5.8 – Расположение полей «Телефон» и «E-mail».
Метки поставим соответствующие. Теперь добавьте поля типа «Дата» с меткой «Предполагаемая дата». После добавим кнопку, надпись менять не будем.
Рисунок 5.9 – Расположение кнопки «Отправить».

Нажимаем кнопку «Готово», потом «Опубликовать», а затем крестик вверху справа. Вас попросят ввести название, можно сделать «Запись на курс». Обратите внимание на «Сокращенный код», в будущем с помощью него мы добавим нашу форму на главную страницу (смотрите рисунок 5.10).
Рисунок 5.10 – Шорткод нашей формы.
Вернемся к главной странице через меню «Страницы». Найдите
«Главная» и нажмите изменить. Теперь добавим лозунг компании и описание. Всё берём из текстового файла в папке «media» (смотрите рисунок
5.11).
Рисунок 5.11 – Оформление главной страницы текстом.

Добавим форму на главную страницу. Нажмите «+». Найдите раздел
«Виджеты» и выберете шорткод (смотрите рисунок 5.12).
Рисунок 5.12 – Расположение элемента шорткода.
Теперь в элементе добавим шорткод нашей формы [ninja_form id=2].
Рисунок 5.13 – Добавление формы через шорткод.
Наша форма должная отображаться на главной странице. После скопируйте данные со страницы преподаватели и вставьте их ниже.

Рисунок 5.14 – Главная страница с формой.
Ставим ещё 2 плагина: «ga-google-analytics.20200325», «all-in-one-seo- pack.3.4.3». Для первого заходим в меню «Plugin settings», через меню
«Настройки» и выставляем любой ключ для «GA Tracking ID» (смотрите рисунок 5.15), и нажимаем кнопку «Save changes». В реальности такой ключ нужно генерировать через службу Google.
Рисунок 5.15 – Пример ключа для Google Analytics.

Для плагина SEO, зайдём в меню «All In One SEO» и выставим настройки для главной страницы (смотрите рисунок 5.16). После нажимаем кнопку «Обновить настройки».
Рисунок 5.16 – Пример заполнения SEO плагина.

Раздел 6. Новости.
Для публикации новости мы будем использовать меню «Записи».
Кнопка «Добавить новую» позволит нам создавать новую новость.
Заполняем новость (текст из файла в папке media), как и страницу, и нужно по заданию (заголовок, изображение и текст). Дата новости появиться в соответствии с текущей датой. Осталось её отобразить в рубрике, для этого в боковой панели открываем раздел рубрики и выбираем «Новости» (смотрите рисунок 6.1).
Рисунок 6.1 – Пример оформления новости.
Добавьте несколько новостей. Если после перейти на сайт, то мы увидим все новости. Обратите внимание, что есть дата, как необходимо по заданию. Если нажать на заголовок любой новости, то она откроется полностью. Под каждой новостью есть форма комментариев (смотрите рисунок 6.2).

Рисунок 6.2 – Форма комментирования для новости.
Если пользователь добавит комментарий, то он его увидит, но остальные пользователи не смогут, так как он ожидает одобрения администратора (смотрите рисунок 6.3).
Рисунок 6.3 – Комментарий, который ожидает одобрения.
Администратор в меню «Комментарии» может одобрить, ответить, изменить свойства, изменить сообщение, отправить в спам или удалить
(смотрите рисунок 6.4).

Рисунок 6.4 – Управление комментариями.
На этом вы ознакомились с общим примером работы с сайтом сделанным на CMS WordPress.

Раздел 7. Доступ для проверки на сайте hostland.ru
Если вы выкладываете ваш проект на сайте hostland, то в пробном режиме доступ дается белому списку ip адресов. Настроить его очень просто.
Зайдите через панель управления вашего сайта в раздел «Домены | Сайты».
Нажмите значок «ip» (смотрите рисунок 7.1). В открывшемся окне вставьте через пробел или с новой строки ip адрес, указанный на курсе в задании 6.2.
(смотрите рисунок 7.2).
Рисунок 7.1 – Панель доменов.
Рисунок 7.2 – ip адрес для добавления.
Необходимо немного времени для применения, после этого ваша работа может быть проверена.
!!!Внимание!!!
Большая просьба брать ip адрес не с картинки, а копировать с раздела 6.2.

Раздел 8. Задания для самостоятельной работы
1)
Оформите визуально сайт, чтобы он больше соответствовал целевой аудитории;
2)
Выведите на главной странице три последних новости.