Share
L'intégration de la fonctionnalité de diaporama dans WordPress est une fonctionnalité très demandée pour presque tous les thèmes, mais est-elle difficile à inclure et flexible? Dans ce tutoriel, nous allons, de différentes manières, inclure l'un des diaporamas jQuery les plus populaires et les plus utilisés, Nivo Slider.
En fait, il existe déjà un plugin WordPress codé pour le Nivo Slider, directement sur la page officielle du Nivo Slider. Mais nous allons en construire un dans ce tutoriel de toute façon, et nous allons très certainement le faire différemment. Dans ce didacticiel, nous allons créer un plug-in de curseur Nivo qui aura une fonctionnalité de widget, une fonctionnalité de code abrégé et vous pourrez même l'intégrer sous la forme d'un simple appel de fonction et le coder en dur dans votre thème à la demande de l'utilisateur..
En suivant ce didacticiel, vous exécutez un serveur Apache et MySQL localement ou à distance afin de pouvoir installer WordPress. De plus, vous avez une version 3.1+ de WordPress installée, vous avez accès à son système de fichiers et vous avez des connaissances de base en PHP, CSS, JavaScript et HTML..
Une des parties les plus faciles de ce tutoriel. Nous allons créer un dossier nommé nivoplugine à l'intérieur de wp-content / plugins répertoire dans votre installation WordPress. Dans ce répertoire, nous allons créer un nivoplugin.php fichier avec le code suivant:
Il s’agit des informations de base du plugin utilisées par WordPress pour identifier le nom et les détails du plugin. Des choses comme Nom du plugin, La description, Auteur et Brancher version sont des paramètres obligatoires ajoutés sous forme de texte commenté en haut de chaque plugin afin que WordPress puisse identifier le plugin, le gérer, le lancer et afficher les informations requises le concernant dans la page des plugins.
"Pour plus d'informations sur le texte de l'en-tête du plugin et sur les autres options qui peuvent y être ajoutées, veuillez lire Écriture d'un plugin dans le codex WordPress."
Le diaporama est composé de photos. Par conséquent, afin de simplifier l’implémentation de jQuery Nivo Slider, nous avons besoin d’un moyen d’ajouter et de gérer des photos dans le panneau d’administration. Notre approche va faire bon usage de la fonctionnalité WordPress de type publication personnalisée. Les types de publication personnalisés seront utilisés pour créer une nouvelle page personnalisée dans laquelle chaque publication contient tous les détails requis de l’image: le nom et bien sûr la partie la plus importante, l’image elle-même. Nous allons utiliser le titre et l'éditeur pour les informations de nom et de description, ainsi que la fonctionnalité de l'image en vedette pour télécharger, gérer et identifier l'image..
Accentsconagua
function np_init () $ args = array ('public' => true, 'label' => 'Nivo Images', 'supports' => array ('titre', 'vignette')); register_post_type ('np_images', $ args); add_action ('init', 'np_init'); Dans l'exemple ci-dessus, nous ajoutons un crochet à la np_init fonction en utilisant la balise init hook qui sera exécutée avant les en-têtes. Nous devons le faire pour pouvoir ensuite inclure à l'intérieur du register_post_type fonction avec ses paramètres. Cette fonction est la fonction utilisée pour ajouter et gérer un nouveau type de publication personnalisé. Fondamentalement, nous incluons un nouveau type de message personnalisé nommé np_images avec quelques arguments.
Les arguments sont un tableau de valeurs représentant les paramètres de ce nouveau type de publication personnalisé. Des choses comme si elle est destinée à être utilisée publiquement, nous définissons public sur true, nous lui attribuons une étiquette avec le nom Images Nivo et nous définissons le fait que chaque message a un titre et une image sélectionnée avec les variables Titre et la vignette comme un tableau à l'attribut principal les soutiens.
Cela crée le type de message personnalisé et cela ressemble à ceci:
À ce stade, nous avons un type de message personnalisé enregistré et fonctionnel portant le nom de np_images. Nous pouvons ajouter de nouveaux messages, les supprimer et les éditer de la même manière que les messages normaux, mais personnalisés à notre intention pour gérer les images du diaporama. En gros, c’est l’endroit où nous ajoutons des images pour le diaporama Nivo en tant que messages..
Cela peut sembler compliqué ou prendre un peu plus de temps que d’habitude. Ce n'est pas. Nous allons télécharger la version jQuery gratuite du Nivo Slider et inclure ses scripts et styles nécessaires pour pouvoir les utiliser ultérieurement avec du code et des images personnalisés..
Pour télécharger les sources, allez à la page Tarification sur nivo.dev7studios.com et cliquez sur le plugin jQuery (version gratuite). Télécharger bouton à gauche pour télécharger les sources.
Pour les besoins de ce tutoriel, nous allons garder les choses très simples. Nous décompressons le fichier et incluons le répertoire entier dans notre répertoire de plugin. À l'intérieur de nivo-slider dossier, nous avons un autre dossier nommé démo. Nous allons supprimer cela car nous ne l'utilisons pas et nous ne voulons pas d'un plugin encombré avec des éléments inutiles.
La prochaine partie de cette étape inclut les fichiers nécessaires de Nivo Slider. Dans notre nivoplugin.php fichier nous allons ajouter ce qui suit:
add_action ('wp_print_scripts', 'np_register_scripts'); add_action ('wp_print_styles', 'np_register_styles'); Cela va s’accrocher à certaines fonctions (le deuxième paramètre est le nom de la fonction). Nous avons besoin de ces points d'ancrage pour inclure correctement les scripts et les styles dans le front-end. Regardons les fonctions de rappel de nos crochets précédents.
function np_register_scripts () if (! is_admin ()) // register wp_register_script ('np_nivo-script', plugins_url ('nivo-slider / jquery.nivo.slider.js', __FILE__), un tableau ('jquery') ; wp_register_script ('np_script', plugins_url ('script.js', __FILE__)); // met en file d'attente wp_enqueue_script ('np_nivo-script'); wp_enqueue_script ('np_script'); function np_register_styles () // register wp_register_style ('np_styles', plugins_url ('nivo-slider / nivo-slider.css', __FILE__)); wp_register_style ('np_styles_theme', plugins_url ('nivo-slider / themes / default / default.css', __FILE__)); // met en file d'attente wp_enqueue_style ('np_styles'); wp_enqueue_style ('np_styles_theme'); La fonction de rappel de script enregistre et inclut 3 fichiers javascript importants: jQuery (en tant que dépendance de Nivo Slider), fichier de base nivo-slider (jquery.nivo.slider.js) et notre fichier de script personnalisé (script.js). Nivo Slider nécessite jQuery pour fonctionner et nous avons besoin d'un script personnalisé pour l'activer.
jQuery (document) .ready (fonction ($) $ ('# curseur'). nivoSlider ();); Le script est assez simple, il faut jQuery pour attacher le nivoSlider fonction à la balise avec l'id de curseur. Cette balise va prendre la nivo-slider propriétés et fonctionnalités.
Enfin, dans notre étape précédente, la fonction de rappel de style enregistre et inclut 2 fichiers plus importants: le nivo-slider.css fichier qui contient tous les styles nécessaires pour que le curseur apparaisse et fonctionne en conséquence, et default.css déposer à l'intérieur du thèmes / défaut dossier que nous utilisons pour le thème du diaporama avec la valeur par défaut nivo-slider thème.
Comme mentionné au début, ce tutoriel couvrira la mise en œuvre d'un widget, d'un shortcode et d'une fonction permettant de coder en dur le curseur si nécessaire en utilisant le plugin que nous construisons. Pour le shortcode et la fonction, nous avons à peu près les mêmes tailles d'image et pour le widget une taille plus petite pour la hauteur et la largeur des images..
Premièrement, nous devons prendre en compte le fait que nous utilisons des images en vedette dans des publications personnalisées pour nos images de diaporama. Alors, comment pouvons-nous redimensionner et rogner ces images pour répondre à nos besoins? Nous allons ajouter de nouvelles tailles d'image que WordPress redimensionnera et recadrera à chaque nouveau téléchargement d'image. Pour ajouter les nouvelles tailles d’image, nous utiliserons le add_image_size fonction en ajoutant le code suivant à l'intérieur du np_init une fonction:
add_image_size ('np_widget', 180, 100, vrai); add_image_size ('np_function', 600, 280, true); Dans le code source ci-dessus, nous avons implémenté 2 tailles d'image que nous appellerons plus tard en utilisant les noms. np_widget pour widget et np_function pour shortcode et la fonction PHP pour les identifier.
Afin d'activer les miniatures de publication dans le plugin, la ligne de code suivante doit être ajoutée dans notre plugin. Nous allons l'ajouter au-dessus du add_action lignes.
add_theme_support ('post-vignettes'); "Taille des images ajoutées avec
add_image_sizene fonctionnera que pour les nouvelles images téléchargées une fois la fonction activée. "
L'une des principales caractéristiques du plugin est une fonction PHP que vous pouvez utiliser n'importe où dans votre code de thème pour insérer le grand diaporama Nivo 600x280..
Comme nous utilisons des publications personnalisées pour gérer nos images pour le diaporama, nous devons les interroger et obtenir les titres et les images du type de publication personnalisée. Pour cela, nous allons utiliser un nouveau WP_Query boucle avec les paramètres du $ args variable qui sélectionne le type de publication personnalisé et crée un diaporama de 5 images maximum à partir de la requête. Ensuite nous créons une variable $ résultat qui contient tout le code HTML nécessaire au diaporama Nivo. Nous utilisons les wrappers de code HTML de démonstration de notre dossier de téléchargement de scripts Nivo..
function np_function ($ type = 'np_function') $ args = array ('post_type' => 'np_images', 'posts_per_page' => 5); $ result = ''; $ result. = ''; // la boucle $ loop = new WP_Query ($ args); while ($ loop-> have_posts ()) $ loop-> the_post (); $ the_url = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), $ type); $ result. = '
'; $ result. = ''; $ result. = ''; $ result. = 'Ce est un exemple de HTML légende avec un lien. '; $ result. = ''; $ result. = ''; return $ result; Dans la boucle, nous utilisons le wp_get_attachment_image_src fonction pour récupérer l'image sélectionnée de notre message personnalisé. Nous utilisons le np_function valeur pour la taille de l'image que nous avons précédemment ajoutée dans np_init. Parce que nous sommes dans la boucle, nous pouvons utiliser $ post-> ID pour identifier la poste. La fonction a un paramètre, $ type, qui est utilisé pour définir la taille des images de wp_get_attachment_image_src avec l’une des tailles d’image précédemment définies. La variable a la valeur par défaut de np_function. Si aucun paramètre n'est donné lors de l'appel de la fonction, la variable par défaut entrera en vigueur..
Les titres des publications sont ajoutés en tant que valeurs au paramètre HTML title de la balise image et sont visibles au bas du diaporama en tant que texte flottant sur les images dans un arrière-plan sombre et transparent..
Le curseur est automatiquement redimensionné comme la taille de l'image qu'il contient. Ainsi, quelle que soit la taille de l'image utilisée, nous allons créer un diaporama de cette taille..
Le diaporama dans le np_function la taille ressemble à ceci:
Cet aperçu du diaporama est l'implémentation du shortcode qui sera traitée ensuite.
Une autre caractéristique principale est la mise en œuvre du shortcode. C'est en fait extrêmement facile à mettre en œuvre et peut être fait avec une ligne de code. Ajoutez juste cette ligne dans le np_init fonctionner au-dessus de tout ce qui est déjà là:
add_shortcode ('np-shortcode', 'np_function'); Le hook shortcode utilisera en réalité notre fonction PHP pour renvoyer le contenu du diaporama. C'est tout, une implémentation très simple et rapide du shortcode. Pour l'utiliser, il suffit d'ajouter [np-shortcode] dans le contenu de tout article ou page. Ce texte sera remplacé par le diaporama actuel.
Dans cette étape, nous allons construire un widget simple qui aura pour seul but de montrer un petit diaporama dans la barre latérale où il est placé..
Nous en avons déjà défini la taille à l’étape 4 et nous avons toutes les autres fonctionnalités qui incluent et génèrent le diaporama Nivo que nous pouvons utiliser pour l’intégrer au widget. Il ne reste donc maintenant qu’à construire le widget et à intégrer le code précédent.
fonction np_widgets_init () register_widget ('np_Widget'); add_action ('widgets_init', 'np_widgets_init'); Dans cette première partie, nous allons implémenter un nouveau hook que vous devriez ajouter parmi les autres. Ce crochet utilise le widgets_init tag et utilise une fonction que nous allons nommer np_widgets_init. Cette fonction s'exécute lorsque les widgets sont créés. En conséquence, nous allons enregistrer le widget sous le nom de np_Widget comme dans l'exemple ci-dessus.
Pour créer un nouveau widget, nous implémentons une nouvelle classe nommée np_Widget qui étend la WP_Widget classe. En première fonction, le __construction est la fonction principale et la plus importante de la classe et de la fonctionnalité de notre widget. La fonction a des paramètres que nous utilisons pour donner au widget un identifiant unique qui dans notre cas s'appelle np_widget, un nom, Nivo Diaporama, et même une description comme le montre le code suivant:
classe np_Widget étend WP_Widget fonction publique __construct () parent :: __ construct ('np_Widget', 'Nivo Slideshow', array ('description' => __ ('Un widget de diaporama Nivo', 'text_domain')); Ceci est bien sûr le début de notre widget, il y a quelques autres fonctions que nous devons implémenter et configurer car nous en avons besoin pour fonctionner.
Le widget ressemble à n'importe quel autre widget dans le back-end. Nous devons donner au widget un titre qui peut être saisi par l’utilisateur puis sauvegardé par le plugin. Pour ce faire, nous devons écrire le forme fonction étendue de la WP_Widget classe. Dans cette fonction, nous allons utiliser le $ instance paramètre que la fonction fournit pour obtenir le Titre qui est une variable implémentée, enregistrée et mise à jour ultérieurement. Nous créons donc l'élément d'entrée de formulaire en utilisant le code suivant:
formulaire de fonction publique ($ instance) if (isset ($ instance ['title'])) $ title = $ instance ['title']; else $ title = __ ('Widget Slideshow', 'text_domain'); ?>
Ce code ne fonctionne que dans le back-end et est requis par les fonctions suivantes pour que le nom du titre puisse être envoyé afin d'être sauvegardé et utilisé ultérieurement dans le frontal. le $ instance la variable a la valeur du titre et est utilisée directement comme dans l'exemple ci-dessus sans autre appel de requête ou de fonction.
Sauvegarde des données
Une fois le formulaire soumis à partir de la fonction précédente, il doit être traité et enregistré. Ceci est fait dans le mettre à jour fonction que nous devons également ajouter à la classe avec le code suivant:
mise à jour de la fonction publique ($ new_instance, $ old_instance) $ instance = array (); $ instance ['title'] = strip_tags ($ new_instance ['title']); return $ instance;
La valeur du champ est passée à travers le $ new_instance variable qui est dépouillé des balises, inséré dans le $ instance variable afin qu'elle puisse être renvoyée par la fonction et enregistrée par WordPress dans le cadre de la fonctionnalité étendue de son widget.
Widget Front-End
Enfin, une autre partie très importante et représentative de notre widget est la fonctionnalité front-end. Évidemment, chaque élément est important pour que le résultat final fonctionne, mais cette partie correspond à ce que vous voyez dans votre thème..
le widget function gère le frontal du widget et a deux paramètres: $ args et $ instance. le $ args paramètre est utilisé pour obtenir des variables comme $ before_widget, $ after_widget et $ before_title, $ after_title que nous allons utiliser dans notre code implémenté. La fonction du widget ressemble à ceci:
widget de fonction publique ($ args, $ instance) extract ($ args); // le titre $ title = apply_filters ('widget_title', $ instance ['title']); echo $ before_widget; if (! empty ($ title)) echo $ before_title. $ titre. $ after_title; echo np_function ('np_widget'); echo $ after_widget; Pour implémenter le diaporama, nous utilisons la fonction np_function mais dans ce cas, nous lui donnons le paramètre np_widget afin que nous obtenions les tailles d'image que nous voulons pour le widget.
Cela couvre la mise en œuvre du widget Nivo Slider dans notre plugin. À ce stade, vous pouvez accéder au panneau d'administration, ajouter quelques messages dans le menu des images Nivo et y attacher les images en vedette afin qu'elles apparaissent dans le diaporama..
"Pour plus d'informations sur l'API WordPress Widgets, consultez l'API WordPress Codex Widgets."
Conclusion
Il est très facile et rapide de mettre en place un diaporama dans WordPress si vous savez ce que vous faites et surtout si la fonctionnalité de diaporama est déjà créée et que vous ne faites que l’intégrer. Néanmoins, vous devez faire attention à ne pas utiliser certaines fonctionnalités déjà existantes et, bien sûr, c'est facile si vous l'implémentez de manière très basique, car une approche plus flexible avec de nombreuses options et fonctionnalités pourrait compliquer un peu les choses, en fonction de ce que les fonctionnalités sont.
