Chciałbym użyć efektu kart Swiper (aby wyświetlić niektóre elementy w moim niestandardowym motywie WordPress. Mam następujące znaczniki:

    <?php // Slider main container ?>
    <div class="swiper">
        <?php // Additional required wrapper ?>
        <div class="swiper-wrapper">
<?php
// Get some posts via query
// LOOP
?>
            <?php // Slide ?>
            <div class="swiper-slide">
                <div class="swiper-slide-inner-wrapper">
                    <!-- wp:heading {"textAlign":"center","level":3} -->
                    <h3 class="wp-block-heading has-text-align-center"><?php echo the_title(); ?></h3>
                    <!-- /wp:heading -->

                    <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                    <div class="wp-block-buttons">
                        <!-- wp:button -->
                        <div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="<?php echo the_permalink(); ?>">Read More</a></div>
                        <!-- /wp:button -->
                    </div>
                    <!-- /wp:buttons -->
                </div>
            </div>
<?php
// END LOOP
?>
        </div>
        <?php // If we need pagination ?>
        <div class="swiper-pagination"></div>
    </div>

Kolejkuję wymagany arkusz stylów i skrypt Swiper oraz niestandardowy arkusz stylów i skrypt dla inicjowania instancji Swiper za pomocą następujących poleceń functions.php,

function enqueue_scripts()
{
    if (is_page('home')) {
        wp_enqueue_script(
            'swiper_script',
            get_template_directory_uri() . '/assets/ext/swiper/swiper-bundle.min.js',
            null,
            null,
            true
        );

        wp_enqueue_script(
            'wellgroundedmusic_swiper_script',
            get_template_directory_uri() . '/assets/js/swiper.js',
            array(
                'swiper_script'
            ),
            null,
            true
        );
    }
}


function enqueue_styles()
{
    if (is_page('home')) {
        wp_enqueue_style(
            'swiper_stylesheet',
            get_template_directory_uri() . '/assets/ext/swiper/swiper-bundle.min.css'
        );

        wp_enqueue_style(
            'swiper_overrides_stylesheet',
            get_template_directory_uri() . '/assets/css/swiper.css'
        );
    }
}

function enqueue_scripts_and_styles()
{
    enqueue_scripts();
    enqueue_styles();
}

add_action('wp_enqueue_scripts', 'enqueue_scripts_and_styles');

Skrypt inicjujący suwaka wygląda następująco:

jQuery(document).ready(function() {
    const swiper = new Swiper('.swiper', {
        effects: 'cards',
        grabCursor: true
    });
});

Debugowanie wysiłków:

• Sprawdziłem, że wszystkie skrypty i arkusze stylów są ładowane zgodnie z oczekiwaniami.
• Zauważyłem, że podstawowe Swiper instancje działają w WordPress.
• Zauważono również, że podstawowy test lokalnego piaskownicy (bez WordPressa) przy użyciu tych samych zasobów daje oczekiwany efekt kart w przeglądarce.
• Sprawdzanie Swiper instancja w WordPress pokazuje, że przynajmniej swiper-3d klasa nie jest stosowana do Swiper target w WordPress, ale robi to w podstawowym teście lokalnym.
• Wypróbowałem różne opcje kolejkowania skryptów, aby sprawdzić, czy ładowanie w nagłówku w porównaniu z przed stopką robi różnicę, a także próbowałem „odroczyć”.
• Próbowałem zawijać Swiper instancja w window.onload I jQuery(document).ready.
• Zauważyłem, że efekt kostki (kolejny efekt 3D) również nie działa w WordPressie.

Problem musi dotyczyć kolejkowania zasobów w WordPress. Spodziewam się, że jednym z obejść będzie użycie interfejsu API React lub dynamiczne dodanie znaczników Core, a następnie utworzenie instancji, ale jestem ciekawy, dlaczego to nie zadziałałoby tak jak jest (tzn. to jest naprawdę pytanie WordPress i jestem pewien, że ma zastosowanie do innych pakietów JavaScript).