Натяжка проекта на WordPress

Установка и настройка

Установка wordpress

Зайдите на сервер
Загрузите на него архив с последним дистрибутивом wordpress. Распакуйте.
В wp-config.php пропишите даннеы для базы данных:

/** Имя базы данных для WordPress */
define( 'DB_NAME', '' );

/** Имя пользователя базы данных */
define( 'DB_USER', '' );

/** Пароль к базе данных */
define( 'DB_PASSWORD', '' );

/** Имя сервера базы данных */
define( 'DB_HOST', 'localhost' );

Включаем логирование сайта

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);

Регистрируем админа, заполняем поля с доступами к базе данных
Устанавливаем необходимые плагины:

Classic Editor - Автор: WordPress Contributors [classic-editor]
Cyr-To-Lat - Автор: Sergey Biryukov, Mikhail Kobzarev, Igor Gergel [cyr2lat]
Yoast SEO - Автор: Team Yoast [wordpress-seo]
SVG Support - Автор: Benbodhi [svg-support]
Duplicate Page - Автор: mndpsingh287 [duplicate-page]

Помогающие в разработке плагины (рекоммендуются):

Query Monitor - Автор: John Blackbourn [query-monitor]
WP phpMyAdmin - Автор: Puvox.software [wp-phpmyadmin-extension]

Плагин для настройки smtp сервера

WP Mail SMTP от WPForms - Автор: WP Mail SMTP [wp-mail-smtp]

Плагин для интернет-магазина

WooCommerce - Автор: Automattic [woocommerce]

Добавляем тему сайта:

создайте папкус названием вашей темы
внутри папки с темой создайте пустой файл index.php и style.css
перенесите туда дефолтную тему

Установка bedrock

Подключаемся по ssh к дев серверу и устанавливаем wordpress на базе bedrock через composer:

composer create-project roots/bedrock .

Скопируйте env.example и на его основе создайте .env, куда необходимо прописать все необходимые переменные среды:

DB_NAME - Имя базы данных
DB_USER - Пользователь базы данных
DB_PASSWORD - Пароль базы данных
DB_HOST - Хост базы данных

WP_ENV - development (в соответствии в оскружающей средой)
WP_HOME - https://example.com
WP_SITEURL - https://example.com/wp

Соли ниже генерируется здесь (Env Format)

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, AUTH_SALT, SECURE_AUTH_SALT, LOGGED_IN_SALT,NONCE_SALT

Установите папку Bedrock в качестве корневого каталога документов на вашем веб-сервере web:/path/to/site/web/

Регистрируем админа
Поставим необходимые плагины через зависимости composer. Для этого деобходимо отредактировать composer.json, добавив в него зависимости на необходимые пакеты в виде namespase/название плагина ^минимальная версия. Добавляем в require

 "wpackagist-plugin/classic-editor": "^1.6"
 "wpackagist-plugin/cyr2lat": "^6.1"
 "wpackagist-plugin/wordpress-seo": "^23.2"
 "wpackagist-plugin/svg-support": "^2.5"
 "wpackagist-plugin/duplicate-page": "^4.5"
 "wpackagist-plugin/query-monitor": "^3.16"
 "wpackagist-plugin/wp-phpmyadmin-extension": "^5.2.1"
 "wpackagist-plugin/woocommerce": "^1.0.0"
 "wpackagist-plugin/wp-mail-smtp": "^1.0.0"

Добавляем тему сайта:

создайте папкус названием вашей темы
внутри папки с темой создайте пустой файл index.php и style.css
перенесите туда дефолтную тему

Первичная настройка

Перейдине во вкладку внешний вид->темы и выберите созданную ранее тему, активируйте ее.
Переходим в настройки->чтение и изменяем пункт “на главной странице отображать”. Выбираем статическую страницу и определяем ее как главную (заводим новую, не переопределяем старые).
Переходим в настройки->постоянные ссылки и изменяем формирование роутов в зависимости от требований проекта (обычно указывается произвольно /%category%/%postname%/).

Заведение базовой информации о сайте

Переходим в ACF->Страницы настроек и создаем страницу “Настройки сайта” (кнопка Добавить новое), заполняем поля:

Page Title - Настройки сайта
Menu Slug - settings-page
Parent Page - No Parent
включаем расширенную конфигурацию В ней выбираем:
значок меню
Menu Title - Настройки сайта
Позиция меню - 55
включаем Redirect to Child Page

