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)

1-Telecharger nivo slider

On va y aller par étape.Déjà, avant toute chose, téléchargez les fichiers nivo-slider .Dans la page GitHub de téléchargement, prenez juste les fichiers  jquery.nivo.slider.pack.js et nivo-slider.css .

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.

arbo

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

	   add_action('init', 'create_slider');
	     function create_slider() {
	       $slider_args = array(
	          'labels' => array(
	           'name' => __( 'Slider' ),
	           'singular_name' => __( 'Slider' ),
	           'add_new' => __( 'Add New Slider' ),
	           'add_new_item' => __( 'Add New Slider' ),
	           'edit_item' => __( 'Edit Slider' ),
	           'new_item' => __( 'Add New Slider' ),
	           'view_item' => __( 'View Slider' ),
	           'search_items' => __( 'Search Slider' ),
	           'not_found' => __( 'No slider project found' ),
	           'not_found_in_trash' => __( 'No slider project found in trash' )
                        ),
                      'public' => true,
                      'show_ui' => true,
                      'capability_type' => 'post',
                      'hierarchical' => false,
                      'rewrite' => true,
                      'menu_position' => 20,
                      'supports' => array('title', 'thumbnail')
                    );
                 register_post_type('slider',$slider_args);
               }

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:

	load_theme_textdomain( 'cuisine', get_template_directory() . '/languages' );

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é.

// Custom Post types pour le slider
	   add_action('init', 'create_slider');
	     function create_slider() {
	       $slider_args = array(
	          'labels' => array(
	           'name' => __( 'Slider','cuisine'  ),
	           'singular_name' => __( 'Slider','cuisine' ),
	           'add_new' => __( 'Add New Slider' ,'cuisine' ),
	           'add_new_item' => __( 'Add New Slider','cuisine'  ),
	           'edit_item' => __( 'Edit Slider','cuisine'  ),
	           'new_item' => __( 'Add New Slider','cuisine'  ),
	           'view_item' => __( 'View Slider','cuisine'  ),
	           'search_items' => __( 'Search Slider','cuisine'  ),
	           'not_found' => __( 'No slider project found','cuisine'  ),
	           'not_found_in_trash' => __( 'No slider project found in trash','cuisine'  )
                        ),
                      'public' => true,
                      'show_ui' => true,
                      'capability_type' => 'post',
                      'hierarchical' => false,
                      'rewrite' => true,
                      'menu_position' => 20,
                      'supports' => array('title', 'thumbnail')
                    );
                 register_post_type('slider',$slider_args);
               }

  

Voila pour l’info.Ensuite, dans notre backoffice on a bien un nouvel onglet ‘slider’ qui apparait:

boslider

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.

boslides

Si par exemple je rajoute dans custom post le support pour l’éditeur, comme ceci :

 'supports' => array('title','editor', 'thumbnail')

dans ce cas, dans l’édition du slider, vous aurez l’editeur de texte, comme pour les articles.

boslidee

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 »:

    <?php  global $post; 
                           
                           $args = array( 'post_type' =>'slider', 'numberposts' => -1, 'orderby' => 'ASC' ); 
                           $slider = get_posts($args); ?> 
                               <?php  
                           if($slider) { ?> 
                           
                               <div id="slider"> 
                                   <?php 
                           foreach($slider as $post) :   
                               the_post_thumbnail();
                               endforeach; ?> 
                               <?php wp_reset_postdata(); ?> 
                               </div><!--/slider nivoSlider--> 
                         
                               <?php } ?>	

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)

/*slider*/

#slider {
    position:relative;
       max-width:1140px;
    max-height:350px;
    background:url(images/loading.gif) no-repeat 50% 50%;
    margin:0;
    padding:0;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
   max-width: 100%;
}
.nivo-directionNav .nivo-prevNav {
  background:transparent url(images/larr.gif) 0 0 no-repeat;
  height: 40px;
  width: 32px;
  text-indent: -10000px;
  overflow: hidden;
}

.nivo-nextNav {
    position:absolute;
	top:112px;
	
	width:30px;
	height:37px;
	display:block;
	z-index:101;
	text-indent:-99999em;
	right:0;
	background: url(images/rarr.gif);
}

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 :

slider

 

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):

<?php 
global $post; 
$args = array( 'post_type' =>'slider', 'numberposts' => -1, 'orderby' => 'ASC' ); 
$slider_posts = get_posts($args); ?> 
    <?php if($slider_posts) { ?> 
                               <div id="slider-wrap"> 
                                   <div id="slider"> 
    <?php foreach($slider_posts as $post) : setup_postdata($post);  
 $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'sliderimg'); ?> 
       
            <img src="<?php echo $thumbnail[0]; ?>" width="" height="" title="<?php the_title(); ?>" />
       
    <?php endforeach; ?> 
    <?php wp_reset_postdata(); ?> 
    </div><!--/slider nivoSlider--> 
</div><!--/slider-wrap --><?php } ?>

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.

slider title

Encore plus loin

Après, on peut vouloir placer le titre ou un texte descriptif dans l’image, à la manière des slider premium.

titreslider

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

metaboxslider

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 display_slider_box($post) {
    ?>
    <table>
        <tr>
            <th align=left><h2><?php _e('Vore texte'); ?></h2></th>
       </tr>
    <tr>
        <td>
            <?php $text = get_post_meta($post->ID, 'text',true); ?>
            <input type="text" name="text" id="text" value="<?php echo $text ?>" class="requiredField" />
        </td> 
    </tr>
    </table>
    <?php
}

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

 
global $post; 
$args = array( 'post_type' =>'slider', 'numberposts' => -1, 'orderby' => 'ASC' ); 
$slider = get_posts($args); ?> 
    <?php if($slider) { ?> 
    <div id="slider-wrap"> 
        <div id="slider"> 
            <?php foreach($slider as $post) : setup_postdata($post);  
                $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'sliderimg'); ?> 
                <img src="<?php echo $thumbnail[0]; ?>" width="" height="" alt="" title="<?php the_title();?><br/><?php echo get_post_meta($post->ID, 'text',true) ?>"/>
          <?php ?>
    <?php endforeach; ?> 
    <?php wp_reset_postdata(); ?> 
    </div><!--/slider nivoSlider--> 
 </div> <!--/slider-wrap --><?php } ?>
 

Très simplement, je place dans le titre <?php the_title?> suivi immédiatement de la valeur de ma metabox :

<?php echo get_post_meta($post->ID, 'text',true) ?>

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 :

.nivo-caption {
    position:absolute;
    left:0px;   
    top:0px;  
    overflow:hidden;
    background:none !important;
    font-family:Helvetica, Arial, Sans-Serif;
    color:#FFF;
    font-weight:bold;
    font-size:40px;
    line-height:44px;
    text-align:left;
    text-transform:uppercase;  
}

Ca n’est surement pas la meilleure manière de faire, mais au moins on obtient un résultat rapidement.

N’hésitez pas à partager vos astuces pour créer un slider, ou afficher vos titres et description d’une autre manière!!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.