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

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

Ті, хто просто хоче отримати кінцевий результат, можуть натиснути кнопку нижче.

Переглянути приклад

Завантажити

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

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

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

Для початку

Перед тим, як ми почнемо, я хочу прояснити деякі речі. Наведена вище посилання, містить приклади для даної статті, в яких я застосував об’єктно-ориентрованный підхід і зберіг весь код в окремому php-файл, який можна включати в файл functions.php своїх тем.

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

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

Насамперед, нам необхідно зареєструвати новий тип запису (наприклад, team). Також, можете зареєструвати власний тип таксономії (наприклад, department), якщо необхідна фільтрація або категоризація.

Даний тип запису буде додавати нове меню Team Profiles в адміністративну панель WordPress, відокремлюючи всі записи, що стосуються команди розробників від стандартних записів та сторінок (Posts та Pages), для спрощення управління ними.

Таксономія буде додавати створену нами категорію до записів типу «team», дозволяючи фільтрувати та впорядковувати всю команду. Це дуже корисно, коли у вас в команді більше 10 осіб. Також, це зручно для впорядкування учасників команди за місцезнаходженням або відділу.

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

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

/**
* Реєстрація типу запису `team`
*/
function team_post_type() {
// масив міток для полів і кнопок
$labels = array(
‘name’ => _x(«Team», «post type general name»),
‘singular_name’ => _x(«Team», «post type singular name»),
‘menu_name’ => ‘Team Profiles’,
‘add_new’ => _x(«Add New», «team item»),
‘add_new_item’ => __(«Add New Profile»),
‘edit_item’ => __(«Edit Profile»),
‘new_item’ => __(«New Profile»),
‘view_item’ => __(«View Profile»),
‘search_items’ => __(«Search Profiles»),
‘not_found’ => __(«No Profiles Found»),
‘not_found_in_trash’ => __(«No Profiles Found in Trash»),
‘parent_item_colon’ =>»
);
// Реєстрація типу запису
register_post_type(‘team’ , array(
‘labels’ => $labels,
‘public’ => true,
‘has_archive’ => false,
‘menu_icon’ => get_stylesheet_directory_uri() . ‘/lib/TeamProfiles/team-icon.png’,
‘rewrite’ => false,
‘supports’ => array(‘title’, ‘editor’, ‘thumbnail’)
) );
}
add_action( ‘init’, ‘team_post_type’, 0 );

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

/**
* Реєстрація таксономії `department`
*/
function team_taxonomy() {
// масив міток для полів і кнопок
$singular = ‘Department’;
$plural = ‘Departments’;
$labels = array(
‘name’ => _x( $plural, «taxonomy general name»),
‘singular_name’ => _x( $singular, «taxonomy singular name»),
‘search_items’ => __(«Search $singular»),
‘all_items’ => __(«All $singular»),
‘parent_item’ => __(«Parent $singular»),
‘parent_item_colon’ => __(«Parent $singular:»),
‘edit_item’ => __(«Edit $singular»),
‘update_item’ => __(«Update $singular»),
‘add_new_item’ => __(«Add New $singular»),
‘new_item_name’ => __(«New $singular Name»),
);
// Реєстрація та прикріплення таксономії до типу запису ‘team’
register_taxonomy( strtolower($singular), ‘team’, array(
‘public’ => true,
‘show_ui’ => true,
‘show_in_nav_menus’ => true,
‘hierarchical’ => true,
‘query_var’ => true,
‘rewrite’ => false,
‘labels’ => $labels
) );
}
add_action( ‘init’, ‘team_taxonomy’, 0 );

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

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

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

  • Розташування (відділ);
  • Електронна пошта;
  • Телефон;
  • Сторінка в Twitter;
  • Сторінка в LinkedIn.

Щоб керувати даними полями, потрібно створити кнопки «Додати запис» (Add New) і «Редагувати» (Edit), які дозволять адміністраторам сайту і авторам інтуїтивно просто додавати і оновлювати цю інформацію.

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

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

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

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

