TUTORIEL

Comment créer un slider avec un type de message personnalisé dans WordPress

Lors de la création de sites web, nous avons souvent besoin de solutions qui vont au-delà des fonctions de base de WordPress. Une telle solution est un curseur, qui doit souvent prendre certaines propriétés ou styles. Dans ce tutoriel, je vais vous montrer comment créer votre propre curseur, qui affichera Custom Post.

Le curseur sera créé de deux façons :

  1. La première façon est de créer un curseur qui affichera votre propre type de messages en utilisant le plugin owlCarousel. La tâche du curseur sera d’afficher les messages dans un curseur réactif supportant le système drag&drop
  2. Le deuxième curseur sera un curseur pleine largeur, qui disposera d’un simple script JS avec sa propre navigation. Le curseur stockera ses diapositives dans un type de message personnalisé et contiendra l’image et le titre de l’image.

De plus, pour chaque type de curseur, nous montrerons l’implémentation pour deux constructeurs de pages – WPBakery et Elementor. Les curseurs seront mis en œuvre sur la base de l’ajout de nouveaux widgets aux plugins précédemment créés : REDO JSComposer Additional et REDO Elementor Additional.

Notre propre curseur WordPress – comment créer ?

Qu’est-ce que vous devez savoir

  1. Tout d’abord, vous devez connaître la page du constructeur WPBakery sur laquelle nous basons la construction de notre site web. Dans nos guides précédents, vous trouverez toutes les connaissances nécessaires pour comprendre le processus de création de widgets pour WPBakery.
    Lien vers l’article : REDO JSComposer Additional – plugin ajoutant un widget à WPBakery.
    Lien vers le plugin WPBakery : https://wpbakery.com/
  2. Si vous ne connaissez pas WPBaker, vous devez connaître la page d’un autre constructeur – Elementor. C’est l’un des plugins les plus connus pour la création de sites web dans le système WordPress. Pour comprendre comment fonctionne notre plugin pour la création de widgets pour Elementor – lire l’article : Elementor – comment créer votre propre plugin de courrier personnalisé
    Lien vers le plugin Elementor : https://elementor.com/
  3. Vous devrez lire la documentation de base du plugin OwlCarousel, qui permettra au curseur de fonctionner correctement.
    Lien vers le plugin : https://owlcarousel2.github.io/OwlCarousel2/
  4. Nous nous appuyons sur les compétences de base en programmation de PHP, et sur la capacité à créer du code HTML et CSS. Si vous avez lu nos guides précédents, la création d’un curseur ne devrait pas être difficile.
    Lien vers la liste des articles précédents : Articles.

Nous créons un curseur drag&drop réactif avec owlCarousel

La première façon est de créer un curseur qui vous permettra d’afficher nos messages personnalisés à l’aide du plugin owlCarousel. Nous allons mettre en place deux widgets – un pour le constructeur de pages de WPBaker, l’autre pour Elementor.

Nous allons commencer par créer notre propre type de poste.

Nous allons créer un poste personnalisé de type Opinion

Dans notre cas, il s’agira d’un courrier personnalisé de type “opinion”, qui contiendra :

  • Le titre – Le nom de l’orateur,
  • Image distinctive – Vignette de référence,
  • Excerpt – Titre dans la société de référence,
  • Contenu – Contenu de l’avis.

Si vous ne savez pas comment créer votre propre type de message personnalisé, veuillez vous référer à l’article :
Créer une vue (template) pour un article personnalisé dans WordPress

Créer un widget pour le plugin WPBaker

Une fois que nous avons créé le type de message personnalisé que nous voulons afficher, nous passons à la création d’un widget. Créez un fichier slider.php dans le dossier de rendu et attachez-le au fichier main.php. Dans le fichier slider.php, nous ajoutons la configuration de base du widget. Si vous ne savez pas comment le faire, lisez l’article : Propre plugin ajoutant un widget au plugin WPBakery plugin.

