Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Themes
Code

Динамічні Шаблони Сторінок в WordPress, Частина 1

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 2

Ukrainian (українська мова) translation by Alex Kovalenko (you can also view the original English article)

Шаблони сторінок WordPress - це відмінний засіб змінити зовнішній вигляд певних веб сторінок. Ви можете використовувати їх для додавання безлічі функцій до вашого сайту.

Вони, тим часом, мають одне обмеження в тому, що вони "статичні" шаблони. Ви жодним чином не можете змінити чи вплинути на іх поведінку. Ви або активуєте шаблон сторінки або ні. За замовчування, шаблон сторінки виконую одну фіксовану функцію, як то показ мапи сайту чи видалення бокової панелі для відображення сторінки на всю ширину вікна.

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

Нарешті, я покажу три реальні приклади повністю робочих динамічних шаблонів сторінки. Я також поясню деякі продвинуті теми, наприклад, як прив'язати шаблон сторінки до довільного типу запису.

Хочете Піти Разом?

Для того, щоб йти шляхом цієї серії уроків, вам знадобиться сайт WordPress з доступом адміністратора. На сьогодні, найпростіший шлях - це використання свого локального середовища. Спеціальний текстовий редактор також корисний та не обов'язковий.

Якщо вам трапилося розробляти з WordPress, використовуючи віддалений сервер, вам знадобиться можливість редагувати тему в адмін панелі WordPress, чи редагувати її локально та потім заливати файли на сервер через FTP клієнт.

Для імплементації наших шаблонів сторінок, я буду використовувати дочірню тему, засновану на батьківській темі Twenty Seventeen, яка є останньою дефолтною WordPress темою. Перед тим як вирушити зі мною, переконайтеся, що вона у вас встановлена.

The default Twenty Seventeen Theme

Ви можете використовувати дочірню тему, засновану на іншій батьківській, вам тільки треба змінити деякий код, щоб зробити його принадним до вашої теми. Базовий метод залишається тим самим для будь-якої дочірньої теми.

Шаблони Сторінок WordPress

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

WordPress використовує ієрархію шаблонів для вирішення, який шаблон відображає поточну сторінку. В переважній кількості сценаріїв, для сторінок використовується page.php, та може бути й іншим, якщо ви переглядаєте сторінку з певним ID або ярликом. Тим часом, якщо ви виберете шаблон сторінки для певної веб сторінки, йому завжди буде надаватися перевага, що й робить цей процес налаштування сторінок таким простим.

Давайте наведу найбільш типові приклади з використання шаблонів сторінок WordPress:

  • Форма Контактів
  • Портфоліо
  • Питання що Часто Задаються
  • Власна Сторінка 404
  • Сторінка Авторизації
  • Мапа Сайту
  • Сторінка з Шириною Вікна
  • Сторінка з Записами Блогу
  • Сторінка з Віджетами
  • Та багато іншого...

Я можу продовжувати, та ви вловили ідею. Шаблони сторінок кльові! Ви можете використовувати їх для всього чого завгодно.

Якщо ви використовували WordPress хоч якійсь час, дуже вирогідно, що ви вже зустрічалися з одним чи декількома прикладами вище. Більшість тем йде зі своїми шаблонами сторінок, виконаними в тому ж дусі, що й тема, та ви можете додати своїх, використовуючи дочірню тему. Я коротко поясню, як це зробити.

Шаблони сторінок такі корисні, тому що вони надають вам контроль над всією сторінкою. Ви вирішуєте, залишити чи ні шапку, підвал чи бокову панель сайту. Це одна з причин, чому шаблони на всю ширину вікна такі поширені -  так просто маніпулювати боковою панелью через шаблон сторінки.

Щоб побачити всі доступні шаблони сторінок, перейдіть до редактора сторінки WordPress і відкрийте спадне меню Шаблон, скориставшись формою Шаблони Сторінок. Просто виберіть потрібний шаблон сторінки, і після оновлення сторінки ви зможете переглянути шаблон в дії.

Додаємо Шаблони Сторінки, Використовуючи Дочірню Тему

Як я вже зазначав, ви будемо використовувати власно створену дочірню тему WordPress для імплементації всіх шаблонів сторінок в цьому уроці. Я почну з базової дочірньої теми та шаблонів, і надалі додам більше варіативності.

Весь процес буде викладений крок за кроком, тож не бійтеся, якщо ви не знайомі з дочірніми темами та/або шаблонами сторінок. Ви познайомитеся до кінця цього уроку.

Головна ідея дочірньої теми полягає в тому, що вона дозволяє налаштувати вигляд вашої поточної теми (яку називають батьківською) так, що оновлення останньоі не вплине на вигляд першої.

Якщо додати код безпосередньо до батьківської теми, то всі налаштування будуть переписані та втрачені в процесі запланованого оновлення теми. Це важливий момент, бо кожна тема з хорошою підтримкою оновлюється регулярно. Дізнатися більше про дочірню тему можна, переглянувши офіційну документацію.

Цікаво відмітити, щоб з технічної точки зору можливо використовувати плагін для додавання шаблонів сторінок, але через дочірню тему це робити значно простіше. Я не буду ускладнювати речі, додаючи додатковий код, тож ми створимо дочірню тему для імплементації шаблонів сторінок.

Давайте Почнемо!

