Створення сторінки «Про команду розробників» у WordPress, CMS та движки для сайтів

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

З цієї причини я хочу поділитися підходом, який я застосовую при створенні сторінки «Про команду розробників» у WordPress.

команду

Створення та керування сторінкою з інформацією про розробників у WordPress вимагає використання наступних засобів:

  • Власний тип запису, відмінний від стандартних (наприклад, team);
  • Власна таксономія для фільтрації (наприклад, department);
  • Метабокси (metabox) для управління кастомними (створеними вами) полями (custom fields) введення даних (наприклад, position, email, phone та social media links).

Використовуючи ці інструменти, у цій статті ми пройдемо через усі етапи процесу створення шаблону (template) сторінки «Про команду розробників» для нашої WordPress теми.

Для початку

Для ясності, я буду описувати весь процес по кроках, і показуватиму, які зміни треба вносити до файлу functions.php .

Створення власного типу запису та таксономії

сторінки

Створення типу запису

Створення таксономії (опціонально)

У цьому прикладі ми використовуємо таксономію department не для всіх елементів. Я включив це до статті тому, що корисно розуміти, як це можна використовувати для фільтрації членів команди.

Метабокс для кастомних полів

Тепер, у нас є новий пункт меню в WordPress – «Профілі учасників команди» – і нам потрібно визначитися з даними, які ми хочемо зберігати в записі про кожного учасникакоманди. Виходячи з мого досвіду, пропоную використовувати такі поля:

Для створення кастомних метабоксів із полями я використовую плагін Advanced Custom Fields (ACF).

wordpress

команду

  1. Завантажте файл "Інформація про команду" зі списком потрібних полів: acf-export-team-details.xml.zip;
  2. Перейдіть в Інструменти (Tools) > Імпорт (Import) і виберіть WordPress;
  3. Встановіть плагін імпорту WP, якщо буде запропоновано;
  4. Завантажте та імпортуйте xml-файл ;
  5. Виберіть користувача та проігноруйте можливість імпорту вкладень.

Плагін ACF зберігає дані всередині записів, тому можна використовувати стандартний інструмент WordPress для імпорту XML. Дуже розумний хід з боку розробника плагіна, Elliot Condon.

У моєму PHP-класі я додав адміністративне повідомлення, яке пропонує встановити плагін ACF, якщо його ще не встановлено. Це корисно, щоб нагадати вам про необхідність використання цього плагіна для правильної роботи.

Кастомний шаблон

На даний момент ми маємо налаштовану систему керування, але нам також потрібно вивести інформацію на сайт. Щоб це зробити, я зазвичай створюю кастомний шаблон теми (наприклад, template-team.php), який змінює вигляд певної сторінки WordPress. Щоб дізнатися про це детальніше, ознайомтеся з офіційною документацією WordPress.org щодо кастомних полів.

Виведення записів про розробників на екран

Щоб виводити записи про нашу команду всередині кастомного шаблону, ми використовуємо наступний код:

Щоб автоматизувати процес виведення профілів, я використовував функцію get_posts. Це найпростіший ефективний метод. Я використав такі аргументи, щоб оформити та впорядкувати результати вибірки:

  • ‘post_type’ => 'team' // показуватимуться лише записи цього;
  • ‘posts_per_page’ => 50 // встановлює обмеження на кількість записів, що зчитуються;
  • 'orderby' => 'title' // упорядковує результати на ім'я;
  • ‘order’ =>; 'ASC' // у зростаючому алфавітному порядку.

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

Функції get_field та the_field вбудовані плагін ACF. Це, напевно, дві найзатребуваніші функції, якими ви користуватиметеся в процесі роботи. Вони виводять значення отриманих полів.

Тепер, закінчивши з циклом виведення, ми можемо приступити до створення нової сторінки ( Page ) WordPress, вибравши Team з списку шаблонів. Коли ви заходите на цю сторінку, бачитимете список профілів своєї команди.

wordpress

Примітка щодо продуктивності

Без використання кешування, цей шмат коду додає 26 вибірок на одну сторінку! Якщо у вас дуже великий сайт, то вкрай необхідно скористатися Transients API для кешування виводу, при інтенсивних запитах на кшталт цього. Я включив статичний метод display() у свій PHP-клас, який керує процесом кешування.

Метод display() використовує буферизацію виведення та кешування, щоб зберегти згенерований раніше нашим циклом HTML-код із профілями членів команди розробників.

Використовуючи даний підхід, у порівнянні з попереднім варіантом без кешування, ми маємо всього 1 запит, зберігаючи дорогоцінні обчислювальні ресурси, які б, в іншому випадку, були витрачені на 25 зайвих запитів до бази даних. Цетакож зменшує початкове завантаження сторінки до 400-500мс. Не погано!

Стилізація шаблону за допомогою CSS

Вуаль! Тепер у нас є інформація про всю команду розробників, і сторінка для її управління. Все це оформлено в HTML-форматі і нам залишилося лише додати деякі стилі до нового шаблону.

Умовна перевірка перед підключенням CSS

Щоб підвантажити таблиці стилів, наведені нижче, тільки до нашого кастомного шаблону (template-team.php), ми можемо використовувати наступну умовну перевірку:

Цей шматок коду завантажить файл CSS ( /assets/css/team.css ) тільки коли використовується сторінка template-team.php. Використання цього методу допоможе зберегти основні таблиці стилів незайманими.

Приклади таблиць стилів

Нижче наведено таблиці стилів, які я використав для прикладу в цій статті:

Для написання CSS-стилів я використав текстовий препроцесор LESS. Нижче представлені ті ж стилі, але записані у форматі препроцесора LESS:

Висновок

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

Дана публікація є перекладом статті «Creating a “Meet The Team” Page in WordPress», підготовленої дружньою командою проекту Інтернет-технології.