web-dev-qa-db-fra.com

Comment intégrer le hibou carrousel dans le thème sans utiliser de plugin?

J'ai essayé d'intégrer le owl.carousel dans mon thème mais je ne peux pas le faire fonctionner. Les instructions de la page ne sont pas destinées à WordPress. J'ai donc besoin d'aide pour mettre correctement en file d'attente les fichiers requis et pour appeler (initialiser) le carrousel.

J'ai ajouté les fichiers suivants à mon répertoire themes situé dans MyTheme/inc/owl/

  • AjaxLoader.gif
  • saisir.png
  • owl.carousel.css
  • owl.carousel.js
  • owl.carousel.min.js
  • owl.carouselinit.js -> Ceci est "l'appel de la fonction d'initialisation de Owl"
  • owl.theme.css
  • owl.transitions.css

Dans mon fichier functions.php, j'ai mis en file d'attente les fichiers requis:

/*-------------------------------------------------------------------------------
Add Owl Carousel
-------------------------------------------------------------------------------*/

// Enqueue Scripts/Styles for our owl.carousel.2
function agencyclix_add_owlcarousel() {
wp_enqueue_script ( 'jquery' );
wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owlcarousel', get_template_directory_uri() . '/inc/owl/owl.carousel.min.js', array( 'jquery' ), false, true );
wp_enqueue_script( 'owl-carousel', 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-style', get_template_directory_uri() . '/inc/owl/owl.theme.css' );
wp_enqueue_style( 'owlcarousel-style', get_template_directory_uri() . '/inc/owl/owl.transitions.css' );
}
add_action( 'wp_enqueue_scripts', 'agencyclix_add_owlcarousel' );

Dans le fichier "owl.carouselinit.js", j'ai simplement ajouté la fonction d'initialisation indiquée sur le site Web, à savoir:

$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});

J'ai aussi regardé quelques plugins qui utilisent le carrousel de hiboux et il semblerait qu'ils n'utilisent que des fichiers (en file d'attente) 3 pour utiliser le carrousel de hiboux.

Merci d'avance

functions
2
Paul Coppock

Vous réutilisez des poignées pour le script et les styles. Celles-ci doivent être des valeurs uniques (voir WP Référence du Codex )

Ça devrait ressembler a quelque chose comme ca:

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

Vous n'avez pas besoin de mettre en file d'attente owl.carousel.js et le fichier .min.js. Fonctionnellement, ces deux fichiers doivent être identiques. La version .js est le code complet que vous souhaitez utiliser dans un environnement de développement et .min.js est une version minimisée du code optimisée pour des fichiers de taille réduite. Elle est utilisée dans un environnement de production.

1
Cedon

Je ne prétends pas être un WP expert (je ne me soucie pas de l'être), mais j'ai eu le même problème en essayant de faire travailler Owl Carousel sur un site wordpress pour un client. solution laide.

Tout d’abord, comme Steamfunk l’a souligné, WordPress exige que tous les logiciels jQuery utilisent jQuery plutôt que $.

Mon initialisation ressemblerait à quelque chose comme ceci:

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

J'avais aussi des problèmes pour trouver comment mettre correctement en file d'attente mon script d'initialisation, alors j'ai décidé de le placer directement dans le modèle dans lequel j'avais besoin du carrousel.

Vous pouvez toujours le garder dans le pied de page et simplement rappeler le script de manière conditionnelle:

<?php if(is_page('name_of_page')): ?>
    <script>
        // Your init stuff
    </script>
<?php endif ?>

Owl Carousel est le seul plug-in que j'ai eu des problèmes à faire les choses de la "manière Wordpress" donc je suppose que cela pourrait être un problème avec Owl Carousel. Je ne sais pas - encore une fois, pas un expert.

Cependant, ma solution n’est peut-être pas élégante, mais elle a fonctionné dans mon cas et je n’ai pas trouvé de réponse satisfaisante à cette question. C’est la raison pour laquelle je la partage ici.

0
Dan Fletcher