Створення структури майбутнього сайту. Практична робота №1

Урок 2. Створення структури майбутнього сайту

Тема: Створення структури майбутнього сайту. Практична робота №1.
Тип уроку: комбінований, практичне заняття
Мета: навчитися планувати структуру сайту та створювати її засобами WordPress.

1. Що учні повинні отримати в результаті уроку

Наприкінці уроку в кожного учня має бути створений каркас майбутнього сайту:

ГОЛОВНА
│
├── ПРО НАС
│
├── НОВИНИ
│
├── НАШІ ПРОЄКТИ
│
├── ГАЛЕРЕЯ
│
└── КОНТАКТИ

При цьому учні повинні розуміти:

• що таке структура сайту;

• що таке сторінка;

• що таке запис;

• чим сторінки відрізняються від записів;

• що таке головна сторінка;

• що таке меню;

• як створювати сторінки у WordPress;

• як створити і налаштувати меню;

• як встановити головну сторінку;

• як перевірити результат.

2. Що таке структура сайту

Перед практичною роботою пояснюємо учням дуже простими словами.

Структура сайту — це його будова.

Уявіть звичайну книгу.

Є:

• обкладинка;

• зміст;

• розділ 1;

• розділ 2;

• розділ 3;

• додатки.

Сайт має приблизно таку саму структуру.

Наприклад, сайт школи:

Сайт школи
│
├── Головна
├── Про школу
├── Новини
├── Учням
├── Вчителям
├── Галерея
└── Контакти

Коли людина заходить на сайт, вона повинна відразу зрозуміти, де що знаходиться.

Тому хороший сайт починають створювати не з красивого оформлення, а зі структури.

Laragon потрібно окремо завантажити й встановити на комп'ютер, якщо його ще немає.

У вашій ситуації послідовність така:

1. Завантажили Laragon.

2. Встановили Laragon на комп'ютер.

3. Запустили Laragon.

4. Натиснули Start All.

5. Завантажили/розмістили WordPress у середовищі Laragon.

6. Відкрили WordPress у браузері.

7. Увійшли до wp-admin.

8. Тепер можемо створювати структуру сайту.

Тобто Laragon — це перший крок, а WordPress — наступний.

Для учнів я б сформулював у конспекті так:

Перед встановленням та запуском WordPress на локальному комп'ютері необхідно підготувати локальне серверне середовище. Для цього ми використовуємо Laragon. Його потрібно завантажити з офіційного сайту, встановити на комп'ютер і запустити.

Що ми будемо створювати сьогодні

На сьогодні не потрібно створювати повністю готовий сайт.

Ми створимо його скелет.

Наприклад, майбутній сайт нашої школи:

                  САЙТ ШКОЛИ
                      │
        ┌─────────────┼─────────────┐
        │             │             │
      Головна     Про школу       Новини
        │
        ├── Наші досягнення
        ├── Учні
        ├── Вчителі
        ├── Галерея
        └── Контакти

Поки що сторінки можуть бути навіть порожніми.

Це нормально.

Головне сьогодні — правильно створити структуру.

Запускаємо WordPress

Тут важливий момент.

Оскільки ви вже завантажили WordPress на комп'ютер, на початку уроку потрібно запустити саме той локальний сервер/середовище, яке ви встановили.

Запускаємо:

Laragon

Після запуску повинно бути видно його головне вікно.

Натискаємо:

Start All

або кнопку запуску всіх служб.

Після запуску вікно буде виглядати так

Крок 2. Перевіряємо сервер

Відкриваємо браузер.

Уводимо адресу вашого локального сайту.

Наприклад:

http://localhost

або адресу, яку Laragon створив для вашого WordPress-проєкту.

Якщо WordPress встановлено правильно, відкриється сайт.

Переходимо до адміністративної панелі

Для керування сайтом нам потрібна адмінпанель WordPress.

Зазвичай вона відкривається за адресою:

http://назва-сайту/wp-admin

Наприклад:

<a href="http://school.test/wp-admin" target="_blank">http://school.test/wp-admin</a>

або:

http://localhost/назва-сайту/wp-admin

У кожного учня адреса може відрізнятися, залежно від того, як саме встановлено WordPress.
результат роботи у вигляді скріна вставте у вікно ..

Знайомимося з адміністративною панеллю

Після входу учень побачить панель керування.

Ліворуч знаходиться основне меню.

Приблизно:

Консоль
Оновлення
Записи
Медіафайли
Сторінки
Коментарі
Вигляд
Плагіни
Користувачі
Інструменти
Налаштування

Пояснюємо:

Записи

Це переважно матеріали, які регулярно додаються.

Наприклад:

• новини;

• оголошення;

• статті;

• події.

Сторінки

Це інформація, яка змінюється не так часто.

Наприклад:

• Про нас;

• Контакти;

• Про школу;

• Правила;

• Наша команда.

Медіафайли

Тут зберігаються:

• фотографії;

• зображення;

• відео;

• документи;

• інші файли.

Вигляд

Тут налаштовується зовнішній вигляд сайту:

• тема;

• меню;

• віджети;

• редактор сайту тощо.

Важливе пояснення: сторінка ≠ запис

Це потрібно добре пояснити учням.

Наприклад:

Сторінка

Про нашу школу

Вона може існувати роками.

Запис

8 жовтня 2026 року учні школи взяли участь у...

Через тиждень з'явиться нова новина.

