Fakel-Gym/template-parts/la-components

la-Components-wp

Описание

Набор готовых компонентов для Wordpress (tailpress-theme)

Компоненты:

language-switcher.php

Переключает язык темы, либо филиалы сайта, если они реализованы через Polylang плагин

navigation-menu.php

Выводит навигационное меню, по умолчанию используется меню "Шапка сайта", добавлена сео разметка (бредкрамсы и прочее), так как Yoast или другой seo плагин сюда не подцепится.

footer.php

Скелетон компонент футера

Блоки

hero-block.php

Заглавный блок, добавлен без скелетона, для примера вёрстки, стилей и скриптов, есть слайдер и текст из ацф полей. Присутствует лайтбокс.

gallery-tabs.php

Галерея-слайдер с табами, схожа с reviews-block.php, но есть различия в полях и коде

reviews-block.php

Галерея с отзывами - галерея-слайдер с табами, есть возможность загружать видеоотзывы и отзывы в виде изображений.

contacts-block.php

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

club-card.php

Блок выводит кастомный пост тайп, в текущей реализации есть надстройка через Polylang, чтобы выводить посты относящиеся к выбранному языку

Формы

Блоки формы предлагаю делать через плагин fluent forms, выглядит самым гибким из всех существующих, есть невидимые инпуты, чтобы не мучаться в вёрсткой (верстаем обычные инпуты, затем делаем форму с невидимыми инпутами в плагине и просто заполняем их контентом из сверстанных блоков) и хорошая настройка

Остальное

modals.php и js/modals.js

Система вывода модалок, создает в футере, общий компонент обертку для модалок, куда потом выводится контент из php-файлов в modals директории.

Создаем php-файл в modals с префиксом modal, например modal-example.php c любым содержимым (<div>Контент</div> / echo do_shortcode('[fluentform id="1"]')), затем его можно будет вызывать через button с дата data-modal="example"

Есть скелетоны-примеры нескольких модалок

blocks.php

Файл для регистрации ацф-блоков, есть примеры. Скрипты подключаются через enqueue_scripts в блоке, библиотеки предлагаю по возможности подключать там же, чтобы не грузилась бибилотека если нет блоков используемых ее (как исключение swiper.js или другие библиотеки требуемые в нескольких блоках)

Установка

Как отдельный репозиторий

git clone https://git.good-production.xyz/Good-Production/la-components-wp.git

Как git subtree в проект

git remote add la-components https://git.good-production.xyz/Good-Production/la-components-wp.git
git subtree add --prefix=template-parts/la-components la-components main

Использование

В коде

get_template_part('template-parts/la-components/footer');

Блоки

Блоки создаются в отдельную категорию и выводятся через gutenberg редактор

Обновление компонентов в проекте

git subtree pull --prefix=template-parts/la-components la-components main

Разработка

Подключить в тему файлы с функциями из компонентов:

$modal_file = get_template_directory() . '/template-parts/la-components/functions/modals.php';
$block_file = get_template_directory() . '/template-parts/la-components/functions/blocks.php';

if (file_exists($block_file)) {
require_once $block_file;
}
if (file_exists($modal_file)) {
require_once $modal_file;
}

И дальше по аналогии.