Оригинальное видео (English)
Если вы знаете английский язык, вы можете посмотреть видео-введение ниже.
1. О фреймворке
Всем привет! Мы - WPLake, агентство по разработке WordPress веб-сайтов. Представляем вам Advanced Views, специализированный WordPress фреймворк, который предлагает улучшенный способ запроса и отображения контента.
![](https://habrastorage.org/getpro/habr/upload_files/7e4/e0e/bdb/7e4e0ebdb5ca39e731228d04e300607c.png)
Основная цель 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 давайте воспользуемся распространенной задачей - добавлением нового раздела на страницу. Представьте, что у нас есть существующий сайт, созданный на основе некоторой темы, и наша задача - добавить новый раздел на нашу страницу.
![](https://habrastorage.org/getpro/habr/upload_files/c43/0e3/d3c/c430e3d3cb0364fa107b0829871b446b.png)
Этот раздел должен брать данные с ACF полей, прикрепленных к этой странице. Помимо ACF, Advanced Views поддерживает и другие источники данных, но в данном случае мы будем использовать ACF в демонстрационных целях.
Для начала нам нужно установить Advanced Views Framework из репозитория WordPress и активировать его.
![](https://habrastorage.org/getpro/habr/upload_files/db5/971/e16/db5971e16982d34ae36a42ecb6b8a820.png)
Далее создадим новую ACF группу для нашей страницы, которую назовем "О нас". После добавления полей и настройки правил расположения мы cможем создать Вид в фреймворке.
![](https://habrastorage.org/getpro/habr/upload_files/bfa/8a9/0f7/bfa8a90f765964b5886c54d553b61492.png)
Вид - это компонент, добавленный Advanced Views. Каждый Вид - это умный шаблон, отвечающий за отображение содержимого. Мы можем создать Вид используя отдельный пункт меню или с помощью специальной ссылки прямо с Field Group. Использование ссылки с Field Group избавляет нас от необходимости выбирать поля вручную, поэтому мы воспользуемся этим способом.
![](https://habrastorage.org/getpro/habr/upload_files/9b5/373/f25/9b5373f25f1a7e877e6cd13f4637d96d.png)
Как видите, наш Вид уже создан, и Advanced Views заполнил его полями из нашей группы. Мы можем изменить настройки по умолчанию, например, изменить размер изображения. Advanced Views также сгенерировал для нас шаблон по умолчанию. В шаблоне используется Twig - известный шаблонизатор. Его синтаксис очень прост, и в шаблоне мы можем использовать любые его встроенные функции.
![](https://habrastorage.org/getpro/habr/upload_files/ce1/53c/738/ce153c738a4d76a7c08964c793850405.png)
Давайте пока пропустим кастомизацию и добавим Вид на нашу страницу. Любой Вид может быть добавлен в целевое место несколькими способами, включая пользовательские блоки Gutenberg, но сейчас давайте воспользуемся шорткодом.
![](https://habrastorage.org/getpro/habr/upload_files/423/431/1a7/4234311a7c5bfa3d0fe24e6234318b76.png)
Итак, мы открыли нашу страницу, которая уже создана с использованием какой-то темы. Хотя мы могли бы создать новый раздел с помощью инструментов темы - обычно для этого используется конструктор страниц, - выбор в пользу Advanced Views обеспечивает нам более полный контроль, сохраняя при этом быстроту процесса.
Теперь нам нужно установить шорткод в нужное место и заполнить поля. Все готово, остается нажать кнопку "Обновить" и перейти на страницу, чтобы увидеть результаты.
![](https://habrastorage.org/getpro/habr/upload_files/4ad/697/ae3/4ad697ae3ba35ff4454aeca8ec2c3390.png)
Как мы видим, поля уже отображаются. В данный момент новый элемент еще не стилизирован, но поля уже отображаются. Это значительная экономия времени, поскольку Advanced Views распознал типы полей и автоматически загрузил необходимые данные в шаблон.
Если вы знакомы с ACF и другими поставщиками метаполей, то знаете, сколько времени обычно занимает данная подготовка при наличии множества полей - от проверки имен полей до чтения документации касательно формата возвращаемего значения.
2.2) Настройка Вида
Теперь давайте вернемся к Виду и добавим стилизацию. Я использовал заранее приготовые стили. Advanced Views имеет встроенный редактор кода, что удобно для небольших изменений. Кроме того, есть возможность хранения шаблонов в файловой системе, что позволяет вносить изменения в код прямо в вашей любимой IDE.
![](https://habrastorage.org/getpro/habr/upload_files/036/00e/545/03600e5455df22e9a46927f8d68f3b97.png)
Итак, мы добавили стили. Самое замечательное, что эти стили появятся только на той странице, куда мы вставили наш шорткод, так как Advanced Views использует Just-in-Time подход для доставки стилей и скриптов. Теперь мы можем нажать кнопку "Обновить" и перезагрузить страницу.
![](https://habrastorage.org/getpro/habr/upload_files/03c/715/042/03c7150426bf356854adbafb2e156339.png)
Да, вот и все! Новый раздел завершен. Advanced Views обладает множеством полезных функций и может получать данные из различных источников, включая пользователей и таксономии.
2.3) О Картах и опции хранения в файловой системе
Помимо Видов, Advanced Views добавляет Карты, которые позволяют запрашивать и отображать наборы постов. Концепция Карт также проста: это надстройка над встроенным WP_Query классом, а настройки Карты являются аргументами запроса. Как и Виды, Карты также содержат настраиваемые шаблоны, что дает нам полный контроль над содержимым.
![](https://habrastorage.org/getpro/habr/upload_files/df9/263/883/df926388373a4e723f02242241e6b752.png)
Когда вы создаете сайт с нуля, благодаря опции хранения шаблонов в файловой системе, вы можете использовать любой CSS-фреймворк, например Tailwind или Bootstrap. В WPLake мы обычно используем Tailwind, и опубликовали стартовую тему на основе блоков, чтобы вы могли быстрее начать разработку.
Более подробную информацию о фреймворке вы можете получить в Справочном центре. Справочный центр - это официальная документация по фреймворку, в которой описаны все ключевые концепции и возможности, а также содержатся советы и рекомендации.
3. Полезные ссылки
Обзор Advanced Views (где вы можете более подробно ознакомиться с Видами и Картами)
Почему был использован Twig, его преимущества и основные возможности
Как использовать WordPress Interactivity API внутри фреймворка
Попробуйте Advanced Views прямо сейчас и прокачайте свою производительность!