Якщо ви такий же лінивий (а точніше економить час), як я, можете скористатися імпортом XML-файлу, щоб автоматизувати процес створення полів. Ось покрокова інструкція:

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

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

    Замітка

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

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

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

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

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

    ‘team’,
    ‘posts_per_page’ => -1, // Необмежена кількість записів
    ‘orderby’ => ‘title’, // Впорядковуємо за алфавітом
    ) );
    if ( $team_posts ):
    ?>

    Про команді розробників

    «Окремі люди можуть зробити багато чого, але команда — ще більше!»

    ID) ) {
    $src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘team-thumb’ );
    $thumb_src = $src[0];
    }
    ?>
    Створення сторінки «Про команді розробників» у WordPress




    Щоб автоматизувати процес виведення профілів, я використовував функцію 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-клас, який керує процесом кешування.

    if ( $team_profiles = TeamProfiles::display() )
    echo $team_profiles;

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

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

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

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

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

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

    /**
    * Завантаження таблиць CSS для template-team.php
    */
    function team_styles() {
    if ( is_page_template(‘template-team.php’) )
    wp_enqueue_style( ‘team-template’, get_stylesheet_directory_uri() . ‘/assets/css/team.css’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘team_styles’, 101 );

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

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

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

    /* ==============================================
    Team profiles
    ============================================== */
    .profiles {
    margin-bottom: -20px;
    }
    .intro {
    padding-left: 140px;
    }
    .intro h2 {
    margin: 0 0 7px;
    }
    .intro .lead {
    line-height: 120%;
    font-size: 1.1 em;
    font-style: italic;
    margin: 0 0 35px;
    }
    .profile {
    position: relative;
    margin: 0 0 20px;
    }
    .profile:nth-child(even) {
    clear: left;
    }
    .profile-header {
    position: absolute;
    top: 0;
    }
    .profile-header img {
    float: left;
    }
    .profile-content {
    font-size: 14px;
    padding: 27px 0 0 20px;
    line-height: 1.4 em;
    margin: 0 0 0 125px;
    }
    .profile-content h3 {
    margin: 0;
    }
    .profile-content .lead {
    font-size: 1.3 em;
    line-height: 100%;
    font-style: italic;
    margin: 3px 0 20px;
    }
    .profile-content:before {
    content: «;
    width: 36px;
    height: 3px;
    background: #dededc;
    position: absolute;
    top: 0;
    }
    .profile-content p {
    margin: 0 0 10px;
    }
    .profile-footer {
    position: absolute;
    top: 121px;
    width: 100px;
    text-align: center;
    }
    .profile-footer a {
    line-height: 18px;
    margin: 0 3px;
    display: inline-block;
    }
    .profile-footer a:hover i {
    color: #595959;
    }
    .profile-footer a:active i {
    color: #000;
    }
    .profile-footer i {
    font-size: 18px;
    position: relative;
    }
    .profile-footer i.icon-envelope {
    font-size: 16px;
    top: -1px;
    }
    .profile-footer i.icon-linkedin {
    font-size: 16px;
    top: -1px;
    }

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

    /* ==================================================
    Team profiles
    ================================================== */
    // Mixins
    .border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }
    // Global
    .profiles {
    margin-bottom: -20px; // Offset adjustment
    }
    .intro {
    padding-left: 140px;
    h2 {
    margin: 0 0 7px;
    }
    .lead {
    line-height: 120%;
    font-size: 1.1 em;
    font-style: italic;
    margin: 0 0 35px;
    }
    }
    .profile {
    position: relative;
    margin: 0 0 20px;
    &:nth-child(even) {
    clear: left;
    }
    }
    // Header
    .profile-header {
    position: absolute;
    top: 0;
    img {
    float: left;
    }
    }
    // Content
    .profile-content {
    font-size: 14px;
    padding: 27px 0 0 20px;
    line-height: 1.4 em;
    margin: 0 0 0 125px;
    h3 {
    margin: 0;
    }
    .lead {
    font-size: 1.3 em;
    line-height: 100%;
    font-style: italic;
    margin: 3px 0 20px;
    }
    // Top separator
    &:before {
    content: «;
    width: 36px;
    height: 3px;
    background: #dededc;
    position: absolute;
    top: 0;
    }
    p {
    margin: 0 0 10px;
    }
    }
    // Footer
    .profile-footer {
    position: absolute;
    top: 121px;
    width: 100px;
    text-align: center;
    a {
    line-height: 18px;
    margin: 0 3px;
    display: inline-block;
    }
    a:hover i { color: #595959; }
    a:active i { color: #000; }
    i {
    font-size: 18px;
    position: relative;
    }
    i.icon-envelope {
    font-size: 16px;
    top: -1px;
    }
    i.icon-linkedin {
    font-size: 16px;
    top: -1px;
    }
    }

    Висновок

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

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

    Переклад статті «Creating a «Meet The Team Page in WordPress» був підготовлений дружною командою проекту Сайтостроение від А до Я.

    ОСТАВЬТЕ ОТВЕТ

    Please enter your comment!
    Please enter your name here