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

Question

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

2

32057 2015-03-06

J'aiessayé d'intégrer owl.carousel dansmonthème,maisje peux çane marchepas. Lesinstructions sur lapagene sontpaspour WordPress,j'ai doncbesoin d'aidepourmettre correctementen file d'attente lesfichiers requiset appeler (initialiser) le carrousel.

J'ai ajouté lesfichiers suivants àmon répertoire dethèmes situé dans MyTheme/inc/owl/

AjaxLoader.gif

grabbing.png

owl.carousel.css

owl.carousel.js

owl.carousel.min.js

owl.carouselinit.js - > Il s'agit de "appeler lafonction d'initialisation Owl"

owl.theme.css

owl.transitions.css

Dansmonfichierfunctions.php,je metsen file d'attente lesfichiers 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 lefichier & quot; owl.carouselinit.js & quot; J'ai simplement ajouté lafonction d'initialisation répertoriée sur le site Web quiest:

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

J'ai égalementexaminé certainsplugins qui utilisent le carrousel de hibouet il semble qu'ilsn'utilisent que 3fichiers (mettreen file d'attente)pour utiliser le carrousel de chouette.

Merci d'avance

I've been trying to integrate the owl.carousel into my theme but can't get it to work. The instructions on the page are not for WordPress so I need help with how to properly enqueue the required files and calling (initializing) the carousel.

I have added the following files to my themes directory located at MyTheme/inc/owl/

AjaxLoader.gif

grabbing.png

owl.carousel.css

owl.carousel.js

owl.carousel.min.js

owl.carouselinit.js -> This is the "call the Owl initializer function"

owl.theme.css

owl.transitions.css

In my functions.php file I enqueue the required files:

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

In the file "owl.carouselinit.js" I simply added the initializer function listed at the website which is:

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

Also I have looked at some plugins that use owl carousel and it looks like they are only using (enqueue) 3 files to use the owl carousel.

Thanks in advanced

functions

la source

Paul Coppock

3 réponses

votes

1

2016-11-05

Vous réutilisez despoignéespour le scriptet les styles. Ces valeurs doivent être uniques (voir WP Codex Reference )

Cela devrait ressembler à ceci:

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

Vousn'avezpasbesoin demettreen file d'attente owl.carousel.jset le .min.js. Fonctionnellement,ces deuxfichiers doivent êtreidentiques. La version .jsest le code complet que vous voudriez utiliser dans unenvironnement de développementet le .min.jsest une version réduite du code optimiséepour unetaille defichierpluspetite etest utilisée dans unenvironnement deproduction.

You're reusing handles for the script and the styles. These need to be unique values (see WP Codex Reference)

It should look something like this:

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

You do not need to enqueue both owl.carousel.js and the .min.js. Functionally these two files should be identical. The .js version is the full code that you would want to use in a development environment and the .min.js is a minimized version of the code optimized for smaller file size and is used in production environment.

la source

Cedon

0

2016-11-05

