Ajouter un slider jQuery sensible à votre thème WordPress

Aujourd'hui, je vais vous expliquer comment intégrer un curseur jQuery réactif dans votre thème ou votre site WordPress. Ce n'est pas un tutoriel révolutionnaire, mais c'est un tutoriel qui est rarement bien fait. J'aimerais donc essayer de résoudre ce problème. Dans ce didacticiel, nous allons couvrir chaque étape, depuis la création d’un type de publication personnalisé pour conserver nos diapositives jusqu’à l’utilisation effective du curseur sur notre site..

Nous allons utiliser l'adorable FlexSlider 2 de WooThemes car il s'agit d'un curseur réactif très bien codé, sous licence GPLv2. Si cela vous intéresse, vous pouvez consulter le code de FlexSlider dans son référentiel GitHub..

Avant de faire quoi que ce soit, nous allons prendre du recul et réfléchir aux points suivants:

Quels fichiers le curseur a besoin
Quels fichiers nous exiger

La première chose à faire est de télécharger FlexSlider.

Une fois que vous avez fait cela, allez-y décompressez-le.

Il y a quelques fichiers qui nous intéressent, principalement:

flexslider.css
images / bg_direction_nav.png
jquery.flexslider-min.js

C’est tout ce dont nous avons besoin du téléchargement de FlexSlider.

Étape 1 Configuration des fichiers

Déplaçons ces 3 fichiers ci-dessus dans le répertoire de notre thème maintenant. En fonction de votre thème ou de votre configuration, vous pouvez placer les fichiers où vous le souhaitez, il vous suffit de noter l'emplacement de la source / référence de ces fichiers et d'adapter le code à leur nouvel emplacement..

Pour les besoins de ce didacticiel, nous utiliserons le thème par défaut Twenty Eleven. dans le inc / répertoire, créez un nouveau dossier appelé curseur. Dans cela, créons quelques dossiers:

css
images
js

Mettons flexslider.css dans le css dossier, bg_direction_nav.png dans le images dossier et jquery.flexslider-min.js dans le, vous l'avez deviné, js dossier.

Remarque: Normalement, je les placerais dans css/images/js des dossiers dans le répertoire du thème avec d’autres fichiers, mais afin de rendre ce tutoriel «universel», nous organisons nos fichiers de cette façon. Si vous êtes expérimenté dans le développement de thèmes WordPress, vous pouvez organiser manuellement vos fichiers..

Maintenant, nous allons créer 2 fichiers supplémentaires dans le dossier du curseur:

slider.php - crée le modèle du curseur et charge les fichiers du curseur
slider_post_type.php - crée le type de poste de curseur

Vous devriez maintenant avoir un curseur dossier qui ressemble à ceci:

Avant de continuer, ouvrez votre functions.php fichier et ajoutez les deux lignes suivantes, qui chargeront les deux fichiers .php que nous venons de créer:

// Créer un type de message de curseur require (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Créer un curseur require (get_template_directory (). '/Inc/slider/slider.php');

Maintenant… commençons à coder!

Étape 2 Type de glissière

La première chose que nous allons faire est de créer un type de message personnalisé qui contiendra toutes nos diapositives. Les types de messages personnalisés ont été introduits dans WordPress 3.0 et sont probablement la chose la plus cool qui soit jamais arrivée au monde (trop loin? Je les adore).