Теперь эта страница будет отражать весь раздел со страницами кастомных настроек

Заведем дочернюю страницу “Основная информация”. ТАк же создаем новую страницу настроек (кнопка Добавить новое):

Page Title - Основная информация
Menu Slug - main-information
Parent Page - Выбираем в пункте options pages страницу “Настройки сайта”.
включаем расширенную конфигурацию В ней выбираем:
Menu Title - Основная информация
Позиция меню (порядок считается внутри раздела “Настройки сайта”) - 0

Переходим в ACF->Группы полей и создаем новую Группу полей “Основная информация”. Внизу страницы настраиваем группу полей:

указываем в правиле, что страницу необходимо показывать “Страница настроек” равно “Основная информация”
На вкладке презентация указываем:
- бесшовный стиль
- Позицию - высокий

Добавляем поле логотип Оно определяется как поле “группа”, внутри которого определяются поля для логотипов (изображение, текст для слогана (если есть) и тд)
Добавляем поле контактная информация Оно определяется как поле “группа”, внутри которого определяются текстовые поля. В него могут входить телефон, почта, соц сети, адрес, часы работы и тд. Важно корректно настроить ширину полей, чтобы была уместная компановка полей в админке
Добавляем поле для копирайта сайта и прочей информации из футера
По аналогии создаем дочернюю страницу настроек “Формы обратной связи”

Заведение заглушек для изображений сущностей

На странице “Основная информация” создаем новое кастомньте поле типа изображение, доабвляем в него логотип сайта (если не предоставлена заглушка для изображений)

Натяжка

Натяжка простого хедера

Копируем хедер в файл header.php
Подключаем стили и скрипты верстки, указывая корректный путь до файлов. Для этого используем функцию bloginfo('template_url')

Подключаем стоили и скрипты вп, используя wp_head()

Выводим поля основной информации в шаблон хедера, использую любую из функций acf, например get_field('ваш_слаг', 'options').

Номер телефона должен быть в виде ссылки:

<a href="tel:+номер телефона, содержащий только цифры">Поле с номером телефона</a>

Для очищения номера телефона заведите функцию в functions.php, принимающую значение поля для телефона и возвращающую очищенную строку. Прим:

function phoneMask(string $str): string {
    return preg_replace('/[\D+]/', '', $str);
}

Электронная почта должена быть в виде ссылки:

<a href="mail:test@test.ru">test@test.ru</a>

Натяжка простого футера

Копируем футер в файл footer.php
Подключаем скрипты верстки, указывая корректный путь до файлов. Для этого используем функцию bloginfo('template_url')
Подключаем стоили и скрипты вп, используя wp_footer()

Выводим поля основной информации в шаблон хедера, использую любую из функций acf, например get_field('ваш_слаг', 'options').

Натяжка простого меню

Создаем на странице основной информации кастомное поле под меню типа повторитель, в него добавляем 3 поля:
- поле “показывать в хедере” типа “true/false”
- поле “показывать в футере” типа “true/false”
- поле ссылка типа ссылка
Заполняем поля меню согласно макету
Выводим меню в цикле, делая проверку, прокликнут ли нужный нам чекбокс (хедер/футер). Прим:

$menu = get_field('ваш_слаг', 'options') ?? [];

foreach ($menu as $point) {
    if (!$point['is_heder']) continue;
    ...
}

Натяжка страницы контакты простой

определить, какие поля из информации натсранице еще не существуют в общей информации
добавить эти поля в основную информацию
вывести контактную информацию из полей
вывести блок карты (доабвляется фронтом, если нет верстки, то просто ничего не делать)

Товары

Вывод цен

Для вывода цен необходимо написать одну функцию в functions.php, включающую в себя необходимую логику для работы с ценами. И всегда выводить цены через неею

function getPrice($id) {
  $product = wc_get_product($id);

  $price = $product->get_regular_price() ?: 0;
  $sale = $product->get_sale_price();

  return [$price, $sale];
}
[$price, $sale] = getPrice($productId)

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

function getRegexPrice($price) {
  return preg_replace('/(\d)(?=(\d{3})+$)/', '$1 ', $price);
}
echo getRegexPrice($price); //прим. было 17800, стало 17 800

Вывод скидки в процентах

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

function getDiscount($price, $sale) {
  return ceil((($price - $sale) / $price) * 100);
}

Рубрики

Натяжка страницы рубрики с выводом ее постов

