Sliders et WPAlchemy dans WordPress – tuto#2

marBis_wpa_blog_PSD01
Posté par Jérôme le dans Tutoriels, WordPressCommentez cet article | 11 009 vues

Dans ce deuxième tutoriel, consacré à la classe WPalchemy et aux metaBoxes, nous allons apprendre à insérer, gérer et afficher une série d’images sous forme de slideshow dans un article.

Pourquoi utiliser un slideshow ?

Depuis sa version 2.9, WordPress permet d’insérer une image à la Une dans vos articles et, depuis sa version 3.5, de générer des galeries directement dans ceux-ci.

Si WordPress propose ces fonctionnalités, très pratiques, alors pourquoi vouloir absolument afficher des images sous formes de Slideshow ?

Prenons l’exemple d’un portfolio, vous êtes graphiste, vous avez un certain nombre de ‘projets’ à présenter sur votre site internet. Pour ce faire, vous allez mettre en place une page intitulée portfolio à l’intérieur de laquelle tous vos projets s’afficheront, vraisemblablement, sous forme de miniatures. Lorsqu’un visiteur cliquera sur une de ces miniatures, il accèdera au contenu de ce projet. Dans cette page, vous souhaiteriez que le visiteur puisse avoir un aperçu de votre travail en lui présentant plusieurs images.

Plusieurs solutions s’offrent effectivement à vous :

  • Afficher l’image à la Une de votre projet, elle servira également à générer la miniature sur votre page portfolio. Puis, dans le corps de votre article, insérer des images à la volée ou encore créer une galerie de vos images.
  • Insérer et afficher une miniature à l’aide d’une metaBoxe. Puis, afficher des images sous forme de slideshow, toujours à l’aide des metaBoxes.

C’est donc cette deuxième solution que j’ai choisi de vous présenter et que nous allons dès maintenant mettre en place, en effet, elle permet de créer une mise en page personnalisée, sobre et accessible. De plus, si vous souhaitez afficher dix images dans votre article, vos visiteurs n’auront pas besoin de ‘scroller’ dans la page pour parcourir les différentes étapes ou déclinaison de votre travail.

Installation et mise en place

Je ne reviendrai pas sur l’installation de Nivo Slider dans ce tutoriel, je vous invite pour cela à suivre la première partie du précédent tutoriel de cette série.

Faites de même pour l’installation de la classe WPalchemy.

le fichier function.php

Tout d’abord, assurez-vous d’avoir bien inséré le code qui suit à la fin de votre fichier function.php, comme indiqué dans le premier tutoriel.

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

Créer un nouveau Custom Post type

Nous allons ensuite créer un Custom Post Type ayant pour nom Portfolio. Ce Custom Post Type vous permettra d’insérer des articles personnalisés sans passer par les articles par défauts de WordPress. Insérer le code suivant dans votre fichier functions.php.

/**
CUSTOM POST TYPE PORTFOLIO
*/

add_action('init', 'portfolio_init');
function portfolio_init ()
{
$labels = array (
'name' => 'Projets',
'singular_name' => 'Portfolio',
'add_new' => 'Ajouter un projet',
'add_new_item' => 'Ajouter un nouveau projet',
'edit_item' => 'Modifier un nouveau projet',
'new_item' => 'Nouveau projet',
'view_item' => 'Voir le projet',
'search_items' => 'Rechercher un projet',
'not_found' => 'Aucun projet trouvé',
'not_found_in_trash' => 'Aucun projet dans la poubelle',
'parent_item_colon' => '',
'menu_name' => 'Portfolio'
);

$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' => 3,
'supports' => array('title', 'editor', 'thumbnail')
);

register_post_type('portfolio', $args);
}

Créer une Taxonomy ‘Domaines’

Nous voulons pouvoir trier nos projets selon des ‘catégories’. Nous allons donc maintenant créer une Taxonomy personnalisée permettant de ‘classer’ nos projets. Nous nommerons cette Taxonomy Domaines.

