Cum să integrezi Owl Carousel în temă fără a folosi un plugin

Reutilizați identificatori (handles) pentru script și stiluri. Acestea trebuie să fie valori unice (vezi Referința WP Codex)

Ar trebui să arate cam așa:

wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owlcarousel-init', get_template_directory_uri() . '/inc/owl/owl.carousel-init.js', array( 'jquery' ), false, true );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/inc/owl/owl.carousel.css' );
wp_enqueue_style( 'owlcarousel-theme', get_template_directory_uri() . '/inc/owl/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-transitions', get_template_directory_uri() . '/inc/owl/owl.transitions.css' );

Nu este necesar să încărcați atât owl.carousel.js cât și versiunea .min.js. Din punct de vedere funcțional, aceste două fișiere ar trebui să fie identice. Versiunea .js reprezintă codul complet pe care l-ați folosi într-un mediu de dezvoltare, iar .min.js este o versiune minimizată a codului, optimizată pentru dimensiune mai mică și este utilizată în mediul de producție.

Nu pretind că sunt expert în WordPress (nici nu-mi doresc să fiu), dar am avut aceeași problemă încercând să fac Owl Carousel să funcționeze pe un site WordPress pentru un client și am o soluție nu prea elegantă.

În primul rând, așa cum a menționat steamfunk, WordPress necesită ca toate scripturile jQuery să folosească jQuery în loc de $.

Inițializarea mea ar arăta cam așa:

jQuery(function() {
    jQuery('.owl-carousel').owlCarousel()
})

Am avut probleme și cu încărcarea corectă a scriptului de inițializare, așa că am decis să pun scriptul direct în șablonul unde aveam nevoie de carusel.

Poți să-l păstrezi totuși în footer și să afișezi scriptul condiționat:

<?php if(is_page('numele_paginii')): ?>
    <script>
        // Codul tău de inițializare
    </script>
<?php endif ?>

Owl Carousel este singurul plugin cu care am avut probleme în a face lucrurile "în stilul WordPress", așa că poate fi o problemă cu Owl Carousel. Nu știu - repet, nu sunt expert.

Totuși, soluția mea poate nu este elegantă, dar a funcționat în situația mea și nu am găsit un răspuns bun la această întrebare, motiv pentru care împărtășesc asta aici.

nu este nevoie să încărcați atât owl.carousel.js cât și owl.carousel.min.js, doar versiunea minificată este suficientă. De asemenea, WordPress necesită să încadrați orice cod jQuery într-un wrapper non-conflict. Acest cod ar trebui să fie plasat în fișierul owl.carousel-init.js, deoarece acesta este cel pe care l-ați încărcat. Din exemplul dumneavoastră, nu ați încărcat fișierul "owl.carouselinit.js". Vă rugăm să consultați mai jos cum ar trebui să arate codul de inițializare Owl într-un wrapper non-conflict:

jQuery(document).ready(function ($) {

  $("#custom-carousel").owlCarousel({

    navigation: true, // Afișează butoanele următor și anterior


    navigationText: [
      "<i class='fa fa-chevron-left icon-white'></i>",
      "<i class='fa fa-chevron-right icon-white'></i>"
    ],



    // pagination : false,
    //     paginationNumbers: false,

    slideSpeed: 300,
    paginationSpeed: 400,

    items: 3,
    itemsCustom: false,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [980, 3],
    itemsTablet: [768, 3],
    itemsTabletSmall: true,
    itemsMobile: [415, 2],
    singleItem: false,
    itemsScaleUp: false,



  });
 });

după cum puteți vedea, Owl Carousel necesită ID-ul div-ului și nu clasa. Aceasta este o clasă .owl-carousel și acesta ar fi un ID #owl-carousel. Din câte înțeleg, Owl Carousel necesită să utilizați un nume de ID personalizat precum #custom-carousel care poate fi găsit în codul de mai sus. Sper că acest lucru ajută. SUCCES!