Поставить в h1 назание рубрики (получить текущий объект рубрики и через него вывести поле)
Вывести сопутствующую информацию (обычно блоки текста - если есть по макету)
Завести необходимые поля внутри постов (через ACF)
Получить текущие посты рубрики
Вывести посты в цикле (при необходимости вынести карточку поста в отдельный шаблон) прим:

<? foreach ($posts as $post): ?>
    <a>
        ...
    </a>
<? endif ?>

Категории

Натяжка простого блока с категориями (картинка, описание)

Вынесите шаблон блока в отдельный файл (если данный блок встречается больше одного раза)
Вынесите шаблон карточки в отдельный файл шаблона

Подключать отдельные файлы шаблонов можно с помощью get_template_part('template', '', []) template - путь до файла (без расширения) третий аргумент [] - ассоциативный массив с переменными, который можно передать внутрь шаблона. Прим.

get_template_part('templates/example', '', ['exampleData' => $data])

А после получить переменную внутри шаблона

$exampleData = $args['exampleData']

Получите список категорий:

$terms = get_terms([
    'taxonomy' => 'product_cat',
    'hide_empty' => false,
]);

Вы получите массив с объектами категорий, значения объекта получают через $term->name

Выведите в цикле карточки.
Получайте изображение категории

$image = wp_get_attachment_url(get_term_meta($term->term_id, 'thumbnail_id', true)) ?: '';

где $term->term_id - это id категории

Получаем ссылку на категорию через

$link = get_term_link(term->term_id, 'product_cat')

Натяжка сложного блока с категориями (аттрибуты, подкатегории, табы)

Фильтры

Установка

Репозиторий с готовым решением фильтров click

Требования: установленый woocommerce (или же поля не привяжутся с категориям товара - придется вручную их перепривязывать)

Завести атрибуты со значениями на странице атрибутов woocommerce.
Скачать из готового решения фильтра папку filters и перенести ее в тему проекта.
Из репозитория скачать файл acf-filters-fields-import.json и испортировать его через админ-панель: странице плагина ACF->вкладка инструменты->импорт->выбрать файл->начать импорт через кнопку.
Подключить модуль в functions.php (код ниже).

require_once ( get_template_directory() . '/filters/index.php' );

Заполнить атрибуты на страницах редактирования категорий в админ-панели.
Вывести фильтры на странице категории в шаблон filters.php. (Прим.: filters.php) Его необходимо подключить на странице, где должны выводиться фильтры, а сам скрипт положить в директорию templates.

<? get_template_part('templates/filters', null, ['termId' => $termId, 'products' => $products]) ?>

$termId - Текущая категория

Теперь форма отправляется с клиента на сервер через get-параметры. 7. Далее необходимо, чтобы параметры фильтра учитывались при выводе товаров на страницу. Небольшая подборка скриптов для functions.php.

Функция для формирования аргументов Tax_Query для WP_QUERY.

function getTaxes(int $term_id, array $get, array $exclude): array {
  $tax = [];
  $taxQuery = [];
  if (!empty($term_id)) {
    $taxQuery[] = [
      'taxonomy' => 'product_cat',
      'terms'    => $term_id,
    ];
  }
  foreach ($get as $key => $values) {
    if (in_array($key, $exclude)) continue;
    $tax[$key] = ['relation' => 'OR'];

    foreach ($values as $item) {
      $tax[$key][] = [
        'taxonomy' => $key,
        'field'    => 'id',
        'terms'    => $item,
      ];
    }
  }
  foreach ($tax as $value) {
    $taxQuery[] = $value;
  }
  return $taxQuery;
}

Если нужно добавить еще какие-то значения, то делаем это так:

$taxQuery[] = [
    'taxonomy' => 'таксономия',
    'terms'    => 'термин',
];

Функция для формирования аргументов с мета-данными для WP-QUERY (сюда можно дописывать свое, если нужно еще прокинуть какие-то метаполя)

function getMetaQuery(): array {
  $meta_query = [];
  $meta_query[] = [
    'key'     => '_stock_status',
    'value'   => 'instock',
    'compare' => 'IN',
  ];
  return $meta_query;
}

Если нужно добавить еще какие-то значения, то делаем это так:

$meta_query[] = [
    'key'     => 'ключ',
    'value'   => 'значение',
    'compare' => 'отношение',
];

Если есть сортировка, то вот для нее функция