Добре, досить теорії, давайте створимо початковий шаблон сторінки! Він буде розташований в власній дочірній темі Twenty Seventeen, яка буде виступати як контейнер для шаблонів, тож давайте спочатку створимо дочірню тему.

Відкрийте папку теми та створіть нову папку для дочірньої. Згідно з кращими практиками WordPress, нам треба назвати папку для дочірньої теми так само як і батьківську тему з додаванням '-child' в кінці. Оскільки папка батьківської теми називається twentyseventeen, назвіть папку для дочірньої теми twentyyteenteen-child. Всередині нової папки створіть один файл з назвою style.css і додайте наступний блок коментарів у верхній частині сторінки.

Тепер нам потрібно вказати всі стилі з батьківської теми Twenty Seventeen. Якщо ви раніше працювали з дочірніми темами, то ви мабуть робили це, додаючи директиву CSS @import безпосередньо під блоком коментарів. Це більше не вважається найкращою практикою WordPress через проблеми зі швидкістю. Замість цього ми  підключемо стилі батьківської теми, що є більш ефективним.

Всередині кореневої папки дочірньої теми створіть файл functions.php та додайте наступний код для налаштування порожнього контейнера класу. Ми будемо використовувати цей клас для всього нашого коду налаштування.

Примітка: закривати PHP твердження не обов'язково, але ви можете зробити це, якщо хочете.

Тепер додайте хук та колбек для підключення стилів батьківської теми. Зробіть це через додавання двох методів класу.

Збережіть зміни та активуйте дочірню тему. Тепер у вас є повністю функціональна, хоча й проста, дочірня тема Twenty Seventeen. Щоб перевірити, чи працює вона правильно, додайте рядок власної CSS до style.css.

Якщо все добре, ви побачите, що весь текст вашого сайту тепер забарвлений в яскраво-червоний!

Updated styles as per the child theme

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

Додаємо Наш Перший Шаблон Сторінки

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

Тим часом, якщо у вас декілька шаблонів сторінок, ви можете обрати окрему папку для кращої організації файлів. Назва теки не важлива, але вона повинна знаходитися в кореневому каталозі дочірньої теми, в іншому разі WordPress не зможе розпізнати ваші шаблони сторінок. В цьому уроці, я буду використовувати папку під назвою page-templates.

Давайте додамо новий шаблон сторінки до нашої дочірньої теми. Стандартний шлях - зробити копію файлу page.php батьківської теми та добавити її до нашої дочірньої теми. Ви можете назвати файл як вам завгодно, та я б рекомендував додати щось впізнаване, щоб було зрозуміло, що ми маємо справу саме з шаблоном сторінки. Я почну з test-page-template.php.

Після додавання page.php до вашої теки page-templates, структура вашої дочірньої теми повинна виглядати так:

Adding the first page template

Відкрийте test-page-template.php та замініть блок коментарів наступним:

Цей крок дуже важливий, оскільки блок коментарів повідомляє WordPress визнати файл як шаблон сторінки та додати його до списку доступних шаблонів сторінок на екрані редактора сторінки.

Повний код шаблона сторінки зараз виглядає так:

Давайте перевіримо наш шаблон сторінки. Перейдіть до панелі адміністратора WordPress і відредагуйте будь-яку існуючу сторінку або створіть нову. На екрані редактора сторінки виберіть спадне меню Шаблон з мета-вікна Атрибути Сторінки, щоб призначити наш шаблон сторінки на поточну сторінку.

The Page Attributes

Оскільки ми просто скопіювали файл шаблону page.php батьківської теми, наш персоналізований шаблон сторінки не робить нічого більше виведення поточної сторінки, що не дуже корисно. Крім того, нам не потрібно виводити зміст редактора або коментарі, тому видаліть їх з while циклу шаблону  та додайте власне повідомлення. Змінити вміст циклу while на наступне.

Збережить та перегляньте фронтенд сторінки.

Viewing the page template on the front-end

Примітка. Якщо ви не бачите спеціальне повідомлення, переконайтеся, що ви вибрали шаблон для сторінки в редакторі сторінки та зберегли його для оновлення налаштувань.

Давайте зробимо наш шаблон сторінки більш корисним. Замініть повідомлення, яке ми додали, наступним кодом, щоб вивести мапу сайту всіх опублікованих сторінок.

Це призведе до наступного результату.

Viewing the sitemap

Легко побачити, наскільки корисні шаблони сторінок. Але ми можемо зробити їх ще кращими!

Висновок

Що ж, ми створили дочірню тему та використали її для реалізації нашого стандартного шаблону сторінки. У наступному уроці я покажу вам крок за кроком, як розширити шаблони сторінок та зробити їх гнучкішими.

Зокрема, ми створимо загальний динамічний шаблон сторінки, додаючи власні елементи керування до екрана редактора сторінки. Логіка керування буде додана до шаблону сторінки, щоб ми могли безпосередньо налаштувати спосіб відображення шаблону сторінки.

WordPress має надзвичайно активну економіку. Існує безліч тем, плагінів, бібліотек та інших продуктів, що допоможуть вам побудувати ваш сайт та проект. Природа платформи з відкритим кодом також робить його чудовим вибором для покращення навичок програмування. Якою не була ваша мета, Як би там не було, ви можете переглянути все, що є у нас на Envato Marketplace.

Це мій перший урок (будь ласкаві!), Тому будь ласка, залишайте будь-які відгуки та зауваження в коментарях. Я зроблю все можливе, щоб відповісти на кожне питання.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.