Home » wordpress » Un custom post type pour créer un slider
Un custom post type pour créer un slider
Un custom post type pour créer un slider
Aujourd’hui on va voir comment ajouter un slider sur son site wordpress, sans plugin.J’utilise ici le plugin js nivo-slider, mais cela fonctionnera avec n’importe quel type de slider(flexslider.js, slides.js etc)
Le fichier js est à mettre dans un dossier js de votre theme, et le fichier css dans le dossier css.Si vous n’avez pas ces dossiers, créez les maintenant.
2-Intégrer Nivo slider à son thème
Pour rendre effectif ces deux fichiers, il va falloirs les appeler, via notre fichier functions.php
function nivo_slider() {
if (is_front_page()) {
// register your script location, dependencies and version
wp_register_script('nivo-slider',
get_template_directory_uri() . '/js/jquery.nivo.slider.pack.js',
array('jquery'),
'3.2' ); wp_enqueue_script('slider',get_template_directory_uri().'/js/script.js',array('jquery'));
// enqueue the script
wp_enqueue_script('nivo-slider'); wp_enqueue_style('slider',get_template_directory_uri().'/css/nivo-slider.css');
}
}
add_action('wp_enqueue_scripts', 'nivo_slider');
Ici je fais appel dans la même fonction au fichier js et au fichier css. Il y a également un fichier script, dans lequel je vais placer la function jquery pour notre slider.(voir plus bas)
Le plugin js est donc maintenant prêt à agir.Il va donc falloir maintenant créer le contenu et le code nécessaire.
3-Un custom post type « slider »
Nous allons maintenant créer un custom post type nommé ‘slider’.Voici le code
Comme on peut le voir, c’est un custom post, tout ce qu’il y a de plus classique; Ici, chaque libéllé du custom post est pret à etre traduit, à chacun de placer son text_domain
En début de fichier (functions.php) on a généralement la déclaration du text-domain, pour la traduction : dans le thème par défaut twenty twelve, comme pour les autres d’ailleurs on trouve cette ligne:
Je sui ici sur la création d’un thème : j’ai appelé mon thème « cuisine », et généralement on utilise le meme mot pour déclarer son text domain.Mon text_domain est donc ici « cuisine ».
Du coup, si je veux pouvoir traduire mon custom post type( le titre et tous les libéllés) grace à un outil comme codestyling localization, il faut que je déclare mon text_domain pour chaque libéllé.
Voila pour l’info.Ensuite, dans notre backoffice on a bien un nouvel onglet ‘slider’ qui apparait:
Petite astuce, lors de la création du custom post type, la ligne:
'supports' => array('title', 'thumbnail')
…nous permet de définir l’apparence de notre slider en backoffice: on déclare le titre, les thumbnails pour pouvoir donner un titre à chaque slider et insérer une image à la une.
Si par exemple je rajoute dans custom post le support pour l’éditeur, comme ceci :
dans ce cas, dans l’édition du slider, vous aurez l’editeur de texte, comme pour les articles.
Personnellement, et dans ce cas précis, je n’ai absolument pas besoin de l’éditeur, qui risque d’embrouiller l’utilisateur plus qu’autre chose.Je retire donc l’editeur, et ne garde que les thumbnail et le titre.
4- Afficher son slider en homepage
Pour ma part, je veux afficher ce slider en page d’accueil uniquement.Voici le code de ma boucle, simplifié au possible, et que je place dans mon template de page « home »:
Je boucle sur un type de contenu « slider », je vérifie qu’on a bien des post de ce type, puis avc un foreach je ramène pour chaque article ‘slider’ l’image à la une.
5- Activer le plugin
Il nous faut également, pour que cela fonctionne, définir les spécificités de notre slider dans une fonction jquery : Je place cette fonction dans un fichier script.js, que j’appelle depuis functions.php (voir le code plus haut)
jQuery(document).ready(function($) {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 250, // Slide transition speed
pauseTime: 4000, // How long each slide will show
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: true, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: true, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: true,
});
});
6- Styliser notre slider
Enfin, sans précisions sur le style, rien ne s’affichera;Il faut donc préciser des attributs et des valeurs pour chaque classe générées par notre plugin: (faites un control maj i sur le slider et vous verrez les classes générées, telle que « .slides » par exemple)
Le slider est positionné en relative, et les images en position absolute.On donne une width et une height maximum pour le coté responsive à la div slider et non pas aux images directement.
Ici, petite astuce pour les fleches précédent et suivants.En l’etat, le slider affichera « prev » et « next » sur chaque coté de notre slider.Pour remplacer ces deux termes par des images, on fait appel aux classes .nivo-nextNav et .nivo-prevNav, auxquelles on colle une image en background.
Au final, on obtient un beau slider comme sur l’image :
Améliorations:
Si jamais vous souhaitez afficher le titre pour chaque slide, on peut modifier notre code comme ceci (remplacer le code de l’etape 4 par celui ci):
Ici je précise un type de thumbnail ‘sliderimg’, que j’ai au préalable défini dans functions.php : en fait on déclare une nouvelle taille d’image pour notre slider
add_image_size( 'sliderimg', 960, 350, true );
Sous chaque slider, on aura le titre qui va s’afficher.
Encore plus loin
Après, on peut vouloir placer le titre ou un texte descriptif dans l’image, à la manière des slider premium.
L’apparence finale dependra de votre css
Après avoir consuté plusieurs tutos sur le sujet, beaucoup vont chercher des solutions complexes qu’on ne comprend pas forcément à la première lecture.
Finalement, il existe une solution simple et efficace.
Comme indiqué précédemment, dans mon custom post je n’utilise pas « the_content() »; autrement dit l’editeur de texte.Je me sers du titre, et pour le texte descriptif, je vais créer une metabox, comme sur l’image
Voici le code à insérer dans functions.php pour la metabox:
add_action('add_meta_boxes', 'add_slider_boxes');
function add_slider_boxes() {
$screens= array('slider');
foreach($screens as $screen){
add_meta_box('slider_box', 'Text', 'display_slider_box',$screen);
}
}
function save_slider_boxes($post_id) {
$text = $_POST['text'];
update_post_meta($post_id, 'text', $text);
}
add_action('save_post', 'save_slider_boxes');
Grace à la condition sur le type de post, on affiche la metabox que dans l’edition des sliders.
Pour afficher ce texte sous le titre voici comment j’ai modifié l’étape 4
Le plugin génère automatiquement certaines classes.Pour avoir un rendu comme sur l’image voici un exemple de css: on agit sur la classe par défaut nivo-caption :