function getSort(string $sort, array $products): array {
  if ($sort == 'increase') {
    usort($products, function($a, $b) {
      return strcmp(get_the_title($a->ID), get_the_title($b->ID));
    });
  }
  if ($sort == 'decrease') {
    usort($products, function($a, $b) {
      return strcmp(get_the_title($b->ID), get_the_title($a->ID));
    });
  }
  return $products;
}

Пример функции для получения товаров на странице категории каталога (сразу со срезом для пагинации).

function getProducts(int $termId, array $get, int $currentPage, int $countProductsOnPage): array {
  $tax_query = getTaxes($termId, $get);
  $meta_query = getMetaQuery();

  $query = new WP_Query([
    'post_type'        => 'product',
    'tax_query'        => $tax_query,
    'meta_query'       => $meta_query,
    'orderby'          => 'menu_order',
    'order'            => 'ASC',
    'posts_per_page'   => -1,
  ]);
  $products = getSort(($get['sort'] ?? ''), $query->posts);
  $maxCount = count($products);

  return [
    $maxCount,
    array_slice($products,  ($currentPage - 1) * $countProductsOnPage, $countProductsOnPage),
  ];
}

Подключение к умному фильтру и использование

пока что используй в functions.php эти функции:

// получение массива аргументов из ссылки фильтра
function parseFilterAttributes(): array  {
  $parseUrl = parse_url( $_SERVER['REQUEST_URI'] );
  $path     = explode( '/', trim( $parseUrl['path'], '/' ) );
  parse_str( $parseUrl['query'] ?? '', $queryParams );
  $excludeAttributes = get_field( 'exlude_attributes_on_seofilter', 'options' );

  return array_merge(
    array_reduce($path, function ($carry, $link) {
        if (str_contains($link, '-est-')) {
          [$key, $values] = explode('-est-', $link);
          $carry[$key] = str_contains($values, '-ili-') ? explode('-ili-', $values) : [$values];
        }
        if (str_contains($link, '-ot-')) {
          $pattern = '/(?<key>[^-]+)-ot-(?<from>\d+)-do-(?<to>\d+)/';
          preg_match($pattern, $link, $matches);
          $carry[$matches['key']] = $matches['from'] . ':' . $matches['to'];
        }
        return $carry;
      }, []),
    array_reduce($queryParams, function ($carry, $link) use ($excludeAttributes) {
      if (str_contains($link, '-est-')) {
        [$key, $values] = explode('-est-', $link);
        $carry[$key] = str_contains($values, '-ili-') ? explode('-ili-', $values) : [$values];
      }
      if (str_contains($link, '-ot-')) {
        $pattern = '/(?<key>[^-]+)-ot-(?<from>\d+)-do-(?<to>\d+)/';
        preg_match($pattern, $link, $matches);
        $carry[$matches['key']] = $matches['from'] . ':' . $matches['to'];
      }
      return $carry;
    }, [])
  );
}
// получение ссылки для фильтра из атрибутов товара, где `$get`- массив атрибутов (вида, как можно получить из функции parseFilterAttributes())
function buildFilterUrl(array $get, int $termId): string {
  $url = get_term_link($termId, 'product_cat');
  if (count($get) > 0) {
    $url .= '?';

    foreach ( $get as $key => $values ) {
      if ( is_string( $values ) && str_contains( $values, ':' ) ) {
        [ $from, $to ] = explode( ':', $values );
        $value = "$key-ot-$from-do-$to";
      } else {
        $value = "$key-est-" . implode( '-ili-', $values );
      }
      $url .= "$key=$value&";
    }

    return rtrim( $url, '&' );
  }
  return $url;
}

Товары

Промокоды

$coupon = new WC_Coupon();

Вот основные параметры, которые можно задать при создании купона:

set_code($code) — код купона (строка).

set_discount_type($type) — тип скидки:

percent — процентная скидка.

fixed_cart — фиксированная скидка на всю корзину.

fixed_product — фиксированная скидка на товар.

set_amount($amount) — сумма скидки (число).

set_date_expires($date) — дата окончания (timestamp).

set_usage_limit($limit) — ограничение на количество использований.

set_individual_use($bool) — можно ли использовать купон только индивидуально.

set_free_shipping($bool) — предоставляет ли купон бесплатную доставку.

set_minimum_amount($amount) — минимальная сумма заказа.

set_maximum_amount($amount) — максимальная сумма заказа.

set_email_restrictions($emails) — ограничение по email (массив email-адресов).