Nous obtenons ainsi un widget fonctionnel qui affiche tous les messages d’opinion. Nous avons ajouté deux avis de test et les avons affichés à l’aide de notre widget.

jak-stworzyc-slider-w-wordpress-1

jak-stworzyc-slider-w-wordpress-2

Les plug-ins REDO Additional pour WPBakery et Elementor peuvent être téléchargés ici – REDO Additional (6 téléchargements)

Créer un widget pour le plugin Elementor

Si nous utilisons Elementor, nous devons créer un widget en utilisant notre plugin REDO Elementor Additional – si vous ne savez pas comment fonctionne notre plugin, je vous renvoie à l’article : Elementor – comment créer votre propre plugin de courrier personnalisé.
Créez un fichier slider.php dans le dossier de rendu et attachez-le dans le fichier main.php. Dans le fichier slider.php, nous ajoutons la configuration de base du widget.

Nous obtenons un élément de widget – curseur qui fonctionne correctement.
elementor-slider-1

Les plug-ins REDO Additional pour WPBakery et Elementor peuvent être téléchargés ici – REDO Additional (6 téléchargements)

Nous faisons un curseur avec un owlCarousel

Nous attachons le plugin au projet

La partie concernant la création d’un widget nous est déjà bien connue grâce à des articles précédents et ne nous a pas posé de problème. Nous allons maintenant passer à l’application owlCarousel plugin. Il y a deux façons d’utiliser le plugin – vous pouvez le faire. La première façon est de joindre les fichiers du plugin à partir d’une source CDN externe ou de placer physiquement les fichiers sur le serveur. Dans ce cas, nous utiliserons la possibilité de joindre des fichiers via les liens CDN.

Les liens doivent être correctement attachés au fichier principal CSS et au fichier principal JS.

CSS :

  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css” rel=”stylesheet”>
  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css” rel=”stylesheet”>

JS :

  • <script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>

Configuration de base du curseur

Maintenant, nous devons retourner au code de notre widget slider.php et nous devons fermer nos opinions dans un conteneur qui fonctionnera comme owlCarousel. Pour ce faire, nous devons ajouter foreach pour ajouter div, que nous appellerons . owl-carousel et nous ajouterons .owl-theme pour utiliser les propriétés de base du plugin owlCarousel.

Notre code ressemblera à ceci :

Nous passons maintenant à l’initiation owlCarousel(). Dans le fichier js principal, nous ajoutons la configuration de base du plugin :

En plein dans le mille ! Nous avons créé un curseur avec owlCarousel.

Notre code javascript a correctement initialisé le owlCarousel() pour un div .owl-carousel. Il a des propriétés de base glissante. Si nous voulons régler notre curseur de manière plus détaillée, rien ne s’y oppose. Veuillez lire la documentation du plugin et régler les valeurs appropriées.

jak-stworzyc-slider-w-wordpress-3

Un simple curseur WordPress avec sa propre navigation

Nous passons à la création d’un curseur qui aura une animation de base lors du changement de diapositives et de la navigation. Ce type de curseur est généralement utilisé comme première section de la page d’accueil – nous pouvons trouver son utilisation dans notre projet Pierson-Export.

Nous créons un message personnalisé de type “slider”

.
Nous stockerons nos diapositives dans un post type personnalisé : “slider”. Nous voulons que la diapositive contienne l’image de l’écran et le titre de la diapositive. Nous aurons donc besoin de deux champs :

  • Featured image,
  • Title.

Si vous ne savez pas comment créer un type de message personnalisé, je vous renvoie à l’article : Créer une vue (template) pour un article personnalisé dans WordPress.

Widget contenant un curseur – WPBakery, Elementor

Si nous avons déjà créé un type de message personnalisé, vous devez créer, comme pour le premier type de curseur, des fichiers pour nos plugins – en fonction du créateur de page que vous utilisez, nous utilisons le plugin approprié :

  • WPBakery – REDO JSComposer Additional
  • Elementor – REDO Elementor Additional

