Създаване на Swiper.js слайдер с помощта на Advanced Custom Fields и repeater

Този урок от {dev} blondie; се явява като естествено продължение на Създаване на Gutenberg блокове с Advanced Custom Fields, в който ви разказах повече за плъгина за персонални полета и как може да го използвате, за да създавате блокове и не само.

Тъй като интересът към ACF е голям и като коментари получих запитвания за още съдържание по темата, днес реших да ви покажа как може да създадете слайдер с помощта на Advanced Custom Fields, като за целта ще използвам front-end библиотека, наречена Swiper.js.

Важно: за този урок са необходими и малко Front-end умения освен в случай, че вече нямаш „нарязан“ HTML

Подготовка на Front-end-a

➡️ Инсталиране на Swiper.js библиотеката

Първо ще започнем с инсталиране на JavaScript библиотеката Swiper, която ще използваме за front-end функционалностите на слайдера.

Има няколко начина за добавяне на Swiper в проект:

• инсталиране посредством npm

$ npm install swiper

// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/css';

const swiper = new Swiper(...);

• линк към CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

• изтегляне на core файловете и добавянето им в директорията на проекта (линк)

➡️ Добавяне на HTML markup за слайдовете

Следващата стъпка в изграждането на нашият слайдер е създаване на HTML markup-a, който ще използваме за всеки от слайдовете, както и за контейнера, който ги държи.

<div class="swiper">

  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
  
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
  
</div>

Моля забележи, че имената на класовете тук не са случайни. Swiper библиотеката се нуждае от тъкмо тези класове, за да разпознае елементите. Във всеки swiper-slide можем да добавим съдържанието на слайда, а малко по-късно ще се отървем от трите повтарящи се div-a и ще използваме foreach цикъл, за да покажем всеки от отделните слайдове, които ще създадем през администрацията на сайта.

➡️ Инициализиране на слайдера

Тъй като Swiper е JavaScript библиотека, в script таг или препоръчително – в отделен JavaScript файл ще напишем функция, с която да инициализираме слайдера към вече създадения HTML markup:

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Интегриране на Advanced Custom Fields repeater

➡️ Инициализиране на Gutenberg блок с ACF

Следващата стъпка в създаването на нашият custom слайдер ще бъде да инсталираме Advanced Custom Fields PRO. PRO версията ни е необходима тук, тъй като repeater полето е част от нея, а също така и възможността за създаване на Gutenberg блокове.

В нашият случай и за целите на урокът – ще създам слайдера в Gutenberg блок, за да може да го повикаваме и използваме навсякъде из сайта.

За целта първата стъпка е да инициализираме функция, с която да регистрираме Gutenberg блокове посредством ACF:

add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register slider block.
        acf_register_block_type(array(
            'name'              => 'slider',
            'title'             => __('Slider'),
            'description'       => __('A custom sliderblock.'),
            'render_template'   => 'template-parts/blocks/slider/slider.php',
            'category'          => 'formatting',
        ));
    }
}

➡️ Създаване на нова група полета за слайдера

В тази стъпка ще се пренесем в back-end-a на нашият WordPress сайт и по-конкретно – в секцията на Advanced Custom Fields. От тук ще създадем нова група полета, която ще съдържа такива за слайдер блока ни

Важно тук е да изберем тази група полета да се отнася за блокът, който сме създали:

➡️ Създаване на repeater

В групата полета ще създадем ново такова и ще изберем то да бъде repeater. В него можем да имаме множество вътрешни полета (например заглавие, описание, изображение и пр.), които ще са част от всеки един слайд:

➡️ Асоцииране на ACF с HTML markup-а

Последната стъпка, която трябва да изпълним, за да имаме напълно функциониращ и преизползваем слайдер Gutenberg блок, е да укажем на ACF кои елементи от HTML markup-a ни се отнасят за него.

Тук може да подходим по два начина – да използваме while loop или foreach loop:

// while loop

<?php if( have_rows('slider') ): ?>
    <div class="swiper-wrapper">
    <?php while( have_rows('slider') ): the_row(); 
        $image = get_sub_field('image');
        ?>
        <div class="swiper-slide">
            <?= wp_get_attachment_image( $image, 'full' ); ?>
        </div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>

// foreach loop

<?php 
$slides = get_field('slider');
if( $slides ) {
    
    foreach( $slides as $slide ) {
        $image = $slide ['image'];
        <div class="swiper-slide">
            <?= wp_get_attachment_image( $image, 'full' ); ?>
        </div>
    }
}

Вместо заключение

Благодарение на гъвкавостта, която Gutenberg ни предоставя, вече не е трудно да създаваме каквито и да е персонализирани блокове, и, както видяхме в случая – дори да имплементираме front-end библиотеки в тях.

Това разгръща безброй възможности за създаване на уникален UX/UI и неговото безпроблемно интегриране към администрацията на WordPress.