add_action('init', 'create_taxonomy', 0 );
function create_taxonomy()
{
    $labels = array (
      'name' => 'Domaines',
      'singular_name' => 'Domaine',
      'search_items' => 'Rechercher un domaine',
      'all_items' => 'Tous les domaines',
      'edit_item' => 'Editer un domaine',
      'update_item' => 'Modifier un domaine',
      'add_new_item' => 'Ajouter un domaine',
      'new_item_name' => 'Nouveau domaine',
      'menu_name' => 'Domaines'
    );

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

Notre fichier function.php est fin prêt.

Créer vos ‘Domaines’

Rafraîchissez votre page d’administration. Vous devriez maintenant voir un onglet Portfolio apparaître. En le survolant, le menu affiche bien un onglet Domaines.

tuto06_WPA_01

Vous n’avez plus qu’à créer vos propres domaines.

tuto06_WPA_02

La classe WPalchemy

Nous allons maintenant entrer dans le vif du sujet, à savoir l’utilisation de la classe WPalchemy.
Il est important, avant de continuer ce tuto, d’avoir bien suivi les étapes d’installation de cette classe dans le première partie du tutoriel.

Le fichier simple-spec.php

Nous allons créer la metaBoxe nous permettant de gérer nos projets. Éditez le fichier metaboxes/simple-spec.php de votre thème et collez le code suivant :

$custom_portfolio_metabox = new WPAlchemy_MetaBox(array
(
    'id' => '_custom_meta',
    'title' => 'Portfolio Options',
    'types' => array('portfolio'),
    'template' => STYLESHEETPATH . '/metaboxes/portfolio_meta.php',
));

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

Note : Si vous avez suivi le premier tutoriel, votre fichier devrait ressembler à cela :

<?php $custom_portfolio_metabox = new WPAlchemy_MetaBox(array 
( 	
     'id' => '_custom_meta',
     'title' => 'Portfolio Options',
     'types' => array('portfolio'),
     'template' => STYLESHEETPATH . '/metaboxes/portfolio_meta.php',
));

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

/* eof */

Le fichier portfolio-meta.php

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

Voici le code à insérer dans ce fichier. Vous pourrez, par la suite, le modifier à votre guise, mais je vous conseille, pour bien suivre ce tutoriel, de le laisser en l’état (surtout si ce code vous semble ‘obscur’). Vous pourrez également, pourquoi pas, ajouter d’autres metaBoxes répondant plus spécifiquement à vos besoins.

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

<!-- Thumbnail -->
<div class="meta_bloc">
<h3>Thumbnail</h3>

<?php $mb->the_field('_thumb_img'); ?>
<?php $wpalchemy_media_access->setGroupName('nn2')->setInsertButtonLabel('Insert This')->setTab('library'); ?>

<label for="_miniature">URL de l'image</label>
<p>
<?php echo $wpalchemy_media_access->getField(array('name' => $mb->get_the_name(), 'id' => '_miniature', 'value' => $mb->get_the_value())); ?>
<?php echo $wpalchemy_media_access->getButton(array('label' => 'Ajouter une miniature depuis la bibliothèque')); ?>
<span>Taille de la miniature 240px * 215px</span>
</p>

<?php $mb->the_field('_thumb_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(); ?>"/>
<span>Attribut alt=""</span>
</p>

</div>

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

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

<div class="bloc">

<?php $mb->the_field('_sp_imgurl'); ?>
<?php $wpalchemy_media_access->setGroupName('_sp_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' )); ?>
<span>Taille de l'image 960px * 480px</span>
</p>

<?php $mb->the_field('_sp_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 projet</a>

</div>

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

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

</div>

Voyons maintenant plus en détail ce code. La première ligne fait appel à la classe $wpalchemy_media_access que nous avons initialisée dans le premier tutoriel. Grace à cette classe, nos pourrons ajouter nos images en utilisant l’interface « médias » classique de WordPress.

Ensuite, nous donnons un titre à notre première metaBoxe : Thumbnail (miniature). Souvenez-vous, comme indiqué au début de ce tuto, nous n’utiliserons pas l’image à la Une proposé par WordPress. C’est donc cette miniature qui s’affichera dans la page qui listera la totalité de vos projets. Nous avons créé toutes les caractéristiques de notre metaBoxe : url de l’image, insertion d’une balise alt, l’insertion d’un bouton permettant d’ajouter/modifier une miniature et enfin un pense-bête nous rappelant les dimensions de notre miniature. Libre à vous, bien sûr, d’utiliser l’image à la Une de WordPress. Dans ce cas, il est inutile d’insérer le code de la metaBoxe Thumbnail.

Enfin, nous retrouvons la metaBoxe Slider Single-Portfolio. Celle-ci a plus ou moins les mêmes caractéristiques que la metaBoxe Thumbnail. Seule grosse différence, le code de celle-ci permet d’utiliser les champs répétés. Comme vous le savez maintenant, le nombre de slides doit pouvoir effectivement évoluer selon le nombre d’images que vous souhaitez présenter.

Pour bien comprendre comment fonctionne ce code, je vous (ré)invite à consulter ce tutoriel video. Il est indispensable à la bonne compréhension de ce tutoriel.

Nous allons maintenant créer une page single-portfolio.php dans notre thème afin d’afficher correctement nos projets.

Créer une page single-portfolio.php

Dans WordPress, par défaut, une article s’affiche grace au fichier single.php de votre thème. Nous allons donc créer un autre fichier afin de correctement afficher nos projets et notre slideshow.
Je vous propose donc d’ouvrir votre éditeur de texte et de créer un nouveau fichier que vous nommerez single-portfolio.php. Il est ‘crucial’ de bien respecter cette nomenclature : single-{post-type}.php.
Pour plus d’information à ce sujet, je vous recommande de consulter le codex de WordPress : Template Hierarchy.

Ouvrez le fichier single.php de votre thème et copiez/collez le code de celui-ci dans votre fichier single-portfolio.php. Juste après la balise <?php get_header(); ?>, collez le code suivant :

<div class="nivoslider">
<?php
global $custom_portfolio_metabox;
$meta = $custom_portfolio_metabox->the_meta();
foreach ($meta['spdocs'] as $spimage)
{?>
<img src="<?php echo $spimage['_sp_imgurl']; ?>" alt="<?php echo $spimage['_sp_alt']; ?>" />
<?php } ?>
</div>

Nous venons simplement de rajouter les lignes de codes nécessaires pour afficher notre slideShow dans notre fichier single-portfolio.php.

Retournons maintenant sur le tableau de bord de WordPress. Cliquez sur l’onglet Portfolio, puis sur ajouter un projet. Vous devriez voir apparaître vos metaBoxes, prêtes à l’emploi.

tuto06_WPA_03

Sur la gauche vous devriez également voir apparaître une rubrique Domaines, vous permettant de trier vos projets.

tuto06_WPA_04

Insérer une miniature et autant d’images que vous le souhaitez, et choisissez un ‘domaine’ pour votre projet.

Afficher les miniatures dans votre portfolio

Il ne vous reste plus qu’à afficher les miniatures de vos différents projets dans votre page dédiée à cela. Je ne rentrerai pas dans le détail de la boucle permettant d’afficher toutes vos miniatures. À ce stade, vous devriez en avoir une petite idée. Sachez toutefois que pour récupérer une miniature, votre code devrait ressembler à celui-ci :

<ul id="preview">

<?php query_posts('post_type=portfolio&showposts= -1'); ?>
<?php while (have_posts() ) : the_post(); ?>

<li class="work">
<?php
$meta = $custom_portfolio_metabox->the_meta();
?>
<a class="thumb" href="<?php the_permalink(); ?>">
<img src="<?php echo $meta['_thumb_img']; ?>" alt="<?php echo $meta['_thumb_alt']; ?>"/>
</a>
</li>

<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>

Nous sommes arrivés à la fin de ce tutoriel. J’espère avoir été clair dans mes explications. Si toutefois vous avez des questions à l’issu de ce tutoriel, que vous avez détecté des erreurs ou que vous souhaitez tout simplement me faire part de vos remarques, n’hésitez pas à laisser des commentaires, j’y répondrai avec grand plaisir ! Merci à vous d’avoir suivi ce tutoriel. À bientôt sur la Marée, les biscuits !

Recommandez ce contenu sur Google

Adresse de trackback pour cet article

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

À 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+

Commentez cet article !

Les champs munis d'une * sont obligatoires.