Pourquoi le diaporama FlexySlider n’est pas chargé dans ce thème WordPress ?
Je suis assez nouveau dans le développement de thèmes WordPress et j’ai le problème suivant.
J’essaie de créer un thème WordPress utilisant le framework CSS BootStrap basé sur ce site Web statique de démonstration BootStrap (j’ai la source complète de ce site car il s’agit d’un didacticiel téléchargeable): http://www.html.it/guide/img /bootstrap/demo/home.html
Ceci est mon thème WP personnalisé : http://onofri.org/WP_BootStrap/
J’ai donc créé un thème WP de base et comme première étape je souhaite insérer le diaporama de la page de démonstration précédente dans le fichier header.php de mon thème WP, voici donc mon code header.php :
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-1.jpg"/>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-2.jpg"/>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-3.jpg"/>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
</div><!-- /.col-sm-12 -->
</div><!-- /.row -->
<center>
<div id="page">
<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />
Comme vous pouvez le voir, j’ai simplement pris le bloc du site de démonstration statique et je l’ai mis au début de mon fichier header.php.
Pour charger mon jquery.flexslider.js j’utilise ce code dans le fichier WordPress functions.php suivant le standard WordPress utilisé pour charger les JavaScripts :
/* Function automatically executed by the hook 'load_java_scripts':
* 1) Load all my JavaScripts
*/
function load_java_scripts() {
// Load JQuery:
wp_enqueue_script('jquery');
// Load bootstrap.min.js:
wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3', true);
// Load FlexSlider JavaScript
wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
// Load FancyBox:
wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5', true);
// Load scripts.js:
wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
Comme vous pouvez le voir , jquery.flexslider.js doit être chargé dans toutes mes pages, en fait (dans FireFox) en regardant à la fin de la source de la page, il y a :
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js?ver=v2.1'></script>
Et en cliquant dessus, vous pouvez voir la source de jquery.flexslider.js
Ok, mon thème WordPress est configuré pour utiliser le CSS BootStrap et le flexslider.css ainsi que le fichier style2.css qui représente ce que dans le site de démonstration est le stili-custom.css (mes paramètres CSS personnalisés qui sont enfin chargés pour ovverride les propriétés définies)
Comme vous pouvez le voir, le problème est qu’au début de mon thème, le diaporama n’apparaît pas et je n’ai aucune idée de ce problème.
Pourquoi? Pouvez-vous m’aider à résoudre ce problème?
TX
Andréa
Solution n°1 trouvée
Je vous vois charger le flexslider js, mais faites-vous réellement appel à flexslider pour créer votre diaporama ?
Quelque chose comme:
$(document).ready(function(){
$('.flexslider').flexslider({option1: value, option2: value});
});
0 commentaire