Sliders et WPAlchemy dans WordPress – tuto#1

Tuto : WPAlchemy - Nivo Slider
Posté par Jérôme le dans Tutoriels, WordPress16 commentaires | 34 430 vues

J’inaugure ce blog avec un premier tutoriel permettant de gérer plusieurs sliders, dynamiquement, via des metaBoxes dans WordPress. Pour se faire, nous utiliserons Nivo Slider et la classe WPalchemy. Le résultat est visible sur les pages de La marée, les biscuits.

Pour afficher différents sliders, et donc des images différentes, sur  les diverses pages de mon site, je ne souhaitais pas utiliser de plug-in, par contre je voulais mettre en place des « metaBoxes », atout majeur pour une administration plus simple. Pour ce qui est de l’affichage à proprement parler, je ne m’attarderai pas sur les paramétrages de Nivo Slider et des questions traitant de sa mise en forme.

Installation de Nivo Slider dans votre thème

Tout d’abord, il va falloir télécharger les fichiers sources nécessaires à l’installation de Nivo Slider. Pour cette installation simple, cinq étapes sont nécessaires :

  • Appel de la librairie jQuery
  • Création et appel d’un fichier .js pour l’initialisation du slider
  • Appel du fichier .js de Nivo Slider
  • Appel de la feuille de style .css du slider
  • Le code html pour l’affichage du slider dans vos pages

Appel de la libraire jQuery

Pour charger la bibliothèque JQuery, insérez cette ligne dans votre fichier footer.php, juste avant la fermeture de la balise </body>.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Création et appel de notre script .js

À l’aide votre éditeur de texte, créez un nouveau fichier .js, que vous nommerez slider.js. Insérez-y le code qui suit :

$(window).load(function() {
$('#slider').nivoSlider(); 
});

Enregistrez ce fichier dans un dossier /js à la racine de votre thème. Il nous faut appeler ce script dans le fichier footer.php et avant la balise </body>.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/slider.js"></script>

Charger les fichiers .js et .css de Nivo Slider

Maintenant, ouvrez l’archive nivo-slider3.2.zip précédemment téléchargée. Renommez le fichier jquery.nivo.slider.js en nivo-slider.js. Copiez ce fichier nivo-slider.js dans votre dossier /js.

Copiez ensuite le fichier nivo-slider.css et collez celui-ci à la racine de votre thème : votreTheme/nivo-slider.css. Revenez sur votre fichier footer.php et insérez cette ligne de code juste après l’appel à la bibliothèque JQuery.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/nivo-slider.js"></script>

Puis, dans la partie header de votre thème, insérer la ligne de code suivante avant la balise de fermeture </header>. Nous chargerons ainsi la feuille de style de notre Slider.

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/nivo-slider.css"/>

Coder le slider dans les pages .php de votre thème

Éditez votre fichier index.php (par exemple) à l’aide d’un éditeur de code et collez le code suivant à l’intérieur de la balise <body>

<div class="slider-wrapper">
<div id="slider" class="nivoSlider">

<img src="#" alt="" />
<img src="#" alt="" />
<img src="#" alt="" />

</div>
</div>

Ce code permettra d’afficher les images dans le slider. Pour l’instant, il ne se passe rien, c’est normal. Pour voir le slider en action, remplacez simplement les # par des liens pointant vers des images de votre choix.
Votre slider est maintenant en place.

Installation de la classe WPAlchemy

Si comme moi, vous n’êtes pas développeur, la classe WPAlchemy va vous être d’un grand secours pour créer des metaBoxes de manière relativement aisée. Toutefois, je le répète, il ne s’agit pas d’un plug-in, mais bien d’une classe qui va vous permettre d’étendre les possibilités offertes par WordPress en créant des boites de saisie dédiées. Un contrôle allant bien au-delà de ce que permettent les champs personnalisés de WordPress. Cela nécessite donc de mettre les mains dans le cambouis et je vous recommande grandement la lecture de la documentation de cette classe afin de ne pas copier/coller sans trop savoir de quoi il retourne.

Télécharger et installer WPAlchemy

Rendez-vous sur la page Github de Dimas Begunoff. Pour les anglophones, un tutoriel video vous expliquera comment installer WPAlchemy et également son fonctionnement.

Avant de commencer le téléchargement, assurez-vous d’être sur master branch.

tuto01_WPA_01

Une fois cette vérification faite, cliquez sur zip pour télécharger la classe WPAlchemy.

tuto01_WPA_02