set_product_ids($ids) — товары, к которым применяется купон (массив ID товаров).

set_excluded_product_ids($ids) — товары, к которым купон не применяется (массив ID товаров).

set_product_categories($categories) — категории, к которым применяется купон (массив ID категорий).

set_excluded_product_categories($categories) — категории, к которым купон не применяется (массив ID категорий).

$id = $coupon->save();

Слайдер

Натяжка слайдера-баннера

Для страницы, на которой находится блок, заводим кастомное поле баннер типа повторитель
В нем заводим поля согласно макету (изображение, заголовок, текст, кнопка(ссылка))
Заполняем поля (хотя бы тестовыми данными)
Выводим значения полей в верстку. Прим:

<? $banner = get_field('banner') ?? [] ?>

<? foreach($banner as $slide): ?>
    ....
<? endforeach ?>

Натяжка простого слайдера с картинками из полей админки

заведите поле на для нужной страницы типа галерея.
заполните поле изображениями
выведите поле в цикле

Информационные блоки

Натяжка блока преимществ

Если блок встречается несколько раз в макете, то выносим его в отдельный файл шаблона
Создаем кастомное поле типа повторитель для страницы (если блок общий - то для общей информации)
Добавляем поля согласно макету (изображение, текст, текстовый блок)
Выводим данные в цикле в верстку
Заводим поле для страницы типа группа
Добавляем в нее необходимые поля, согласно макету (Подзаголовок, изображение, текст)

Выводим значения полей в верстку

Натяжка блока с гибким содержимым

Создать acf поле типа гибкое содержимое
Внутри создать необходимые паттерны блоков (обратите внимание, что слаги блоков не транслитируются, так что их надо потом вручную перебить)
Вывести содержимое в скрипт.

Пример:

<? $content = get_field( 'kontent_straniczy' ) ?>
<? foreach ( ($content ?: []) as $section ): ?>

    <?
    $type = $section['acf_fc_layout'];
    switch ( $type ) {
        case 'var_1':
            echo '<div class="">' . $section['var_1']) . '</div>';
            break;
        case 'var_2':
            echo '<div class="">' . $section['var_2'] . '</div>';
            break;
        case 'var_3':
            $items = '';
            foreach (($section['var_3'] ?: []) as $item) {
                $elem .= '<a class="" href=""><span class="icon-file"></span><span>' . $item[''] . '</span></a>';
            }
            echo '<div class="">' . $items . '</div>';
            break;
    }
    ?>

<? endforeach ?>

Натяжка форм

Натяжка формы обратной связи (простой)

завести поля под форму на странице настроек “Формы обратной связи” (название, картинки, текст)
заполнить их
вынести форму в отдельный файл шаблона (templates)
вывести данные в верстку

Пагинация

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

$objects = [ ... ];
$countObjectsOnPage = 4;
$currentPage = getCurrentPage();
$maxCount = count($objects);
$maxPages = (int)ceil($maxCount / $countObjectsOnPage);
$currentObjects = array_slice($objects, ($currentPage - 1) * $countObjectsOnPage, $countObjectsOnPage);
$offLink = 'style="pointer-events: none"';

Натяжка пагинации через `/page/2`

Для определения текущей страницы пагинации заводится функция в functions.php:

function getCurrentPage(): int {
  $url = $_SERVER['REQUEST_URI'];
  preg_match('/\/page\/(\d+)\//', $url, $matches);
  return (int)($matches[1] ?? 1);
}

На месте, где в макете должна быть пагинация, определите следующие переменные:

текущий url страницы
текущие гет запросы
подключите шаблон пагинации navigation.php и прокиньте в него необходимые переменные.
в файле navigation.php напишите код для работы пагинации

$pageUrl = get_term_link($term->term_id);
preg_match('/\?.*/', $_SERVER['REQUEST_URI'], $matches);
$get = $matches[0] ?? '';

$args = [
    'url'      => $pageUrl,
    'get'      => $get,
    'page'     => $currentPage,
    'offLink'  => $offLink,
    'maxPages' => $maxPages,
];
get_template_part('templates/navigation', null, $args);

Api

Динамическая пагинация по acf полям

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

Этапы:

создать файл service-pagination-api.php в директории services. Он автоматически подключится.
зарегистрировать новый ендпоинт в api приложения:

add_action( 'rest_api_init', function () {
    register_rest_route( 'appRoomApi/v1', '/get-pagination-items/', [
        'methods' => 'get',
        'callback' => 'handle_get_pagination_items',
        'args' => [
            'page' => [
                'required'          => true,
                'type'              => 'integer',
                'default'           => 1,
                'validate_callback' => function($param) {
                    return is_numeric($param);
                },
                'sanitize_callback' => 'absint',
            ],
        ],
        'permission_callback' => '__return_true',
    ]);
} );

ниже добавить функцию-обработчик

function handle_get_pagination_items(WP_REST_Request $request) {
    // получаем номер страницы пагианции
    $page      = $request->get_param('page');
    // получаем все поля
    $allFields = get_field('slug') ?? [];

    // получаем кол-во полей на одной странице
    $limit = get_field('', 'options') ?? 10;
    // срезаем поля для отправленного номера страницы
    $currentFields = array_slice($allFields, ($page - 1) * $limit, $limit);

    // собираем данные (заголовки, ссылки, картинки, описания и тд)
    $res = array_reduce($currentFields, functions($carry, $field) {
        $item['somethingName'] = $field['something'] ?? '';
        ...
        $carry[] = $item;
        return $carry;
    }, []);

    // отвечаем
    $response = [
        'success'        => true,
        'currentObjects' => $res,
        'maxCount'       => count($allFields),
    ];

    return new WP_REST_Response($response, 200);
}

Динамическая пагинация по постам конкретной рубрики (простая)

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

Этапы:

создать файл service-{название-рубрики}-pagination-api.php в директории services. Он автоматически подключится.
зарегистрировать новый ендпоинт в api приложения:

add_action( 'rest_api_init', function () {
    register_rest_route( 'appRoomApi/v1', '/get-{название-рубрики}-pagination/', [
        'methods' => 'get',
        'callback' => 'handle_get_{название-рубрики}_pagination',
        'args' => [
            'page' => [
                'required'          => true,
                'type'              => 'integer',
                'default'           => 1,
                'validate_callback' => function($param) {
                    return is_numeric($param);
                },
                'sanitize_callback' => 'absint',
            ],
        ],
        'permission_callback' => '__return_true',
    ]);
} );

ниже добавить функцию-обработчик

function handle_get_{название-рубрики}_pagination(WP_REST_Request $request) {
    // получаем номер страницы пагианции
    $page      = $request->get_param('page');
    // получаем записи
    $allPosts = get_posts(...);

    // получаем кол-во постов на одной странице
    $limit = get_field('', 'options') ?? 10;
    // срезаем поля для отправленного номера страницы
    $currentPosts = array_slice($allPosts, ($page - 1) * $limit, $limit);

    // собираем данные (заголовки, ссылки, картинки, описания и тд)
    $res = array_reduce($currentPosts, functions($carry, $post) {
        $item['title'] = $post->post_title;
        ...
        $carry[] = $item;
        return $carry;
    }, []);

    // отвечаем
    $response = [
        'success'        => true,
        'currentPosts' => $res,
        'maxCount'       => count($allFields),
    ];

    return new WP_REST_Response($response, 200);
}

Поля, которые можно заводить при настройке кастомного блока WP Bakery

В WPBakery (Visual Composer) можно использовать множество типов полей для настройки элементов. Вот список основных типов полей, которые можно использовать в параметрах (params) при создании пользовательских элементов:

1. Текстовое поле (`textfield`)

Простое поле для ввода текста.

array(
    'type' => 'textfield',
    'heading' => __('Заголовок', 'text-domain'),
    'param_name' => 'title',
    'description' => __('Введите заголовок', 'text-domain'),
)

2. Текстовое поле с HTML (`textarea`)

Поле для ввода многострочного текста.

array(
    'type' => 'textarea',
    'heading' => __('Описание', 'text-domain'),
    'param_name' => 'description',
    'description' => __('Введите описание', 'text-domain'),
)

Поле для выбора значения из списка.

array(
    'type' => 'dropdown',
    'heading' => __('Выберите вариант', 'text-domain'),
    'param_name' => 'option',
    'value' => array(
        __('Вариант 1', 'text-domain') => 'option1',
        __('Вариант 2', 'text-domain') => 'option2',
    ),
    'description' => __('Выберите вариант из списка', 'text-domain'),
)

4. Чекбокс (`checkbox`)

Поле для выбора одного или нескольких значений.

