Remplacer l’image à la une par un diaporama en page d’accueil de Twenty Twelve

Voilà une petite astuce pour rajouter un petit diaporama en page d’accueil d’un site internet WordPress qui utilise l’excellent thème TwentyTwelve.

Les avantages d’un slider en page d’accueil sont nombreux, c’est vrai que c’est un peu une norme et que le dernier thème WordPress par défaut ne le propose pas, alors voyons comment y arriver facilement. Pour cela, nous allons utiliser une extension et modifier un fichier du thème. Il est donc préférable d’avoir au préalable installé un thème enfant.

1. Configurer le plugin Captain Slider

C’est un plugin gratuit accessible directement depuis son back office, on le trouve également à cette adresse :
http://wordpress.org/extend/plugins/captain-slider/

Page « settings » du plugin Captain Slider

 

Ce plugin rajoute un Custom Post Type, ce qui va faciliter la gestion des slides. Dans mon exemple, j’ai dimensionné les images à 535 x 300 px. Ce sont donc 2 données que je renseigne dans les réglages « settings » de Captain Slider.

On va d’abord créer un diaporama dans le slider Manager, qui va générer un « slug » et un numéro. Attention, il y a là une petite astuce pas nécessairement intuitive, le slug va devoir être recopier lors de la création des slides…

Notez le slug et le numéro

 

Ensuite, je crée 3 slides en écrivant le slug dans le champ « slider » …
A noter que l’on a la possibilité individuellement de gérer le lien depuis chaque image.

L’insertion de slide est aisée

2. Modifier la page d’accueil

Nous avons utilisé le template « frontpage » ou « modèle de page d’accueil » en page d’accueil.

page-accueil

Le modèle de page sélectionné

 

C’est donc ce fichier qu’il va falloir modifier en remplaçant l’image à la une par le code d’insertion du slider, fourni dans la page de description de l’extension :

<?php echo ctslider_slider_template(id); ?>

Remplacez id par votre numéro (dans mon exemple, c’est 109) !

La modification dans le fichier « front-page.php »

 

Voilà, on a maintenant un diaporama complet, facile à gérer, qui permet également l’insertion de vidéo et avec des options pour afficher ou non les flèches et ronds témoins en dessous. A noter que l’on peut ainsi gérer plusieurs diaporamas dans son site, mais tous de la même dimension.

Voir l’exemple en ligne

[ Ajout du 21 avril ] : Merci à Christophe pour sa précision : dans mon exemple, il faut IMPERATIVEMENT une image à la une pour que cela fonctionne. Il y a dans le code une instruction conditionnelle « if has_post_thumbnail »… (ou alors il faut supprimer cette ligne et la ligne « endif »)

10 Responses to “Remplacer l’image à la une par un diaporama en page d’accueil de Twenty Twelve”