Share
Avoir un carrousel de publications récentes sur votre blog est un excellent moyen de le rendre plus interactif pour vos visiteurs..
Récemment, un client m'a demandé de créer un carrousel de publications récentes pour son site Web. J'ai dit oui bien sûr, pensant qu'il doit y avoir une sorte de plugin que je peux trouver pour faire cela très rapidement. Le garçon était je me suis trompé. J'ai passé beaucoup de temps à en trouver un et ceux que j'ai trouvés ne faisaient pas du tout ce que je voulais. Je pensais qu'avec tout ce temps perdu, je n'en ferais qu'un moi-même. Je dois juste trouver un bon code de base. C'est alors que je suis tombé sur carouFredSel. Voici le lien: http://caroufredsel.frebsite.nl/. J'ai adoré leurs exemples et même s'il ne faisait toujours pas tout ce que je voulais, comme afficher une légende sous l'image, les fonctionnalités étaient exactement ce dont j'avais besoin. Si longue histoire courte, voici les détails.
Très bien, commençons par aller sur http://caroufredsel.frebsite.nl/, télécharger le code du carrousel et copier le jquery.carouFredSel-5.5.0 -itted.js déposer dans votre dossier de thème WordPress.
Ensuite, ouvrez votre functions.php déposer et ajouter ce petit bout de code:
Accentsconagua
if (function_exists ('add_image_size')) add_image_size ('sliderimg', 200, 150, true); Assurez-vous de remplacer le 200 et 150 avec vos propres dimensions. Enregistrez-le et téléchargez le fichier. Après l'avoir téléchargée, vous verrez une nouvelle option intitulée "L'image sélectionnée". Vous pouvez télécharger n’importe quelle image que vous voulez utiliser ici et celle-ci sera affichée dans le carrousel. Notez également que nous l’appelons"sliderimg". Je vais vous dire pourquoi bientôt.
Créer un nouveau fichier JavaScript appelé wptuts-caroufredsel.js et mettez le code suivant à l'intérieur, puis copiez-le dans votre dossier de thèmes WordPress:
jQuery (function ($) $ ('# foo2'). carouFredSel (prev: '# prev2', next: '# next2', auto: false, items: 3,); Voici quelque chose d'autre à prendre en compte pour plus tard. # foo2 - ce sera l'identifiant du carrousel que nous utiliserons. Nous en aurons besoin pour pouvoir les nommer en CSS. Notez également le # prev2 et # next2 L'identifiant pour le style des boutons précédent et suivant et enfin, le nombre 3 est le nombre d'éléments que vous souhaitez afficher à la fois. Dans ce cas c'est 3.
Maintenant, ouvrez votre functions.php Fichier à nouveau et ajoutez le code suivant pour charger les fichiers JavaScript:
function wptuts_load_caroufredsel () // Enqueue carouFredSel, notez que nous spécifions 'jquery' comme dépendance et définissons le paramètre 'true' pour le chargement dans le pied de page: wp_register_script ('caroufredsel', get_template_directory_uri (). '/js/js -5.5.0 -itted.js ', array (' jquery '),' 5.5.0 ', true); // Pour un plugin ou un thème, vous pouvez alors mettre en file d'attente le script: wp_enqueue_script ('wptuts-caroufredsel', get_template_directory_uri (). '/Js/wptuts-caroufredsel.js', array ('caroufredsel'), ", true ); add_action ('wp_enqueue_scripts', 'wptuts_load_caroufredsel'); Assurez-vous de changer les chemins d'accès où que soient vos fichiers JavaScript.
Maintenant ouvrons le modèle de page dans lequel vous souhaitez afficher le carrousel. Une fois que vous l'ouvrez, où que vous souhaitiez afficher le carrousel, collez le code ci-dessous:
query ('showposts = 12'); ?> have_posts ()): $ carouselPosts-> the_post (); ?>
prev suivant- "title ="">
"rel =" bookmark "title =" Lien permanent vers ">
Maintenant, laissez-moi vous expliquer avant de devenir fou. La première partie du bloc de code est le nom de la classe (pour le style bien sûr) je l’appelle liste_carousel. Ensuite, vous verrez que # foo2 id je vous ai dit plus tôt. Suivant est la requête pour les messages:
Je lui dis de tirer les 12 derniers messages. De cette façon, puisque je lui ai dit plus tôt d’en afficher 3 à la fois, il peut afficher 4 ensembles de 3 posts. Mais disons que vous voulez être un peu plus précis et ne montrer que les messages d'une certaine catégorie. Ensuite, vous utiliseriez ce code au lieu du expositions code ci-dessus:
Qu'en est-il des tags que vous dites? Eh bien voilà:
Changement "En vedette"quelle que soit la balise que vous souhaitez utiliser. J'appelle également 12 publications et les répertorie par ordre croissant.
Encore confus? J'espère que non. Ok, ensuite sur le bloc de code principal ci-dessus, je tire "sliderimg"L'image sélectionnée de la publication et le lien avec la publication réelle. Bien sûr, lorsque les utilisateurs cliquent sur l'image, ils sont dirigés vers la publication elle-même..
"title ="">
Dans le cas de mon client, ils voulaient non seulement afficher une image dans le carrousel, mais également afficher le titre du message. Donc, en dessous de l'image, nous affichons le titre de l'article, en le liant également à l'article et en lui affectant une classe appelée "slidertitle"afin que nous puissions coiffer cela aussi.
"rel =" bookmark "title =" Lien permanent vers ">
*phew* Très bien, tout en bas se trouvent les boutons précédent et suivant avec l'identifiant prev2 et next2 que nous avons déclaré plus tôt dans le code JavaScript.
prev suivant
Maintenant que tout est expliqué, passons à autre chose!
Eh bien, cela fonctionne maintenant, mais cela ne ressemble en rien à ce que nous voulons… alors ouvrez votre style.css Fichier et coller ce code et je vais expliquer les choses ci-dessous:
.list_carousel height: 175px; marge: 0 auto; débordement caché; largeur: 660px; .list_carousel ul margin: 0; rembourrage: 0; style de liste: aucun; bloc de visualisation; .list_carousel li taille de la police: 14px; couleur: # 333; largeur: 200px; rembourrage: 0; marge: 2px; bloc de visualisation; float: gauche; .list_carousel.responsive width: auto; marge gauche: 0; .list_carousel .clearfix float: none; clarifier les deux; .list_carousel a.prev background: url ("next-arrow-left.png") défilement non répété 0 0 transparent; bloc de visualisation; hauteur: 150px; position: relative; en haut: -174px; largeur: 50px; .list_carousel a.next background: url ("next-arrow-right.png") pas de répétition de défilement 0 0 transparent; bloc de visualisation; hauteur: 150px; position: relative; gauche: 635px! important; en haut: -324px; largeur: 50px; .list_carousel a.prev .list_carousel a.next right: -29px; .list_carousel a.prev.disabled, a.next.disabled cursor: default; .list_carousel a.prev span, a.next span display: none; # foo2 left: 20px; marge: 0 2px; position: relative; Oui, c'est un gros bloc de code. Haha! Désolé, j'ai eu beaucoup de choses à faire, comme vous pouvez le constater. Laissez-moi essayer de rendre cela aussi indolore que possible. Si vous voulez modifier la largeur, changez le 660px et 175px à la largeur et à la hauteur souhaitées pour le carrousel. Aussi avec .list_carousel li vous pouvez modifier les couleurs du titre du message et la largeur de chaque élément. le .liste_carousel a.prev et .list_carousel a.next Les classes correspondent aux images de la flèche précédente et suivante. C'était juste comme ça que je devais avoir l'air bien sûr. Le style est à vous.
Ainsi qu'un lien vers une version en direct: http://www.kstudiofx.com/carousel-tutorial
[Mettre à jour:] Ce tutoriel utilisé à l'origine query_posts (), ce qui est une mauvaise pratique dans ce contexte (comme noté par Chip Bennett dans les commentaires). Nous avons mis à jour le code pour une utilisation plus appropriée WP_Query ().