Dézippez l’archive et collez le dossier wp-content/wpalchemy de celle-ci dans le dossier wp-content de votre installation WordPress. Ce dossier doit contenir les fichiers MediaAccess.php et MetaBox.php. Aucun besoin d’éditer ces fichiers, sauf si comme moi vous êtes de nature curieuse.

Retour au dossier racine de votre thème où vous allez également coller le dossier metaboxes que vous trouverez dans l’archive : wp-content/themes/mytheme/metaboxes.

Le fichier functions.php

Maintenant, nous allons faire en sorte que votre installation de WordPress charge la classe. Pour cela, éditez le fichier wp-content/themes/mytheme/functions.php se trouvant dans l’archive. Copiez/collez le code s’y trouvant tout en bas du fichier functions.php de votre thème.
Pour ce tutoriel, vous pouvez aussi simplement insérer le code ci-dessous. Ce code permet à la classe de fonctionner, nous ne nous servirons pas du reste.

include_once 'metaboxes/setup.php';
include_once 'metaboxes/simple-spec.php';

Nous allons maintenant faire une petite parenthèse et créer un custom post type ayant pour nom Slideshow. Ce custom post type vous permettra d’insérer des sliders sans passer par les articles de WordPress. Insérer le code suivant dans votre fichier functions.php, veillez à le positionner avant le code que nous avons collé précédemment.

/* Custom post type - Slideshow */
add_action('init', 'slideshow_init');
function slideshow_init ()
{
$labels = array (
'name' => 'Slideshow',
'singular_name' => 'Slideshow',
'add_new' => 'Ajouter un slide',
'add_new_item' => 'Ajouter un nouveau slide',
'edit_item' => 'Modifier un nouveau slide',
'new_item' => 'Nouveau slide',
'view_item' => 'Voir le slide',
'search_items' => 'Rechercher un slide',
'not_found' => 'Aucun slide trouvé',
'not_found_in_trash' => 'Aucun slide dans la poubelle',
'parent_item_colon' => '',
'menu_name' => 'Slideshow'
);

$args = array(

'labels' => $labels,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 2,
'supports' => array('title')
);

register_post_type('slideshow', $args);
}

Petit rappel, nous souhaitons afficher des sliders différents en fonction des diverses pages de notre site. Pour cela, nous allons également créer une Taxonomy personnalisée permettant de ‘classer’ nos sliders. Disons que c’est l’équivalent des catégories mais pour notre custom post type. Nous nommerons cette Taxonomy Classement.
Nous pourrons donc boucler sur les posts de type Slideshow et les afficher selon leur ‘catégorie’. Insérez le code suivant à la suite.

/* Taxonomy personnalisée - Classement */
add_action('init', 'create_slideshow_taxonomy', 0 );
function create_slideshow_taxonomy()
{
$labels = array (
'name' => 'Classement',
'singular_name' => 'Classement',
'search_items' => 'Rechercher un classement',
'all_items' => 'Tous les classement',
'edit_item' => 'Editer un classement',
'update_item' => 'Modifier un classement',
'add_new_item' => 'Ajouter un classement',
'new_item_name' => 'Nouveau classement',
'menu_name' => 'Classement'
);

register_taxonomy('classement', array('slideshow'), array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'query_var' => true,
'rewrite' => array('slug' => 'classement')
));
}

Voilà, notre fichier functions.php est maintenant prêt.

Mettre en place le système de classement des sliders

Rafraîchissez votre page d’administration. Vous devriez maintenant voir un onglet Slideshow apparaître. En le survolant, le menu affiche bien un onglet Classement en sous-menu.

tuto01_WPA_03

Cliquez sur Classement et ajouter une ou plusieurs ‘catégories’. Un identifiant est généré pour chacune d’entre elles. C’est de cet identifiant dont nous aurons besoin par la suite pour afficher nos différents sliders.

tuto01_WPA_04

Le fichier setup.php

Fermons cette parenthèse indispensable, et revenons à notre classe WPAlchemy. Il reste encore un peu de travail. Vous allez maintenant éditez le fichier metaboxes/setup.php de votre thème et remplacez le code existant par le suivant :

<?php

include_once WP_CONTENT_DIR . '/wpalchemy/MetaBox.php';
include_once WP_CONTENT_DIR . '/wpalchemy/MediaAccess.php';

// global styles for the meta boxes
if (is_admin()) add_action('admin_enqueue_scripts', 'metabox_style');

function metabox_style() {
if ( is_admin() )
{
wp_enqueue_style( 'wpalchemy-metabox', get_stylesheet_directory_uri() . '/metaboxes/meta.css' );
}
}

$wpalchemy_media_access = new WPAlchemy_MediaAccess();

/* eof */

