Оригинальное видео (English)

Если вы знаете английский язык, вы можете посмотреть видео-введение ниже.

1. О фреймворке

Всем привет! Мы - WPLake, агентство по разработке WordPress веб-сайтов. Представляем вам Advanced Views, специализированный WordPress фреймворк, который предлагает улучшенный способ запроса и отображения контента.

Основная цель Advanced Views - ускорить и упростить создание качественного WordPress фронтенда. Фреймворк позволяет создавать "правильный" фронтенд не принося в жертву best practices и современные инструменты, причем так же быстро, как в случае использования page builders.

Хотя по своей природе Advanced Views является фреймворком, не стоить пугаться этого термина. За кулисами Advanced Views построен на простой модульной концепции и включает в себя набор известных техник и best practices.

Это гибкий инструмент, который можно использовать как для добавления новых секций к любому существующему сайту, так и для разработки с нуля. Advanced Views распространяется в виде плагина и может быть использован не только опытными разработчиками, но и web creators и владельцами сайтов для решения разнообразных простых задач.

Чтобы упростить процесс, фреймворк использует гибридный подход: он предоставляет пользовательский интерфейс для первичного создания и базовой настройки, в то время как полагается на непосредственные правки кода для получения необходимого макета.

Для создания макетов требуются как минимум базовые знания HTML и CSS, а для использования продвинутых возможностей фреймворка потребуется знание PHP и JavaScript.

2. Демо пример

2.1) Установка и создание Вида

Для знакомства с Advanced Views давайте воспользуемся распространенной задачей - добавлением нового раздела на страницу. Представьте, что у нас есть существующий сайт, созданный на основе некоторой темы, и наша задача - добавить новый раздел на нашу страницу.

Этот раздел должен брать данные с ACF полей, прикрепленных к этой странице. Помимо ACF, Advanced Views поддерживает и другие источники данных, но в данном случае мы будем использовать ACF в демонстрационных целях.

Для начала нам нужно установить Advanced Views Framework из репозитория WordPress и активировать его.

Далее создадим новую ACF группу для нашей страницы, которую назовем "О нас". После добавления полей и настройки правил расположения мы cможем создать Вид в фреймворке.

Вид - это компонент, добавленный Advanced Views. Каждый Вид - это умный шаблон, отвечающий за отображение содержимого. Мы можем создать Вид используя отдельный пункт меню или с помощью специальной ссылки прямо с Field Group. Использование ссылки с Field Group избавляет нас от необходимости выбирать поля вручную, поэтому мы воспользуемся этим способом.

Как видите, наш Вид уже создан, и Advanced Views заполнил его полями из нашей группы. Мы можем изменить настройки по умолчанию, например, изменить размер изображения. Advanced Views также сгенерировал для нас шаблон по умолчанию. В шаблоне используется Twig - известный шаблонизатор. Его синтаксис очень прост, и в шаблоне мы можем использовать любые его встроенные функции.

Давайте пока пропустим кастомизацию и добавим Вид на нашу страницу. Любой Вид может быть добавлен в целевое место несколькими способами, включая пользовательские блоки Gutenberg, но сейчас давайте воспользуемся шорткодом.

Итак, мы открыли нашу страницу, которая уже создана с использованием какой-то темы. Хотя мы могли бы создать новый раздел с помощью инструментов темы - обычно для этого используется конструктор страниц, - выбор в пользу Advanced Views обеспечивает нам более полный контроль, сохраняя при этом быстроту процесса.

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

Как мы видим, поля уже отображаются. В данный момент новый элемент еще не стилизирован, но поля уже отображаются. Это значительная экономия времени, поскольку Advanced Views распознал типы полей и автоматически загрузил необходимые данные в шаблон.

Если вы знакомы с ACF и другими поставщиками метаполей, то знаете, сколько времени обычно занимает данная подготовка при наличии множества полей - от проверки имен полей до чтения документации касательно формата возвращаемего значения.

2.2) Настройка Вида

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

Итак, мы добавили стили. Самое замечательное, что эти стили появятся только на той странице, куда мы вставили наш шорткод, так как Advanced Views использует Just-in-Time подход для доставки стилей и скриптов. Теперь мы можем нажать кнопку "Обновить" и перезагрузить страницу.

Да, вот и все! Новый раздел завершен. Advanced Views обладает множеством полезных функций и может получать данные из различных источников, включая пользователей и таксономии.

2.3) О Картах и опции хранения в файловой системе

Помимо Видов, Advanced Views добавляет Карты, которые позволяют запрашивать и отображать наборы постов. Концепция Карт также проста: это надстройка над встроенным WP_Query классом, а настройки Карты являются аргументами запроса. Как и Виды, Карты также содержат настраиваемые шаблоны, что дает нам полный контроль над содержимым.

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

Более подробную информацию о фреймворке вы можете получить в Справочном центре. Справочный центр - это официальная документация по фреймворку, в которой описаны все ключевые концепции и возможности, а также содержатся советы и рекомендации.

3. Полезные ссылки

Обзор Advanced Views (где вы можете более подробно ознакомиться с Видами и Картами)
Объяснение ключевых концепций
Стартовая тема
Почему был использован Twig, его преимущества и основные возможности
Опция хранения шаблонов в файловой системе
Как использовать WordPress Interactivity API внутри фреймворка

Попробуйте Advanced Views прямо сейчас и прокачайте свою производительность!

Введение в Advanced Views Framework