Vous trouverez le processus de création du widget dans ces articles :

Nous passons à la création d’un widget. Dans ce cas, je vais le faire pour le constructeur de pages de WPBaker. La configuration du curseur pour Elementor sera très similaire à celle du curseur utilisant le owlCarousel, vous pouvez donc vérifier comment le faire en cliquant sur t ici.

Créez un fichier customslider.php dans le dossier render et assignez-le dans main.php. Puis ajoutez la configuration de base du widget dans le fichier customslider.php.

La structure de votre propre curseur WordPress

Nous pouvons maintenant passer à la création d’une structure de curseur. Dans la div’ie – .slider-container créée précédemment, nous créons une navigation de notre curseur, qui sera affichée dans la div’ie – .slider-change. Avant d’afficher la navigation, vérifiez si notre curseur contient suffisamment de curseurs pour créer une navigation. Le curseur doit avoir plus de diapositives que 1, nous ajoutons donc une condition :

Ensuite, dans la diva .slider-change – nous itérons en utilisant la foreach, en affichant une navigation qui contiendra des liens vers nos diapositives. Chaque lien doit contenir l’identifiant correspondant à la diapositive correspondante. Nous devons donc créer un $i=0 – ce sera chargé de donner l’identifiant de navigation correspondant. Nous l’agrandirons chaque fois que nous ajouterons un numéro d’article de navigation. En outre, l’ID sera affiché comme un élément de navigation – augmenté de 1. code de navigation :

Nous passons maintenant à l’affichage des diapositives. Créer un foreach, en affichant le $slider. Plus tôt, vous devriez créer un $x = 0, qui vérifiera que le premier élément du tableau obtient une classe slide-active – .slide-active. Cette classe rendra la diapositive visible, tandis que les diapositives sans cette classe ne seront pas visibles à l’écran. Les images seront affichées sous forme de diapositive de fond. Le titre de la diapositive sera inclus dans l’en-tête h2 avec .slider-header. Code de l’en-tête du curseur :

L’ensemble du code PHP, y compris les compteurs :

Javascript supportant la navigation par curseur

Nous sommes en train de créer un script de curseur qui gérera la navigation entre les diapositives. Au préalable, vous devez créer quelques exemples de diapositives avec des titres et des images – dans notre cas, il s’agira de trois diapositives.

Pour créer le script, nous utiliserons du javascript pur, car ce sont des instructions très simples qui ne nécessitent pas de jQuery.

Nous créons deux tableaux :

  • Slider’s Hygiene Links – myBtns[]
  • Tableau de diapositives – sliders[]

Avec querySelectorAll nous téléchargeons nos éléments :

Maintenant, dans une boucle pour chaque élément myBtns[] nous ajoutons EventListener “click”, en vérifiant si nous avons cliqué sur un lien vers une diapositive. Si vous avez cliqué, vérifiez avec getElementsByClassName le lien de navigation actif et la diapositive active.

Supprimez maintenant les classes actives et assignez-les au lien approprié dans la navigation et à la diapositive appropriée. De cette façon, on obtient le script complet de JS :

Code CSS de notre curseur

Tout est prêt. Notre curseur fonctionne avec l’aide à la navigation. Il faut maintenant passer à la mise en forme et à la valorisation de nos cours.

La première étape consiste à donner un style à notre conteneur – il doit avoir position : relative pour stocker correctement nos diapositives, qui auront position : absoltue et seront affichées en pleine largeur. Pour la diapositive, vous devez régler le paramètre background:cover de manière à couvrir toute la surface de la diva. La valeur par défaut . slider aura visibility : hidden, seulement après avoir reçu le . slide-active avec animation fadeIn visibility changera à visible.

Vous pouvez donner à votre navigation le style que vous souhaitez, tout comme vous pouvez modifier l’affichage du code PHP. Nous ajoutons ci-dessous notre style de curseur CSS, qui comprend également une animation de diapositives.