Dans ces quelques lignes de code, nous avons directement ajouté la classe WPAlchemy_MediaAccess qui va nous servir pour uploader nos fichiers dans notre slider via la fenêtre Médias de WordPress. Vous remarquez également le chargement du fichier meta.css. Lorsque vous voudrez styler l’affichage de votre metabox, c’est ce fichier qu’il faudra éditer.

Le fichier simple-spec.php

Après toutes ses manipulations, nous allons enfin créer notre metabox. C’est ce fichier simple-spec.php qui va nous permettre de charger celle-ci. Éditez-le et coller/remplacer le code qui s’y trouve par le suivant :

<?php

$custom_slideshow_metabox = new WPAlchemy_MetaBox(array
(
'id' => '_custom_meta',
'title' => 'Slideshow Options',
'types' => array('slideshow'),
'template' => STYLESHEETPATH . '/metaboxes/slideshow_meta.php',
));

/* eof */

Dans ces lignes, nous définissons les propriétés de notre metabox custom_slideshow_metabox : un id, un titre, son type et le chemin permettant de la charger. Il nous faut donc créer ce fichier slideshow_meta.php qui n’existe pas encore.

Le fichier slideshow_meta.php

Dans notre éditeur de texte, nous allons donc créer un nouveau fichier .php et le Nommer slideshow_meta.php. Enregistrez-le dans le dossier metaboxes de votre thème.

Voici le code à y insérer. Vous pourrez par la suite le modifier, mais je vous conseille pour l’instant de le laisser tel qu’il est.

<?php global $wpalchemy_media_access; ?>
<div class="my_meta_control">

<!-- Slider "Single-Portfolio" -->
<div class="meta_bloc">
<h3>Slides</h3>

<?php while($mb->have_fields_and_multi('sldocs')): ?>
<?php $mb->the_group_open(); ?>

<div class="bloc">

<?php $mb->the_field('_sl_imgurl'); ?>
<?php $wpalchemy_media_access->setGroupName('_sl_img-n'. $mb->get_the_index())->setInsertButtonLabel('Insert'); ?>

<label for="url_image">URL de l'image</label>
<p>
<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'id' => 'url_image', 'value' => $mb->get_the_value())); ?>
<?php echo $wpalchemy_media_access->getButton(array('label' => 'Ajouter une image' )); ?>
</p>

<?php $mb->the_field('_sl_alt'); ?>
<label for="<?php $mb->the_name(); ?>">Description courte</label>
<p><input type="text" id="<?php $mb->the_name(); ?>" name="<?php $mb->the_name(); ?>" value="<?php $mb->the_value(); ?>"/></p>
<span>Attribut alt=""</span>

<a href="#" class="dodelete button">Supprimer le slide</a>

</div>

<?php $mb->the_group_close(); ?>
<?php endwhile; ?>

<p style="margin-bottom:15px; padding-top:5px;"><a href="#" class="docopy-sldocs button">Ajouter un slide</a></p>
</div>

</div>

Nous retrouvons la classe $wpalchemy_media_access que nous avons initialisée précédemment. C’est cette classe qui permet d’ajouter des médias en utilisant l’interface « médias » classique de WordPress. En clair, la fenêtre qui s’ouvre dans WordPress lorsque vous insérez une image, une vidéo… Nous avons donné un titre à notre metabox, ici Slides, mais vous pouvez bien entendu le changer. Les deux lignes qui suivent permettent d’utiliser les champs répétés pour la metabox. En effet, le nombre de slides doit pouvoir évoluer au grès de vos envies. Pour faire simple, ces lignes permettent d’insérer/supprimer des images à la volée dans votre slider.

Nous avons également créé toutes les caractéristiques de notre metabox : url de l’image, insertion d’une balise alt, insertion d’un bouton permettant d’ajouter une image et de boutons permettant de supprimer ou d’ajouter un slide.

Pour bien comprendre comment fonctionne ce code, je vous invite à regarder ce tutoriel video. Il est également en anglais mais indispensable à la bonne compréhension de ce tutoriel. Nous en avons fini avec l’installation de WPAlchemy sur notre site.

Créer un nouveau slideshow

Rafraîchissez votre page d’administration. Il ne reste plus qu’à créer un nouveau slider. Cliquez sur Slideshow, puis sur Ajouter un slide.

tuto01_WPA_05

À gauche, votre metabox est maintenant fonctionnelle. Vous pouvez ajouter une image par slide, remplir le champs Description courte (balise alt), ajouter et/ou supprimer un slide dans votre slideshow. À droite, vous remarquez la présence d’un bloc intitulé Classement.

tuto01_WPA_06

