Come integrare owl carousel nel tema senza utilizzare un plugin?

Stai riutilizzando gli handle per lo script e gli stili. Questi devono essere valori univoci (vedi Riferimento WP Codex)

Dovrebbe essere qualcosa del genere:

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' );

Non è necessario caricare sia owl.carousel.js che il .min.js. Funzionalmente questi due file dovrebbero essere identici. La versione .js è il codice completo che vorresti usare in un ambiente di sviluppo, mentre il .min.js è una versione minimizzata del codice ottimizzata per dimensioni ridotte del file e viene utilizzata in ambiente di produzione.

Non pretendo di essere un esperto di WP (né mi interessa esserlo), ma ho avuto lo stesso problema cercando di far funzionare Owl Carousel su un sito WordPress per un cliente, e ho una soluzione poco elegante.

Innanzitutto, come ha sottolineato steamfunk, WordPress richiede che tutto il jQuery utilizzi jQuery invece di $.

La mia inizializzazione sarebbe qualcosa del genere:

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

Anch'io ho avuto problemi a capire come caricare correttamente il mio script di inizializzazione, quindi ho deciso di inserire lo script direttamente nel template dove mi serviva il carousel.

Puoi comunque mantenerlo nel footer, e semplicemente mostrare lo script condizionalmente:

<?php if(is_page('nome_della_pagina')): ?>
    <script>
        // Il tuo codice di inizializzazione
    </script>
<?php endif ?>

Owl Carousel è l'unico plugin con cui ho avuto problemi nel fare le cose "alla maniera di WordPress", quindi potrebbe essere un problema di Owl Carousel. Non lo so - ripeto, non sono un esperto.

Tuttavia, la mia soluzione potrebbe non essere elegante, ma ha funzionato nella mia situazione e non ho trovato una buona risposta a questa domanda, ecco perché la condivido qui.

Non è necessario accodare sia owl.carousel.js che owl.carousel.min.js, basta utilizzare esclusivamente la versione minificata. Inoltre, WordPress richiede di incapsulare il codice jQuery in un wrapper non conflittuale. Questo codice dovrebbe risiedere nel file owl.carousel-init.js dato che è quello che hai accodato. Dal tuo esempio, non risulta che il file "owl.carouselinit.js" sia stato accodato. Di seguito puoi osservare come il codice di inizializzazione di Owl Carousel appare all'interno di un wrapper non conflittuale:

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

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

    navigation: true, // Mostra i pulsanti successivo e precedente


    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,



  });
 });

Come puoi vedere, Owl Carousel richiede l'ID del div e non la classe. Questo è un esempio di classe .owl-carousel e questo sarebbe un ID #owl-carousel. Da quello che ho capito, Owl Carousel richiede l'utilizzo di un nome ID personalizzato come #custom-carousel che può essere trovato nel codice sopra. Spero che questo ti aiuti. SALUTI!