[Перевод] Введение в Advanced Views Framework
Оригинальное видео (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 прямо сейчас и прокачайте свою производительность!