Lorsque vous cliquez sur Ajouter une image, la fenêtre Médias de WordPress s’ouvre. Il ne vous reste plus qu’à sélectionner votre image. Attention, je tiens à signaler un petit bug que je n’ai malheureusement pas réussi à fixer. Si vous sélectionner une image déjà présente dans votre bibliothèque de médias, le bouton Insert n’est plus disponible, à la place, WordPress vous propose un bouton Supprimer.

tuto01_WPA_07

La solution (provisoire) est de copier la cible du lien, de fermer la fenêtre Médias, et de coller le lien dans le champ URL de l’image de la metabox.

Avant de publier votre nouveau slideshow, il est impératif que vous cochiez une des cases du bloc Classement afin d’assigner une catégorie à votre slideshow. Impératif car c’est effectivement via ces cases à cocher que l’on va pouvoir récupérer les infos et les afficher dans nos pages.

tuto01_WPA_08

Afficher les infos sur le site

La dernière étape consiste à récupérer les données et les afficher au sein de notre slider car pour l’instant celui-ci ne récupère toujours pas nos images dynamiquement. Pour cela, éditez à nouveau votre fichier index.php. Remplacez le code suivant :

<div class="slider-wrapper">
<div id="slider" class="nivoSlider">

<img src="#" alt="" />
<img src="#" alt="" />
<img src="#" alt="" />

</div>
</div>

Par celui-ci :

<div class="slider-wrapper">
<div id="slider" class="nivoSlider">

<?php $args = array('post_type'=> 'slideshow','classement' => 'ID_CLASSEMENT'); 
query_posts( $args ); if(have_posts()) : while(have_posts()) : the_post(); 

global $custom_slideshow_metabox; 
$meta = $custom_slideshow_metabox->the_meta(); 

foreach ($meta['sldocs'] as $slimage) { ?> 
<img src="<?php echo $slimage['_sl_imgurl']; ?>" 
alt="<?php echo $slimage['_sl_alt']; ?>" /> 
<?php } ?> 
<?php endwhile; endif; wp_reset_query(); ?>

</div>
</div>

Il s’agit d’une boucle utilisant query_posts. Nous ne souhaitons afficher que les custom post types de type Slideshow classés dans Classement. Pour que cela fonctionne, remplacez ID_CLASSEMENT par l’id de l’un de vos classements. Vous pouvez ensuite copier ce code et le coller dans les différentes pages de votre site en indiquant un id de classement différent pour chacune d’entre elles.

Voilà, nous sommes arrivés à la fin de ce tutoriel. Maintenant, chaque page de votre site affiche un slider différent. Dans votre administration, vous pouvez gérer vos sliders, les classer et choisir les images à afficher pour chacun d’entre eux.

Je précise également que ce tutoriel a été réalisé avec Nivo Slider mais vous pouvez évidemment le réaliser avec d’autres sliders, par exemple FlexSlider.

J’espère avoir présenté les choses clairement et vous remercie d’avoir suivi ce tutoriel. Si vous gérez vos sliders WordPress de manières différentes, n’hésitez pas à me faire part de vos astuces dans les commentaires. À bientôt.

Recommandez ce contenu sur Google

Adresse de trackback pour cet article

Laisser un commentaire. | Faire un trackback. | Permalien | Lien court : http://j.mp/12xy7Pj

À propos de Jérôme

Graphiste Freelance. Plaide coupable, La Marée, les biscuits, c'est lui. Trouve intéressant de partager avec vous ses geekeries, ses trouvailles, ses sources d'inspirations et ses lubies musicales.

Voir ses 21 articlesSon compte twitterGoogle+

