Comment créer un diaporama jQuery dynamique avec WordPress

Dans ce tutoriel, nous verrons comment ajouter un diaporama dynamique à l’une de nos pages WordPress!

Le tout se fait en trois étapes facile :

1. Inclure le JQuery nécessaire au diaporama.
2. Créer un modèle spécifique à notre page.
3. Ajouter les images.

Inclure le jQuery

Nous utiliserons l’extension JQuery Cycle pour notre animation. Parce qu’il est simple à implémenter et un API est disponible pour une plus grande personnalisation.

Vous n’avez qu’à mettre ceci entre les balises « head » de votre fichier header.php

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function( $ ) {
		$('.slideshow').cycle({
			fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});
	});
</script>

En plus d’être extrêmement simple d’utilisation, JQuery Cycle est hébergé dans les nuages et réduit donc le nombre de requêtes à votre serveur.

N’oubliez pas de charger jQuery dans le fichier functions.php si ce n’est pas déjà fait.

// Load jQuery
if ( !function_exists(core_mods) ) {
    function core_mods() {
        if ( !is_admin() ) {
            wp_deregister_script('jquery');
            wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
            wp_enqueue_script('jquery');
        }
    }
    core_mods();
}

Cette petite fonction charge la dernière version de jQuery à partir des serveurs de Google.

Créer un modèle

Pour créer un modèle personnalisé, je conseille de copier page.php et de le renommer template-slider.php par exemple.

• Ajoutez le commentaire PHP « Template name: Slider JQuery Dynamique » dans le haut.
• Ajoutez le div « slideshow » à l’endroit désirer dans votre modèle.

<?php /* Template name: Slider JQuery Dynamique */?>
<?php get_header(); ?>
<div class="slideshow">
	<?php
		$argsThumb = array(
			'order'          => 'ASC',
			'post_type'      => 'attachment',
			'post_parent'    => $post->ID,
			'post_mime_type' => 'image',
			'post_status'    => null
		);
		$attachments = get_posts($argsThumb);
		if ($attachments) {
			foreach ($attachments as $attachment) {
				echo '<img src="'.wp_get_attachment_url($attachment->ID, 'thumbnail', false, false).'" />';
			}
		}
	?>
</div>
<?php get_footer(); ?>

La magie se trouve dans ce petit bout de code. Chaque image attachée à la page est insérée ici.

Ajouter les images

­
La dernière étape consiste à ajouter les images désirées dans l’éditeur d’image WordPress.

1. Ouvrez une page pour la modifier
2. Cliquer sur Ajouter une image

3. Sélectionnez les fichiers à télécharger, puis cliquez sur le bouton Enregistrer toutes les modifications.

4. Assurez-vous de sélectionner le modèle que vous avez créé au préalable dans la section attribut de la page.

À votre tour

Quand pensez-vous? De quelle façon faites-vous vos diaporamas dans WordPress?

Mise à jour 2011-09-17

- Charger jQuery avec wp_enqueue_script.

Sur le même sujet

• Comment segmenter le trafic social avec Google Analytics
• Comment afficher votre nombre d’abonner Feedburner en texte
• Comment afficher votre nombre de suiveurs Twitter en texte
• WordPress: Ajouter une bio d’auteur à la fin de vos articles