Jene prétendspas être unexpert WP (etje ne veuxpas l'être),maisj'aieu lemêmeproblèmeen essayant defairetravailler Owl Carousel sur un site wordpresspour un client,et j'ai une solutionmoche.

Tout d'abord,comme l'a souligné steamfunk,WordPressexige quetous lesjQuery utilisent jQueryplutôt que $.

Moninitialisation ressemblerait à ceci:

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

J'avais également desproblèmespourtrouver commentmettre correctementen file d'attentemon script d'initialisation,alorsj'ai décidé de simplementmettre le script directement dans lemodèle dans lequelj'avaisbesoin du carrousel.

Vouspouveztoujours le conserver dans lepied depageet simplementfaire écho au script sous condition:

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

Owl Carouselest le seulpluginpour lequelj'aieu desproblèmespourfaire les choses "à lamanière Wordpress" doncje suppose que celapourrait être unproblème avec Owl Carousel. Jene saispas -encore unefois,pas unexpert.

Cependant,ma solutionn'estpeut-êtrepas élégante,maiselle afonctionnépourma situationet jen'aipastrouvé debonne réponse à cette question,c'estpourquoije lapartageici.

I don't claim to be a WP expert (nor do I care to be), but I had the same issue trying to get Owl Carousel to work on a wordpress site for a client, and I have an ugly solution.

First of all as steamfunk pointed out, WordPress requires all jQuery to use jQuery rather than $.

My initialization would look something like this:

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

I also was having issues figuring out how to enqueue my init script properly, so I decided to just put the script directly in the template I needed the carousel in.

You can still keep it in the footer, and just echo the script conditionally:

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

Owl Carousel is the only plugin I've had issues doing things the "Wordpress way" so I guess it could be an issue with Owl Carousel. I don't know - again, not an expert.

However, my solution may not be elegant, but it worked for my situation and I couldn't find a good answer for this question, which is why I'm sharing this here.

la source

Dan Fletcher

Vouspouvez simplement écrire `jQuery (function ($) {$ ('. Owl-carousel'). OwlCarousel ()});`

You can just write `jQuery(function($) { $('.owl-carousel').owlCarousel()});`

0

2016-11-05

fuxia

Oh sympa!Jen'y aipaspensé

Oh nice! I didn't think of that

0

2016-12-30

Dan Fletcher

-1

2016-03-06

vousn'avezpas àmettreen file d'attente à lafois owl.carousel.jset owl.carousel.min.js,seul lemin fera l'affaire. Wordpress vous oblige également àmettretoutejquery dans un wrappernon conflictuel. celairait dans lefichier owl.carousel-init.jspuisque c'est celui que vous avezmisen file d'attente. àpartir de votreexemple,vousn'avezpasmisen file d'attente lefichier "owl.carouselinit.js". Veuillez regarder ci-dessouspour voir à quoi ressemblera le code d'initialisation owl dans un wrappernon conflictuel:

jQuery(document).ready(function ($) { $("#custom-carousel").owlCarousel({ navigation: true, // Show next and prev buttons 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, }); });

comme vouspouvez le voir,le carrousel hibou requiert l'identifiant du divet non de la classe. c'est une classe .owl-carrouselet ce serait unid # owl-carousel. D'après ce queje comprends,le carrousel hibou vous oblige à utiliser unnom d'identifiantpersonnalisétel que # custom-carousel qui setrouve dans le code ci-dessus. J'espère que cela aidera CHEERS!

you do not have to enqueue both the owl.carousel.js and the owl.carousel.min.js just the min will do. also wordpress requires you to put any jquery into a non conflict wrapper. this would go into the file owl.carousel-init.js since that is the one you have enqueued. from your example you have not enqueued the file "owl.carouselinit.js". please look below to see how the owl init code will look in a non conflict wrapper:

jQuery(document).ready(function ($) { $("#custom-carousel").owlCarousel({ navigation: true, // Show next and prev buttons 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, }); });

as you can see, owl carousel requires the id of the div and not the class. this is a class .owl-carousel and this would be an id #owl-carousel. From what i understand owl carousel requires you to use a custom id name like #custom-carousel which can be found in the code above. Hope that helps CHEERS!

la source

steamfunk

Cedon · Answer 1 · 2016-11-05

1

2016-11-05

Vous réutilisez despoignéespour le scriptet les styles. Ces valeurs doivent être uniques (voir WP Codex Reference )

Cela devrait ressembler à ceci:

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

Vousn'avezpasbesoin demettreen file d'attente owl.carousel.jset le .min.js. Fonctionnellement,ces deuxfichiers doivent êtreidentiques. La version .jsest le code complet que vous voudriez utiliser dans unenvironnement de développementet le .min.jsest une version réduite du code optimiséepour unetaille defichierpluspetite etest utilisée dans unenvironnement deproduction.

You're reusing handles for the script and the styles. These need to be unique values (see WP Codex Reference)

It should look something like this:

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

You do not need to enqueue both owl.carousel.js and the .min.js. Functionally these two files should be identical. The .js version is the full code that you would want to use in a development environment and the .min.js is a minimized version of the code optimized for smaller file size and is used in production environment.

Dan Fletcher · Answer 2 · 2016-11-05

0

2016-11-05

Jene prétendspas être unexpert WP (etje ne veuxpas l'être),maisj'aieu lemêmeproblèmeen essayant defairetravailler Owl Carousel sur un site wordpresspour un client,et j'ai une solutionmoche.

Tout d'abord,comme l'a souligné steamfunk,WordPressexige quetous lesjQuery utilisent jQueryplutôt que $.

Moninitialisation ressemblerait à ceci:

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

J'avais également desproblèmespourtrouver commentmettre correctementen file d'attentemon script d'initialisation,alorsj'ai décidé de simplementmettre le script directement dans lemodèle dans lequelj'avaisbesoin du carrousel.

Vouspouveztoujours le conserver dans lepied depageet simplementfaire écho au script sous condition:

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

Owl Carouselest le seulpluginpour lequelj'aieu desproblèmespourfaire les choses "à lamanière Wordpress" doncje suppose que celapourrait être unproblème avec Owl Carousel. Jene saispas -encore unefois,pas unexpert.

Cependant,ma solutionn'estpeut-êtrepas élégante,maiselle afonctionnépourma situationet jen'aipastrouvé debonne réponse à cette question,c'estpourquoije lapartageici.

I don't claim to be a WP expert (nor do I care to be), but I had the same issue trying to get Owl Carousel to work on a wordpress site for a client, and I have an ugly solution.

First of all as steamfunk pointed out, WordPress requires all jQuery to use jQuery rather than $.

My initialization would look something like this:

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

I also was having issues figuring out how to enqueue my init script properly, so I decided to just put the script directly in the template I needed the carousel in.

You can still keep it in the footer, and just echo the script conditionally:

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

Owl Carousel is the only plugin I've had issues doing things the "Wordpress way" so I guess it could be an issue with Owl Carousel. I don't know - again, not an expert.

However, my solution may not be elegant, but it worked for my situation and I couldn't find a good answer for this question, which is why I'm sharing this here.

Vouspouvez simplement écrire `jQuery (function ($) {$ ('. Owl-carousel'). OwlCarousel ()});`

You can just write `jQuery(function($) { $('.owl-carousel').owlCarousel()});`
- 0
- 2016-11-05
- fuxia
Oh sympa!Jen'y aipaspensé

Oh nice! I didn't think of that
- 0
- 2016-12-30
- Dan Fletcher

steamfunk · Answer 3 · 2016-03-06

-1

2016-03-06

vousn'avezpas àmettreen file d'attente à lafois owl.carousel.jset owl.carousel.min.js,seul lemin fera l'affaire. Wordpress vous oblige également àmettretoutejquery dans un wrappernon conflictuel. celairait dans lefichier owl.carousel-init.jspuisque c'est celui que vous avezmisen file d'attente. àpartir de votreexemple,vousn'avezpasmisen file d'attente lefichier "owl.carouselinit.js". Veuillez regarder ci-dessouspour voir à quoi ressemblera le code d'initialisation owl dans un wrappernon conflictuel:

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

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

    navigation: true, // Show next and prev buttons


    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,



  });
 });

comme vouspouvez le voir,le carrousel hibou requiert l'identifiant du divet non de la classe. c'est une classe .owl-carrouselet ce serait unid # owl-carousel. D'après ce queje comprends,le carrousel hibou vous oblige à utiliser unnom d'identifiantpersonnalisétel que # custom-carousel qui setrouve dans le code ci-dessus. J'espère que cela aidera CHEERS!

you do not have to enqueue both the owl.carousel.js and the owl.carousel.min.js just the min will do. also wordpress requires you to put any jquery into a non conflict wrapper. this would go into the file owl.carousel-init.js since that is the one you have enqueued. from your example you have not enqueued the file "owl.carouselinit.js". please look below to see how the owl init code will look in a non conflict wrapper:

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

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

    navigation: true, // Show next and prev buttons


    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,



  });
 });

as you can see, owl carousel requires the id of the div and not the class. this is a class .owl-carousel and this would be an id #owl-carousel. From what i understand owl carousel requires you to use a custom id name like #custom-carousel which can be found in the code above. Hope that helps CHEERS!