Перебудова блогу Divi за допомогою кастомних шорткодів

Нещодавно я переробив блог для Rev6 — фітнес-платформи, що використовує WordPress, Divi та Cloudways.

Я не використовував стандартний модуль Divi Blog. Йому бракує контролю, необхідного для кастомної маршрутизації URL та функцій членства. Замість цього я створив систему кастомних шорткодів у дочірній темі (child theme).

Такий підхід дозволяє зберігати логіку у версіонованому PHP, а не ховати її в базі даних конструктора сторінок.

Налаштування використовує такі шорткоди:

  • [rev6_blog_sidebar] для навігації та пошуку
  • [rev6_sort_dropdown] для сортування
  • [rev6_post_grid] для макета
  • [rev6_author_bar] для підпису автора
  • [rev6_author_bio] для розділу про автора
  • [rev6_related_posts] для додаткового читання

Ось мої технічні висновки за результатами цієї розробки:

  1. Уникайте лінивих хаків із CSS grid Я колись використовував "grid-row: 1 / span 999", щоб зробити сайдбар на всю сторінку. Це створило тисячі порожніх рядків і величезні пробіли. Замість цього використовуйте іменовані області сітки (named grid areas). Це чистіше і безпечніше.

  2. Перевіряйте дані перед кодом Я витратив купу часу на налагодження розділу "related posts", який не відображався. Код був ідеальним. Проблема була в даних. У категорії був лише один допис. Мій код виключав поточний допис, залишаючи нуль результатів. Завжди перевіряйте вміст бази даних, перш ніж шукати баги у своїх функціях.

  3. Розумійте різницю між файлами та базою даних Коли я переносив сайт зі staging-середовища на live, макет виглядав неправильно. Я намагався виправити це за допомогою CSS, але марно. Проблема полягала в тому, що імпорт переносить шаблони, а не вміст бази даних. Такі речі, як ширина модулів та призначення дописів, зберігаються в базі даних. Якщо після міграції макет змінився, дивіться в базу даних, а не в таблицю стилів.

  4. Ніколи не переносять повну базу даних на production Повна синхронізація перезаписує реальні дані користувачів, такі як замовлення та реєстрації. Використовуйте цільовий перенос замість загального копіювання всього об'єму.

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

Редизайн уже в мережі. Він має чистий редакційний макет і кастомну систему авторів. Написання коду було найпростішою частиною. Справжні уроки принесло саме середовище розробки.

Джерело: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g