array(
    'type' => 'checkbox',
    'heading' => __('Выберите опции', 'text-domain'),
    'param_name' => 'options',
    'value' => array(
        __('Опция 1', 'text-domain') => 'option1',
        __('Опция 2', 'text-domain') => 'option2',
    ),
    'description' => __('Выберите нужные опции', 'text-domain'),
)

5. Радиокнопки (`radio`)

Поле для выбора одного значения из нескольких.

array(
    'type' => 'radio',
    'heading' => __('Выберите вариант', 'text-domain'),
    'param_name' => 'option',
    'value' => array(
        __('Вариант 1', 'text-domain') => 'option1',
        __('Вариант 2', 'text-domain') => 'option2',
    ),
    'description' => __('Выберите один вариант', 'text-domain'),
)

6. Цвет (`colorpicker`)

Поле для выбора цвета.

array(
    'type' => 'colorpicker',
    'heading' => __('Выберите цвет', 'text-domain'),
    'param_name' => 'color',
    'description' => __('Выберите цвет', 'text-domain'),
)

7. Изображение (`attach_image`)

Поле для загрузки изображения.

array(
    'type' => 'attach_image',
    'heading' => __('Выберите изображение', 'text-domain'),
    'param_name' => 'image',
    'description' => __('Загрузите изображение', 'text-domain'),
)

8. Слайдер (`slider`)

Поле для выбора числового значения с помощью слайдера.

array(
    'type' => 'slider',
    'heading' => __('Выберите значение', 'text-domain'),
    'param_name' => 'size',
    'value' => 50,
    'min' => 0,
    'max' => 100,
    'step' => 1,
    'description' => __('Выберите значение с помощью слайдера', 'text-domain'),
)

9. Иконка (`iconpicker`)

Поле для выбора иконки.

array(
    'type' => 'iconpicker',
    'heading' => __('Выберите иконку', 'text-domain'),
    'param_name' => 'icon',
    'settings' => array(
        'emptyIcon' => false, // Разрешить пустую иконку
        'type' => 'fontawesome', // Тип иконок (fontawesome, linecons и т.д.)
    ),
    'description' => __('Выберите иконку', 'text-domain'),
)

10. Ссылка (`vc_link`)

Поле для выбора ссылки (URL, заголовок, target).

array(
    'type' => 'vc_link',
    'heading' => __('Ссылка', 'text-domain'),
    'param_name' => 'link',
    'description' => __('Выберите ссылку', 'text-domain'),
)

Поле для выбора категории (например, из таксономии).

array(
    'type' => 'dropdown',
    'heading' => __('Выберите категорию', 'text-domain'),
    'param_name' => 'category',
    'value' => array_flip(get_categories(array('hide_empty' => false))), // Получаем список категорий
    'description' => __('Выберите категорию', 'text-domain'),
)

12. Переключатель (`checkbox`)

Поле для включения/выключения опции.

array(
    'type' => 'checkbox',
    'heading' => __('Включить опцию?', 'text-domain'),
    'param_name' => 'enable_option',
    'value' => array(__('Да', 'text-domain') => 'yes'),
    'description' => __('Включить опцию', 'text-domain'),
)

13. Группа полей (`param_group`)

Поле для создания повторяющихся групп полей.

array(
    'type' => 'param_group',
    'heading' => __('Повторяющиеся элементы', 'text-domain'),
    'param_name' => 'items',
    'params' => array(
        array(
            'type' => 'textfield',
            'heading' => __('Название', 'text-domain'),
            'param_name' => 'title',
        ),
        array(
            'type' => 'textarea',
            'heading' => __('Описание', 'text-domain'),
            'param_name' => 'description',
        ),
    ),
)

Поле для выбора шрифта.

array(
    'type' => 'dropdown',
    'heading' => __('Выберите шрифт', 'text-domain'),
    'param_name' => 'font',
    'value' => array(
        __('Arial', 'text-domain') => 'Arial',
        __('Times New Roman', 'text-domain') => 'Times New Roman',
    ),
    'description' => __('Выберите шрифт', 'text-domain'),
)

15. HTML (`textarea_html`)

Поле для ввода HTML-кода.

array(
    'type' => 'textarea_html',
    'heading' => __('HTML-код', 'text-domain'),
    'param_name' => 'content',
    'description' => __('Введите HTML-код', 'text-domain'),
)

16. Выбор поста (`post_select`)

Поле для выбора поста.

array(
    'type' => 'post_select',
    'heading' => __('Выберите пост', 'text-domain'),
    'param_name' => 'post_id',
    'description' => __('Выберите пост', 'text-domain'),
)