16 commentaires sur Sliders et WPAlchemy dans WordPress – tuto#1

  • M8ke, le 28 Avr 2013 à 14 h 23 min

    Bonjour,

    Merci pour ce tuto.
    J’essaye de l’adapter à ma sauce de telle sorte que ça m’affiche une seule image d’un article « à la une » sur ma homepage. J’ai tout suivi à lettre, mais lorsque j’essaye d’afficher ma home, j’ai une erreur du type :

    « Fatal error: Call to a member function the_meta() on a non-object in C:\wamp\www\wp_test\base\themes\ish-tml5\index.php on line 18 ».

    Une aide serait-elle possible ?

    Voila le code relatif à mon article « à la une » :

    query_posts( $args ); if(have_posts()) : while(have_posts()) : the_post();

    global $custom_slideshow_metabox;
    $meta = $custom_slideshow_metabox->the_meta();

    foreach ($meta[‘sldocs’] as $slimage) { ?>
    <img src=" »
    alt= » » />
    <a href=" » title= » »>

    Aucun article pour le moment…

  • Jérôme, le 28 Avr 2013 à 14 h 29 min

    Bonjour, essayez en créant un article avec une image « à la une… ». Il est fort possible que l’absence d’article retourne cette erreur.

    • M8ke, le 28 Avr 2013 à 14 h 47 min

      Il est vrai que je me compliquais la vie… :) Merci ça a marché…

    • Jérôme, le 28 Avr 2013 à 15 h 32 min

      De rien ! 😉

  • Artenis, le 29 Avr 2013 à 11 h 42 min

    Bonjour Jerôme,

    savez-vous s’il est possible d’intégrer la metabox slideshow de votre tutoriel dans une page de création d’un nouvel article (titre, wisiwyg, metabox slideshow) ,

    Suffirait-il de placer l’ensemble du code de votre tutoriel dans le fichier php du nouveau plugin de gestion d’un article au lieu du fichier functions.php ?

    • Jérôme, le 29 Avr 2013 à 12 h 22 min

      Bonjour, oui, il est possible d’utiliser ce genre de metaboxes dans un article ‘personnalisé’. C’est finalement ce que permet de faire ce tutoriel. Il suffirait d’y apporter quelques modifications.

      Quelques pistes : vous pourriez, par exemple, renommer le CustomPost Type ‘Slideshow’ par ‘Mon nouveau type d’article’ et lui ajouter les arguments types d’un article WordPress. Il faudrait ensuite créer un modèle (template) de page pour ce type d’article et y inclure le slider.

      Cela va m’être difficile de vous expliquer les diverses étapes à suivre en quelques lignes, mais je vais rédiger un tuto vous permettant de réaliser cela très facilement. L’article sera en ligne d’ici la fin de semaine.

      Le but de ce tutoriel est de ne pas se servir d’un plug-in, mais plutôt de mettre les mains dans le cambouis !

  • Grégoire Noyelle, le 19 Mai 2013 à 9 h 21 min

    Merci Jérome. Bon tuto.
    J’ai longtemps utilisé wpalchemy et suis passé finalement sur ACF. Du coup, j’ai envie de faire un tuto similaire mais avec ACF.

    • Jérôme, le 19 Mai 2013 à 10 h 36 min

      Merci à toi ! Du coup, je n’ai jamais testé ACF (ça a l’air pas mal). Et là, tu m’as donné envie de l’essayer sur une prochaine installation WordPress. C’est bien de varier les plaisirs :). Un tuto serait donc vraiment le bienvenu. Tu utilises ACF pour une raison particulière (performances, simplicité, options…) ?

  • Grégoire Noyelle, le 19 Mai 2013 à 11 h 33 min

    Je t’en prie.
    J’utilise ACF pour plusieurs raisons: l’interface (côté dev et utilistateur), les extensions, la puissance des options et la documentation.
    J’ai deux tutoriels sur ACF. D’autres sont en préparation. À suivre.

    • Jérôme, le 19 Mai 2013 à 13 h 12 min

      Super, je vais aller jeter un œil à tout cela dès que j’ai un petit moment.

  • gaelp, le 21 Mai 2013 à 21 h 31 min

    Aussi, dans le header remplacer :

    <link rel="stylesheet" href="/nivo.css »/>

    par :

    <link rel="stylesheet" href="/nivo-slider.css »/>

    • Jérôme, le 22 Mai 2013 à 9 h 34 min

      Merci Gaelp, c’est corrigé, le code est mis à jour !

  • gaelp, le 21 Mai 2013 à 21 h 24 min

    Merci pour ce tuto clair et complet.

    Je l’ai suivi et j’ai remarqué quelques petites anicroches au niveau des codes fournis.

    Dans le fichier index.php les div ne sont pas fermées (mais deux nouvelles sont ouvertes)

    Il me semble qu’il faille renommer le fichier ‘jquery.nivo.slider.js’ en ‘nivo.js’ selon la ligne qui l’appelle dans le footer.

  • forex trading, le 04 Juil 2013 à 2 h 49 min

    Pretty section of content. I just stumbled upon your site and in accession capital
    to claim that I acquire in fact enjoyed account your weblog posts.
    Anyway I’ll be subscribing on your feeds or even I success you get admission to consistently quickly.

    • Jérôme, le 04 Juil 2013 à 11 h 06 min

      Thank you for your feedback 😉

  • Tutoriels Wordpress, le 10 Mai 2015 à 3 h 17 min

    Merci pour ce tuto très complet et bien découpé. Les différentes étapes sont bien expliquées.

Commentez cet article !

Les champs munis d'une * sont obligatoires.