Как зарегистрировать блоки ACF
Для начала вам необходимо создать плагин. Переходим в папку plugins на FTP своего сайта. И создаем там папку с любым названием. В новой папке создаете php-файл с тем же названием. Например, я создал папку с названием “acf-gut-blocks-zeeoff” и в ней файл “acf-gut-blocks-zeeoff.php”.
Далее в папке “acf-gut-blocks-zeeoff” создаем папку “assets”. В ней мы в будущем будем хранить наши блоки.
Также можно создать папки “css” и “js”, чтобы можно было грузить стили и скрипты для корректного отображения ваших блок на странице редактора. Но это совсем необязательно.
Внутри папки “assets” я создал папку “blocks”. И уже в папке “blocks” мы размещаем наши блоки.
Внутри папки “blocks” создаем папку с названием нашего первого блока. У меня он называется “price-table-block”. И внутри новой папки создаем файл “price-table-block.php”.
Структура папок нашего плагина создана. Теперь можно приступить к регистрации блоков.
Возвращаемся к файлу “acf-gut-blocks-zeeoff.php”. Вставляем туда следующий скрипт:
<?php
/**
* Plugin Name: ACF+GUT Blocks by Alexey Blagorodov
* Description: Блоки ACF+GUT
* Author URI: https://sajt-pod-klyuch.ru/
* Author: Алексей Благородов
* Version: 1.0
*
* Requires at least: 2.5
* Requires PHP: 5.4
*
* License: GPL2
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*
* Network: Укажите "true" для возможности активировать плагин для сети Multisite.
* Update URI: https://example.com/link_to_update
*/
// Регистрация Блока
function sajt_pod_klyuch_register_blocks() {
// Проверяем, что функция доступна.
if( ! function_exists( 'acf_register_block_type' ) ) {
return;
}
// Регистрация блока 1 - Цены
acf_register_block_type(array(
'name' => 'Price_Table',
'title' => __('Price Table'),
'description' => __('A price table block'),
'render_template' => plugin_dir_path( __FILE__ ) . 'assets/blocks/price-table-block/price-table-block.php',
'category' => 'formatting'
));
}
add_action( 'acf/init', 'sajt_pod_klyuch_register_blocks' );
Создание группы полей для блока ACF
Отлично. Мы зарегистрировали новый блок. Теперь нам необходимо создать для него группу полей. Должно получиться следующее:
И не забываем про настройку условий отображения. Выбираем из выпадающего списка «Блок» и название блока, который вы создали.
Верстка блока ACF и его вывод
Мы зарегистрировали новый блок и создали для него группу полей. Осталось еще немного. Нужно сверстать сам блок и вывести поля.
Мы создавали папку «price-table-block» и файл «price-table-block.php». Открываем этот файл и вставляем следующее:
<?php
/**
* Read More Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
$id = 'Price-table-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'Price-table';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<div class="price-table-block" id="<?php echo $id; ?>">
<?php if( have_rows('tabliczy_czen') ): $idgalery = 0; ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php while( have_rows('tabliczy_czen') ) : the_row(); $idgalery++; ?>
<li class="nav-item" role="presentation">
<a class="nav-link price-table-label-<?php echo $idgalery; if ($idgalery == 1): echo ' active'; endif; ?>" id="home-tab" data-toggle="tab" href="#price-table-<?php echo $idgalery; ?>-<?php echo $id; ?>" role="tab" aria-controls="home" aria-selected="true">
<?php the_sub_field('imya_vkladki'); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
<?php if( have_rows('tabliczy_czen') ): $idgalery = 0; ?>
<div class="tab-content" id="myTabContent">
<?php while( have_rows('tabliczy_czen') ) : the_row(); $idgalery++; ?>
<div class="tab-pane fade price-table-content-<?php echo $idgalery; if ($idgalery == 1): echo ' active show'; endif; ?>" id="price-table-<?php echo $idgalery; ?>-<?php echo $id; ?>" role="tabpanel" aria-labelledby="contact-tab">
<?php the_sub_field('kontent_vkladki'); ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
Что примечательно, на страницу можно добавить несколько таких блоков, а благодаря их уникальным ID вкладки первого блока не будут переключать содержимое второго блока.
Как добавить еще блоков?
Просто повторяйте описанные в статье действия от начала и до конца. Если вы хотите добавить еще 1 блок, переходим к файлу «acf-gut-blocks-zeeoff.php» и дублируем эту конструкцию:
// Регистрация блока - Цены
acf_register_block_type(array(
'name' => 'Price_Table',
'title' => __('Price Table'),
'description' => __('A price table block'),
'render_template' => plugin_dir_path( __FILE__ ) . 'assets/blocks/price-table-block/price-table-block.php',
'category' => 'formatting'
));
Понятное дело, нужно переименовать блок, создать для него новую папку в «blocks», а также группу полей в самом ACF.
