Flexslider et wordpress

bonjour à tous,

je me permet de demander de l'aide à la communauté car quand je veux utiliser du jquery avec wordpress, c'est la pure galère . voilà, je veux en fait utiliser l'effet flexslider sur l'une de mes pages de monsite.

d'après le codex, il y a une procédure bien précise pour utiliser un nouveau script jquery. je suis donc les directives de cette manière : (c'est à dire que je les déclare dans le fichier fonction.php)

tout d'abord je déclare mes scripts (jquery natif à wordpress et flexslider)

function appel_script(){
	wp_register_script( 'flexslider', get_template_directory_uri() .'/js/jquery.flexslider-min.js', array('jquery'), '2.4.0', false );
	wp_register_script( 'global', get_template_directory_uri() .'/js/global.js', array('jquery'), '1.0', true );
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'flexslider' );
	wp_enqueue_script( 'global' );
	
}

add_action('wp_enqueue_scripts','appel_script');

ensuite je déclare ma feuille de style propre au plugin flexslider

function appel_styles(){
	wp_register_style( 'flexslider', get_template_directory_uri() .'/css/flexslider.css');
	wp_enqueue_style( 'flexslider' );
}

add_action('wp_enqueue_styles','appel_styles');

ensuite dans le fichier global.js, je mets le code jquery pour faire fonctionner le tout :

jQuery(document).ready(function(${
	'use strict';

		$(window).load(function() {
		    $('.flexslider').flexslider({;
		    animation: "slide"
	  		});
		});
}(jQuery)));

pour le front j'ai suivi la structure conseillé sur la page woothèmes de flexslider. de plus, je veux que sur le site l'administrateur puisse administrer les photos de son carroussel tout seul sans aucune aide. pour se faire j'ai fais des métaboxes dans l'admin panel de wordpress et via une fonction wordpress je les récupèrent :

<?php
        $pageSlider = new WP_Query();
        $pageSlider->query('post_type=slider');?>

<?php    if($pageSlider->have_posts()): ?>
                <div class="flexslider">    
        
  				<ul class="slides">

                <?php   while ($pageSlider->have_posts()) : $pageSlider->the_post(); ?>
				    <li>
				    	<?php
     
                			$image_id = get_post_meta($post->ID, '_metaboxe_slider_img1', true);
                			$image = wp_get_attachment_image_src($image_id, 'full');
                			$image_src = $image[0]; 
            			?>
     
            			<img src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title($post->ID)); ?>" />
            			<span id="desc1"><?php echo get_post_meta( $post->ID, '_metaboxe_slider_desc1', true );?></span>
				    </li>
				    <li>
				      	<?php
     
                			$image_id = get_post_meta($post->ID, '_metaboxe_slider_img2', true);
                			$image = wp_get_attachment_image_src($image_id, 'full');
                			$image_src = $image[0]; 
            			         ?>
     
            			         <img src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title($post->ID)); ?>" />
            			        <span id="desc2"><?php echo get_post_meta( $post->ID, '_metaboxe_slider_desc2', true );?></span>
				    </li>
				    <li>
				    	<?php
     
                			$image_id = get_post_meta($post->ID, '_metaboxe_slider_img3', true);
                			$image = wp_get_attachment_image_src($image_id, 'full');
                			$image_src = $image[0]; 
            			        ?>
     
            			        <img src="<?php echo esc_url($image_src); ?>" alt="<?php echo esc_attr(get_the_title($post->ID)); ?>" />
				      	<span id="desc3"><?php echo get_post_meta( $post->ID, '_metaboxe_slider_desc3', true );?></span>
				    </li>

			
			<?php endwhile;?>
  				</ul>
			</div>

concernant le code ci dessus, je veux en plus des photos une petite description paramétrable depuis l'admin.

j'ai plusieurs souci :

quand j'insère la feuille de style CSS du flexslider, mes images disparaisse de ma page. ma structure de ma page front est elle correcte?

et quand j'insère le script jquery du flexslider, j'ai un message d'erreur Uncaught ReferenceError: $ is not defined ou encore unexpected token. ou est la boulette?

c'est un peu long je vous l'accorde mais là je comprend plus rien.

merci d'avance

bon j'ai pigé

tout d'abord dans la déclaration de style flexslider, il faut mettre wp_enqueue_scripts et non pas wp-enqueue_styles. du coup pour alléger le code on peut mettre la déclaration de style de flexslider avec la première fonction appel_script. ce n'est que mieux.

ensuite dans le code jquery il y a un fucking point virgule qui n'a pas sa place. du coup le code devient :

jQuery(document).ready(function($){
	'use strict';

		$(window).load(function() {
		    $('.flexslider').flexslider({
		    animation: "slide",
	  		});
		});
}(jQuery));

de plus, lorsque je mettais la feuille de style de flexslider, mes photos disparaissaient. normal il y a un display none dans la feuille de style flexslider.css. on shinte cette ligne et c'est tout bon

par contre le souci c'est que les boutons de navigations du slider sont notés fli au lieu des images propre au plugin. je vais voir ça, mais normalement rien de trop compliqué