Через місяць — ще одна.

Тобто:

Сторінки — постійна інформація.

Записи — інформація, яка регулярно оновлюється.

Створюємо першу сторінку — «Головна»

Тепер починається практична частина.

У лівому меню натискаємо:

Сторінки → Додати нову

або:

Pages → Add New

Залежно від мови WordPress.

Крок 1

У полі назви вводимо:

Головна

Поки що більше нічого не пишемо.

Крок 2

Натискаємо:

Опублікувати

WordPress може попросити підтвердження.

Натискаємо:

Опублікувати

Створюємо сторінку «Про школу»

Знову:

Сторінки → Додати нову

Назва:

Про школу

Натискаємо:

Опублікувати

10. Створюємо сторінку «Новини»

Знову створюємо нову сторінку.

Назва:

Новини

Натискаємо:

Опублікувати

11. Створюємо сторінку «Наші проєкти»

Створюємо:

Наші проєкти

і публікуємо.

12. Створюємо сторінку «Галерея»

Створюємо:

Галерея

і публікуємо.

13. Створюємо сторінку «Контакти»

Створюємо:

Контакти

і публікуємо.

Що повинно вийти

У результаті в розділі Сторінки повинно бути приблизно:

Не хвилюємося, що сторінки поки порожні.

Сьогодні ми створюємо саме структуру.

Створюємо структуру другого рівня

Тепер покажемо учням, що структура може бути складнішою.

Наприклад, у розділі Про школу можуть бути:

Про школу
│
├── Історія школи
├── Адміністрація
├── Педагогічний колектив
└── Документи

Створимо ці сторінки.

Сторінка 1

Історія школи

Сторінка 2

Адміністрація

Сторінка 3

Педагогічний колектив

Сторінка 4

Документи

Створюємо вкладені сторінки

Ось тут для учнів починається цікавіше.

Потрібно зробити так, щоб:

Про школу
   ├── Історія школи
   ├── Адміністрація
   ├── Педагогічний колектив
   └── Документи

Для цього відкриваємо сторінку:

Історія школи

У налаштуваннях сторінки шукаємо параметр:

Батьківська сторінка

або:

Parent

Вибираємо:

Про школу

Так само робимо для:

Адміністрація → Про школу

Педагогічний колектив → Про школу

Документи → Про школу

Що таке батьківська сторінка

Пояснюємо учням.

Батьківська сторінка — це сторінка вищого рівня.

Наприклад:

Про школу

є батьківською для:

Історія школи
Адміністрація
Педагогічний колектив
Документи

Це приблизно як папки на комп'ютері.

Наприклад:

Школа
│
└── Документи
     │
     ├── Накази
     ├── Програми
     └── Звіти

Створюємо меню сайту

Тепер у нас є сторінки.

Але відвідувач сайту повинен мати можливість ними користуватися.

Для цього існує меню навігації.

Переходимо:

Вигляд → Меню

У деяких сучасних темах WordPress цей пункт може називатися:

Вигляд → Редактор

або:

Editor → Navigation

Це залежить від встановленої теми WordPress.

19. Що таке меню

Пояснюємо:

Меню — це система посилань, за допомогою якої користувач переходить між сторінками сайту.

Наприклад:

ГОЛОВНА | ПРО ШКОЛУ | НОВИНИ | ПРОЄКТИ | ГАЛЕРЕЯ | КОНТАКТИ

Якщо натиснути:

ГАЛЕРЕЯ

відкриється сторінка «Галерея».

20. Додаємо сторінки до меню

Додаємо:

Головна
Про школу
Новини
Наші проєкти
Галерея
Контакти

Зберігаємо меню.

21. Створюємо підменю

Тепер зробимо:

Про школу
   │
   ├── Історія школи
   ├── Адміністрація
   ├── Педагогічний колектив
   └── Документи

У редакторі меню перетягуємо відповідні пункти трохи вправо під Про школу.

Візуально повинно бути приблизно:

Про школу
    Історія школи
    Адміністрація
    Педагогічний колектив
    Документи

Це називається вкладене меню або підменю.

22. Встановлюємо головну сторінку

Тепер важливий момент.

WordPress повинен знати:

Яку сторінку показувати першою, коли людина заходить на сайт?

Для цього використовуємо:

Налаштування → Читання

Шукаємо:

На головній сторінці відображати

і вибираємо:

Статичну сторінку

У полі:

Головна сторінка

вибираємо:

Головна

Зберігаємо зміни.

23. Перевіряємо сайт

Перевіряємо сайт

Тепер натискаємо:

Переглянути сайт

або відкриваємо сайт у новій вкладці.

Перевіряємо:

1.

Чи відкривається головна сторінка?

2.

Чи працює:

Про школу?

3.

Чи відкривається:

Новини?

4.

Чи працює:

Галерея?

5.

Чи відкривається:

Контакти?

6.

Чи працює підменю?

Контрольні запитання

Наприкінці уроку можна поставити учням:

1. Що таке структура сайту?

2. Для чого потрібне меню?

3. Що таке вебсторінка?

4. Чим сторінка відрізняється від запису?

5. Що таке батьківська сторінка?

6. Що таке підменю?

7. Для чого потрібна головна сторінка?

8. Де створюються сторінки WordPress?

9. Де налаштовується зовнішній вигляд сайту?

10. Для чого потрібна панель адміністратора?

Результат роботи