S'ouvrir slider_post_type.php et ajoutez le code suivant pour créer le type de publication personnalisée de la diapositive:

 _x ('Diapositives', 'Nom général de type de publication'), 'Singular_name' => _x ('Diapositive', 'Nom unique de type de publication'), 'add_new' => __ ('Ajouter une nouvelle diapositive'), 'Add_new_item' => __ ('Ajouter une nouvelle diapositive'), 'edit_item' => __ ('Editer la diapositive'), 'new_item' => __ ('Nouvelle diapositive'), 'view_item' => __ ('Afficher la diapositive'), 'search_items' => __ ('Recherche de diapositives'), 'not_found' => __ ('Diapositive'), 'not_found_in_trash' => __ ('Diapositive'), 'parent_item_colon' => __ ('Diapositive'), ' menu_name '=> __ (' Slides ')); $ taxonomies = array (); $ supports = array ('title', 'thumbnail'); $ post_type_args = array ('labels' => $ labels, 'singular_label' => __ ('Slide'), 'public' => true, 'show_ui' => true, 'public_queryable' => true, 'query_var' = > true,'bility_type '=>' post ',' has_archive '=> false,' hierarchical '=> false,' rewrite '=> array (' slug '=>' slides ',' with_front '=> false), 'supports' => $ supports, 'menu_position' => 27, // où il se trouve dans le menu. Changez en 6 et placez-le en dessous de messages. 11 et tournez sous le support, etc. 'menu_icon' => get_template_directory_uri (). ' /inc/slider/images/icon.png ',' taxonomies '=> $ taxonomies); register_post_type ('slides', $ post_type_args);  add_action ('init', 'register_slides_posttype');

Type de message personnalisé ajouté! En-dessous, nous ajouterons la metabox où se trouve un champ pour l'URL vers laquelle la diapositive devrait être liée. Nous allons maintenant copier le grand mur de code suivant:

// Meta Box pour l'URL du curseur $ slidelink_2_metabox = array ('id' => 'slidelink', 'title' => 'Slide Link', 'page' => array ('slides'), 'context' => 'normal ',' priority '=>' default ',' fields '=> array (array (' name '=>' URL de la diapositive ',' desc '=> ",' id '=>' wptuts_slideurl ',' class '= > 'wptuts_slideurl', 'type' => 'text', 'rich_editor' => 0, 'max' => 0),)); add_action ('admin_menu', 'wptuts_add_slidelink_2_meta_box'); fonction wptuts_add_slidelink__slidel_s_de_salide_) slidelink_2_metabox; foreach ($ slidelink_2_metabox ['page'] en tant que $ page) add_meta_box ($ slidelink_2_metabox ['id'], $ slidelink_2_metabox ['title'], 'wptuts_show__slidelink__slidelink__slidelink_2 slidelink_2_metabox); // fonction pour afficher les boîtes de méta fonction wptuts_show_slidelink_2_box () global $ post; global $ slidelink_2_metabox; global $ wptuts_prefix; global $ wp_version; // utilisation nonce pour la vérification echo ''; écho ''; foreach ($ slidelink_2_metabox ['fields'] en tant que $ field) // récupère les métadonnées de la publication courante $ meta = get_post_meta ($ post-> ID, $ field ['id'], true); écho '','',''; switch ($ field ['type']) case 'text': echo '
', ", stripslashes ($ field [' desc ']); break; echo'';  écho '', stripslashes ($ field [' name ']),' ','
';  // Sauvegarder les données de la méta-boîte add_action ('save_post', 'wptuts_slidelink_2_save'); fonction wptuts_slidelink_2_save ($ post_id) global $ post; global $ slidelink_2_metabox; // vérifier nonce si (! wp_verify_nonce ($ _ POST ['wptuts_slidelink_2_meta_box_nonce'], nom de base (__ FILE__))) return $ post_id;  // cocher la sauvegarde automatique si (défini ('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $ post_id;  // vérifie les autorisations si ('page' == $ _POST ['post_type']) if (! current_user_can ('edit_page', $ post_id)) return $ post_id;  elseif (! current_user_can ('edit_post', $ post_id)) return $ post_id;  foreach ($ slidelink_2_metabox ['fields'] en tant que $ field) $ old = get_post_meta ($ post_id, $ field ['id'], true); $ new = $ _POST [$ field ['id']]; if ($ new && $ new! = $ old) if ($ field ['type'] == 'date') $ new = wptuts_format_date ($ new); update_post_meta ($ post_id, $ field ['id'], $ new);  else if (is_string ($ new)) $ new = $ new;  update_post_meta ($ post_id, $ field ['id'], $ new);  elseif ("== $ new && $ old) delete_post_meta ($ post_id, $ field ['id'], $ old);

', stripslashes ($ field [' name ']),'	','

Phew. C'est terminé. Accédez à votre tableau de bord et vous verrez un nouveau type de message personnalisé 'Diapositives' brillant.

Étape 3 Charger les fichiers du curseur

S'ouvrir slider.php. Nous allons maintenant mettre en file d'attente jQuery, le script FlexSlider jQuery et la feuille de style FlexSlider. Sinon, vous pouvez copier le code de flexslider.css à ton style.css déposer si désiré.

Pendant que nous faisons cela, il y a quelque chose que vous devez faire. En raison de notre structure de fichier, le flexslider.css a besoin d’être modifié pour qu’il sache où trouver l’image de flèche. Ouvrez-le et faites une recherche et remplacez pour:

images avec … /images

Étape 4 Initialiser le curseur

Maintenant, nous devons ajouter un peu de jQuery à notre afin d'initialiser le curseur. Ajoutons dans les lignes suivantes à slider.php en dessous du code que nous venons d'ajouter!

// Initialise la fonction slider wptuts_slider_initialize () ?>

Une des raisons pour lesquelles j'ai choisi d'utiliser FlexSlider est sa flexibilité. Vous pouvez modifier un certain nombre de paramètres, mais je viens d’en inclure quatre importants ci-dessus. Essayez de changer faire glisser à se faner, ou horizontal à verticale. Vous pouvez jeter un oeil à tous les paramètres ici.

Remarque: N'oubliez pas qu'une autre façon de faire ce qui précède consiste à utiliser le wp_localize_script fonction (voir dans Codex) mais c’est un peu avancé pour ce tutoriel. Cependant, Pippin Williamson (un autre auteur de Wptuts +) vient d'écrire un excellent tutoriel sur le sujet si cela vous intéresse..

Étape 5 Créer un curseur

Nous allons maintenant créer le modèle pour le curseur. D'abord, nous ferons un WP_Query pour extraire les «publications» du type de publication personnalisée des diapositives. Ensuite, nous allons vérifier les diapositives et, le cas échéant, démarrer le curseur. Nous allons ensuite commencer la boucle. Chaque "diapositive" vérifiera ensuite si une URL de diapositive a été définie et, le cas échéant, crée un lien pour celle-ci. L'image de la diapositive sera alors affichée et la boucle sera refermée.

// Créer une fonction de curseur wptuts_slider_template () // Arguments de requête $ args = array ('post_type' => 'slides', 'posts_per_page' => 5); // La requête $ the_query = new WP_Query ($ args); // Vérifie si la requête renvoie des publications if ($ the_query-> have_posts ()) // Démarrer le curseur?>

Étape 6 Utiliser le curseur

Eh bien, nous avons enfin créé le curseur! Il est maintenant temps de l'utiliser. Vous pouvez ouvrir n’importe quel fichier de modèle, tel que index.php, et faire écho à la wptuts_slider_template fonction pour afficher le curseur.

Donc, si nous voulions afficher le curseur dans Twenty Eleven juste après l'en-tête de la page d'accueil, nous l'ouvririons. index.php et juste en dessous get_header (); ?>, ajoutez ce qui suit:

Mais que faire si vous faites cela pour un client ou pour quelqu'un qui ne veut tout simplement pas toucher aux fichiers de modèle et à PHP? Nous devrions probablement créer un petit code pour eux, afin qu'ils puissent simplement utiliser le curseur avec un [curseur] petit code.

Ajoutez ceci au bas de slider.php:

// Fonction Shortcode du curseur wptuts_slider_shortcode () ob_start (); wptuts_slider_template (); $ slider = ob_get_clean (); return $ slider;  add_shortcode ('slider', 'wptuts_slider_shortcode');

Le curseur peut maintenant être utilisé dans des publications, des pages ou n'importe quel autre endroit acceptant un shortcode!

Télécharger

Si vous le souhaitez, vous pouvez télécharger le curseur dossier, qui contient tout ce que nous avons traversé dans ce tutoriel. Il vous suffit de le déposer dans votre thème inc dossier (ou ailleurs, cela va, mais veillez à ajuster le code ci-dessous) et ajoutez ce qui suit à votre functions.php:

// Créer un type de message de curseur require (get_template_directory (). '/Inc/slider/slider_post_type.php'); // Créer un curseur require (get_template_directory (). '/Inc/slider/slider.php');

Remarque: Par souci de ce tutoriel, l’espace de nom / domaine de texte Wptuts a été utilisé. Vous devriez faire une recherche et remplacer sur tout le code si vous ne faites que copier / coller et remplacer:

wptuts_ avec votre nom_
'wptuts' avec 'votre nom'

Si vous avez aimé ce tutoriel, faites le moi savoir et je continuerai avec un tutoriel sur la personnalisation de notre curseur! Nous verrons ensuite comment utiliser les vignettes pour la navigation, pour intégrer des diapositives vidéo et pour ajouter des légendes..

Code