17. Выбор даты (`datepicker`)

Поле для выбора даты.

array(
    'type' => 'datepicker',
    'heading' => __('Выберите дату', 'text-domain'),
    'param_name' => 'date',
    'description' => __('Выберите дату', 'text-domain'),
)

18. Выбор медиафайла (`attach_media`)

Поле для выбора медиафайла (аудио, видео и т.д.).

array(
    'type' => 'attach_media',
    'heading' => __('Выберите медиафайл', 'text-domain'),
    'param_name' => 'media',
    'description' => __('Загрузите медиафайл', 'text-domain'),
)

Поле для выбора размера (например, маленький, средний, большой).

array(
    'type' => 'dropdown',
    'heading' => __('Выберите размер', 'text-domain'),
    'param_name' => 'size',
    'value' => array(
        __('Маленький', 'text-domain') => 'small',
        __('Средний', 'text-domain') => 'medium',
        __('Большой', 'text-domain') => 'large',
    ),
    'description' => __('Выберите размер', 'text-domain'),
)

20. Выбор шорткода (`textarea_raw_html`)

Поле для ввода шорткода.

array(
    'type' => 'textarea_raw_html',
    'heading' => __('Введите шорткод', 'text-domain'),
    'param_name' => 'shortcode',
    'description' => __('Введите шорткод', 'text-domain'),
)

Это основные типы полей, которые можно использовать в WPBakery. Вы можете комбинировать их для создания сложных и гибких элементов. Для более подробной информации можно обратиться к официальной документации WPBakery.

Натяжка проекта на WordPress

Установка и настройка

Установка wordpress

Установка bedrock

Первичная настройка

Заведение базовой информации о сайте

Заведение заглушек для изображений сущностей

Натяжка

Натяжка простого хедера

Натяжка простого футера

Натяжка простого меню

Натяжка страницы контакты простой

Товары

Вывод цен

Вывод скидки в процентах

Рубрики

Натяжка страницы рубрики с выводом ее постов

Категории

Натяжка простого блока с категориями (картинка, описание)

Натяжка сложного блока с категориями (аттрибуты, подкатегории, табы)

Фильтры

Установка

Подключение к умному фильтру и использование

Товары

Промокоды

Слайдер

Натяжка слайдера-баннера

Натяжка простого слайдера с картинками из полей админки

Информационные блоки

Натяжка блока преимществ

Натяжка блока с гибким содержимым

Натяжка форм

Натяжка формы обратной связи (простой)

Пагинация

Натяжка пагинации через /page/2

Api

Динамическая пагинация по acf полям

Динамическая пагинация по постам конкретной рубрики (простая)

Поля, которые можно заводить при настройке кастомного блока WP Bakery

1. Текстовое поле (textfield)

2. Текстовое поле с HTML (textarea)

3. Выпадающий список (dropdown)

4. Чекбокс (checkbox)

5. Радиокнопки (radio)

6. Цвет (colorpicker)

7. Изображение (attach_image)

8. Слайдер (slider)

9. Иконка (iconpicker)

10. Ссылка (vc_link)

11. Выбор категории (dropdown)

12. Переключатель (checkbox)

13. Группа полей (param_group)

14. Выбор шрифта (dropdown)

15. HTML (textarea_html)

16. Выбор поста (post_select)

17. Выбор даты (datepicker)

18. Выбор медиафайла (attach_media)

19. Выбор размера (dropdown)

20. Выбор шорткода (textarea_raw_html)

Натяжка пагинации через `/page/2`

1. Текстовое поле (`textfield`)

2. Текстовое поле с HTML (`textarea`)

3. Выпадающий список (`dropdown`)

4. Чекбокс (`checkbox`)

5. Радиокнопки (`radio`)

6. Цвет (`colorpicker`)

7. Изображение (`attach_image`)

8. Слайдер (`slider`)

9. Иконка (`iconpicker`)

10. Ссылка (`vc_link`)

11. Выбор категории (`dropdown`)

12. Переключатель (`checkbox`)

13. Группа полей (`param_group`)

14. Выбор шрифта (`dropdown`)

15. HTML (`textarea_html`)

16. Выбор поста (`post_select`)

17. Выбор даты (`datepicker`)

18. Выбор медиафайла (`attach_media`)

19. Выбор размера (`dropdown`)

20. Выбор шорткода (`textarea_raw_html`)